그럼에도 불구하고

👨‍💻

[Visual Studio Code] ol/ul/dl 태그 사용하기 본문

HTML, CSS/Function implementation

[Visual Studio Code] ol/ul/dl 태그 사용하기

zenghyun 2022. 10. 23. 21:24

html에서는 목록을 작성하고 싶을 때 사용할 수 있는 태그가 있다.

 

ol: ordered list 

 

ul: unordered list

 

dl: definition list

 

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>목록형 속성의 태그</title>
</head>

<body>
    <h1>순서가 있는 목록</h1>
    <ol>
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
        <li>react</li>
    </ol>

    <h1>순서가 없는 목록</h1>
    <ul>
        <li>유튜브</li>
        <li>운동</li>
        <li>프로그래밍</li>
        
    </ul>

    <h1>정의형 목록</h1>
    <!--definition list  -->
    <dl>      
        <dt><ins>html</ins></dt>
        <dd><mark>Hyper Text Markup Language</mark><br>Html 요소는 정의 목록 요소()에서 앞선 용어()에 대한 설명, 정의, 또는 값을 제공한다.</dd>
                
        <dt>css</dt>
        <dd>Cascading Style Sheet</dd>
    </dl>
</body>

</html>

 

ol은 순서가 있어서 li태그에 작성된 내용이 차례대로 숫자가 붙어서 나온다. 

 

 

ul 태그는 순서가 없기 때문에 li태그에 작성된 내용에 번호가 붙어서 나오지 않는다.

 

 

dl 태그는 정의하고 싶은 내용을 dt태그에 작성하고 그 내용에 대한 부가적인 설명을 dd태그에 작성하면 된다. 

 

 

HTML

 

목록형 속성의 태그

순서가 있는 목록

  1. html
  2. css
  3. javascript
  4. react

순서가 없는 목록

  • 유튜브
  • 운동
  • 프로그래밍

정의형 목록

html
Hyper Text Markup Language
Html 요소는 정의 목록 요소()에서 앞선 용어()에 대한 설명, 정의, 또는 값을 제공한다.
css
Cascading Style Sheet

 

 

각 태그들에는 type를 정해서 사용할 수 있다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UnOrdered list</title>
</head>
<body>
    <ul type="square">
        <li>item1</li>
        <ul type="disc">
            <li>sub-item1</li>
            <ul type="circle">
                <li type="none">subTitle</li>
                <li>subTitle</li>
                <li>subTitle</li>
                <li>subTitle</li>
            </ul>
            <li>sub-item2</li>
            <ul>
                <li>subTitle</li>
                <li>subTitle</li>
                <li>subTitle</li>
                <li>subTitle</li>
            </ul>
            <li>sub-item3</li>
            <ul>
                <li>subTitle</li>
                <li>subTitle</li>
                <li>subTitle</li>
                <li>subTitle</li>
            </ul>
            <li>sub-item4</li>
            <ul>
                <li>subTitle</li>
                <li>subTitle</li>
                <li>subTitle</li>
                <li>subTitle</li>
            </ul>
        </ul>
        
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
    </ul>
    
    
   
</body>
</html>

 

 

html

 

UnOrdered list
  • item1
    • sub-item1
      • subTitle
      • subTitle
      • subTitle
      • subTitle
    • sub-item2
      • subTitle
      • subTitle
      • subTitle
      • subTitle
    • sub-item3
      • subTitle
      • subTitle
      • subTitle
      • subTitle
    • sub-item4
      • subTitle
      • subTitle
      • subTitle
      • subTitle
  • item2
  • item3
  • item4

 

ol 태그에서는 시작 순서를 정하여 그 순서부터 출력할 수 있다.

 

ol 태그 안에 start = "내가 시작하고 싶은 순서"와 같이 적으면 된다.

 

알파벳을 사용하여 시작하고 싶은 알파벳부터 작성할 수도 있다. 

 

                                       <ol start="1" type="A"> 와 같이 사용하면 되며  당연히 소문자도 가능하다.
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>순서 시작 번호</title>
</head>

<body>
    <h1>순서가 있는 목록의 순서</h1>
    <ol>
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
        <li>react</li>
    </ol>
    <ol start="5">
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
        <li>react</li>
    </ol>
    <ol start="1" type="A">
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
        <li>react</li>
    </ol>
    <ol start="5" type="a">
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
        <li>react</li>
    </ol>

</body>

</html>

 

html

순서 시작 번호

순서가 있는 목록의 순서

  1. html
  2. css
  3. javascript
  4. react
  1. html
  2. css
  3. javascript
  4. react
  1. html
  2. css
  3. javascript
  4. react
  1. html
  2. css
  3. javascript
  4. react

 

 

 

'HTML, CSS > Function implementation' 카테고리의 다른 글

[Visual Studio Code] justify-content  (0) 2022.11.01
[Visual Studio Code] scroll-behavior: smooth  (0) 2022.10.29
[Visual Studio Code] overflow 사용하기  (0) 2022.10.29
[Visual Studio Code] css 사용하기 / nth-child / nth-of-type  (0) 2022.10.23
[Visual Studio Code]img태그 / a태그 사용하기  (0) 2022.10.23
'HTML, CSS/Function implementation' Related Articles more
Comments