고래씌

[HTML] 4-1. 목록관련태그 본문

Front-End/HTML

[HTML] 4-1. 목록관련태그

고래씌 2023. 11. 1. 13:09

1. 목록관련태그

1) 순서가 없는 목록 태그 <ul></ul>

=> <li></li>  ,  <ul></ul>

=> 목록안에 목록을 넣을 수 있다!

=> ul 태그는 순서가 없는 목록 태그이다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>목록 관련 태그</title>
</head>
<body>
    <!-- li : list의 약자 -->
    <li>목록1</li>
    <li>목록2</li>

    <h1>ul : 순서 없는 목록 태그</h1>
    <ul>
        <li>HTML
            <ul>
                <!-- 목록안에 목록을 넣을 수 있다. -->
                <li>글자관련</li>
                <li>목록관련</li>
            </ul>
        </li>
        <li>CSS</li>
        <li>jQuery</li>
        <li>React</li>

    </ul>
    <!--
        불릿(bullet) 기호 : 채워진 원, 속이 빈 원, 네모, .... 모양 변경이 가능함 => css 시간에 적용할 예정 
    -->


</body>
</html>

 

 

2) 순서 있는 목록 태그 <ol></ol>

- type 속성을 이용해서 변경 가능함

- <ol> => type을 지정하면 기본값 1로 들어감.

- 반드시 시작태그에만 작성할 수 있음

- start 속성을 이용하여 시작값 변경 가능

- start = 정수값

 

ex) <ol type="a"  start="5">   =>  e부터 시작

역순으로 출력할 시 <ol type="a"  start="5" reversed>  => 역순 출력

e. ...

d. ...

c. ...

b. ...

 

<body>

    <h1>ol : 순서 있는 목록 태그</h1>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
        <li>JQ</li>


    </ol>
    <!-- ol 태그의 기본 순서는 1로 시작하는 숫자값 -->

    <!-- type 속성을 이용해서 변경 가능
         속성값 : 1(기본값), a, A-->

    <ol type="a">
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
        <li>JQ</li>
    </ol>

    <ol type="i">
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
        <li>JQ</li>
    </ol>

    <br>

</body>

 

 

3) 설명과 관련된 목록태그

<dl>

     <dt></dt>

     <dd></dd>

</dl>

 

    <h1>dl : 설명과 관련된 목록태그</h1>
    <dl>
        <dt>이곳은 제목을 작성하는 곳</dt>
        <dd>여기에 설명을 작성</dd>
        <dd>여러줄로도 작성 가능</dd>

        <dt>또다른 제목도 작성 가능</dt>
        <dd>설명도 마찬가지다</dd>
    </dl>

 

 

4) 실습 문제

    <h3>자바(Java) 학습내용</h3>
    <h4>담당 강사 : 이고래</h4>
    전화번호 : 010-1234-1234
    <hr>

    <ul>
        <li>프로그래밍 언어
            <ul>
                <li><s>Java</s></li>
            </ul>
        </li>
        <li>데이터 베이스
            <ul>
                <li><s>Oracle</s></li>
            </ul>
        </li>
        <li>Forntend
            <ol>
                <li><mark>HTML5</mark></li>
                <li>CSS3</li>
                <li>JavaScript</li>
                <li>jQuery</li>
            </ol>
        </li>
        <li>서버 개발 기술
            <ol type="i">
                <li><s>JDBC</s></li>
                <li>Servlet</li>
                <li>JSP</li>
                <li>AJAX</li>
            </ol>
        </li>
        <li>프레임워크
            <ol type="a">
                <li>MyBatis</li>
                <li><b>Spring</b></li>
            </ol>
        </li>

    </ul>
저작자표시 비영리 변경금지

'Front-End > HTML' 카테고리의 다른 글

[HTML] 5-2. 멀티미디어 관련 태그  (1) 2023.11.01
[HTML] 5-1. 표관련태그  (0) 2023.11.01
[HTML] 3. 글자관련태그  (0) 2023.11.01
[HTML] 1. HTML5 ~ 2. 헤더(HEAD)  (1) 2023.10.30
[HTML] 0. 설치 환경 구성하기  (0) 2023.10.30
'Front-End/HTML' Related Articles more