FullStack Steps/HTML Practicing

HTML에서 목록 표시하기

짱짱짱마샤리 2024. 12. 13. 11:19

이번 시간에는 HTML에서 목록을 표시하는 방법을 알아보려고 한다.

 

먼저 목록이란 연관있는 항목(item)들을 나열하는것을 의미한다.
우리가 알아볼 HTML은 '순서있는 목록'과  '순서없는 목록'으로 구분한다.

 

순서 있는 목록이란 뭘까?

HTML 코드를 통해 살펴보도록 하자!!

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <hr>
       Ordered List(순서가 있는 목록) <!-- 순서가 있는 목록은 Ordered List 라고 한다 -->
    <hr>
    <ol> <!-- ol 태그는 Ordered List의 약자다 -->
       <li>하나</li> <!-- li 태그는 list의 약자다 -->
       <li>둘</li>
       <li>셋</li>
    </ol>

</body>

</html>

하나 둘 셋 이라고 적은 부분이 굉장히 하찮아 보이긴 하지만 가장 대표적인 순서가 있는 목록이다

출력을 한 번 해보자

우리가 1. 2. 3. 을 적어주지 않았지만 자동적으로 숫자를 기입하여 정렬해 준 모습을 볼 수 있다.

 

 

이번에는 순서가 없는 목록도 같이 출력해보자

간단한 소스를 더 추가해보겠다.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <hr>
    Ordered List(순서가 있는 목록) <!-- 순서가 있는 목록은 Ordered List 라고 한다 -->
    <hr>
    <ol> <!-- ol 태그는 Ordered List의 약자다 -->
        <li>하나</li> <!-- li 태그는 list의 약자다 -->
        <li>둘</li>
        <li>셋</li>
    </ol>

    <hr>
    Unordered List(순서없는 목록) <!-- 순서가 없는 목록은 Ordered List 라고 한다 -->
    <hr>
    <ul> <!-- ul은 Unordered List의 약자다 -->
        <li>사과</li>
        <li>참외</li>
        <li>수박</li>
    </ul>
</body>

</html>

사과 참외 수박은 과일이라는 공통점을 가지고 있지만 순서를 가지고 있다고 볼 수 없다.

 

출력을 해서 비교해보자!

이렇게 숫자가 아닌 기호를 통해서 차례대로 나타나는 것을 알 수 있다.

 

눈치빠른 사람들은 알아차렸겠지만 List는 블록 요소다!!

 

 

자 마지막으로 Dictionary List(사전 목록)에 대해 설명하고 이 포스팅을 마치도록 하겠다.

 

일반적으로 사전은 목차가 있고 그 목차에 따라서 여러 설명들이 붙어 있다. 이 모양새를 따와서 Dictionary List란 이름을 붙인거 같다.

 

말로는 어려우니 코드로 직접 눈으로 확인해보자.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <hr>
    Ordered List(순서가 있는 목록) <!-- 순서가 있는 목록은 Ordered List 라고 한다 -->
    <hr>
    <ol> <!-- ol 태그는 Ordered List의 약자다 -->
        <li>하나</li> <!-- li 태그는 list의 약자다 -->
        <li>둘</li>
        <li>셋</li>
    </ol>

    <hr>
    Unordered List(순서없는 목록) <!-- 순서가 없는 목록은 Ordered List 라고 한다 -->
    <hr>
    <ul> <!-- ul은 Unordered List의 약자다 -->
        <li>사과</li>
        <li>참외</li>
        <li>수박</li>
    </ul>

    <hr>
       Dictionary List(사전목록) 
    <hr>
    <dl> <!-- dl 태그는 Dictionary List의 약자다 -->
      <dt>Html이란?</dt> <!-- dt 태그는 Dictionary Title 의 약자다   -->
      <!-- dd 태그는 Dictionary Data의 약자다 -->
      <dd>1.Hyper Text Markup Language의 약자입니다</dd>
      <dd>2.Browser에서 해석되는 언어입니다</dd>

      <dt>CSS란?</dt>
      <dd>1.Cacading Style Sheet의 약자입니다</dd>
      <dd>2.Html의 디자인을 담당하는 언어입니다</dd>

      <dt>Javascript란?</dt>
      <dd>1.Browser를 제어하는 언어입니다</dd>
      <dd>2.각각의 Element의 Event등을 담당합니다</dd>
      <dd>3.현재 창닫기</dd>
    </dl>
</body>

</html>

dt와 dl 태그를 통해 자동으로 들여쓰기가 된 것을 확인할 수 있다.

 

 

직접 숫자를 써주긴 했지만 나는 ol 태그를 통해 숫자를 쓰고 싶다고 하면 충분히 쓸 수 있다.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <hr>
    Ordered List(순서가 있는 목록) <!-- 순서가 있는 목록은 Ordered List 라고 한다 -->
    <hr>
    <ol> <!-- ol 태그는 Ordered List의 약자다 -->
        <li>하나</li> <!-- li 태그는 list의 약자다 -->
        <li>둘</li>
        <li>셋</li>
    </ol>

    <hr>
    Unordered List(순서없는 목록) <!-- 순서가 없는 목록은 Ordered List 라고 한다 -->
    <hr>
    <ul> <!-- ul은 Unordered List의 약자다 -->
        <li>사과</li>
        <li>참외</li>
        <li>수박</li>
    </ul>

    <hr>
    Dictionary List(사전목록)
    <hr>
    <dl> <!-- dl 태그는 Dictionary List의 약자다 -->
        <dt>Html이란?</dt> <!-- dt 태그는 Dictionary Title 의 약자다   -->
        <!-- dd 태그는 Dictionary Data의 약자다 -->
        <dd>
            <ol> <!-- ol 태그를 사용 하여 li 태그를 사용 -->                
                <li>Hyper Text Markup Language의 약자입니다</li>
                <li>Browser에서 해석되는 언어입니다</li>
            </ol>
        </dd>

        <dt>CSS란?</dt>
        <dd>1.Cacading Style Sheet의 약자입니다</dd>
        <dd>2.Html의 디자인을 담당하는 언어입니다</dd>

        <dt>Javascript란?</dt>
        <dd>1.Browser를 제어하는 언어입니다</dd>
        <dd>2.각각의 Element의 Event등을 담당합니다</dd>
        <dd>3.현재 창닫기</dd>
    </dl>
</body>

</html>

위는 가장 위의 dd 태그에 ol태그와 li 태그를 사용하였다. 결과는 어떻게될까?

우리가 숫자를 쓰지 않아도 저절로 생겼지만 ol 태그가 블록 요소기 때문에 ol 태그의 수 만큼 빈 줄이 2 개 생긴 것을 알 수 있다.

 

ol 태그를 지워보면 어떻게 될까

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <hr>
    Ordered List(순서가 있는 목록) <!-- 순서가 있는 목록은 Ordered List 라고 한다 -->
    <hr>
    <ol> <!-- ol 태그는 Ordered List의 약자다 -->
        <li>하나</li> <!-- li 태그는 list의 약자다 -->
        <li>둘</li>
        <li>셋</li>
    </ol>

    <hr>
    Unordered List(순서없는 목록) <!-- 순서가 없는 목록은 Ordered List 라고 한다 -->
    <hr>
    <ul> <!-- ul은 Unordered List의 약자다 -->
        <li>사과</li>
        <li>참외</li>
        <li>수박</li>
    </ul>

    <hr>
    Dictionary List(사전목록)
    <hr>
    <dl> <!-- dl 태그는 Dictionary List의 약자다 -->
        <dt>Html이란?</dt> <!-- dt 태그는 Dictionary Title 의 약자다   -->
        <!-- dd 태그는 Dictionary Data의 약자다 -->
        <dd>
            <li>Hyper Text Markup Language의 약자입니다</li>
            <li>Browser에서 해석되는 언어입니다</li>
        </dd>

        <dt>CSS란?</dt>
        <dd>1.Cacading Style Sheet의 약자입니다</dd>
        <dd>2.Html의 디자인을 담당하는 언어입니다</dd>

        <dt>Javascript란?</dt>
        <dd>1.Browser를 제어하는 언어입니다</dd>
        <dd>2.각각의 Element의 Event등을 담당합니다</dd>
        <dd>3.현재 창닫기</dd>
    </dl>
</body>

</html>

빈 줄은 줄었지만 ul 태그의 특징인 기호를 통해 정렬된 모습을 확인할 수 있다.

 

그렇다 li 태그의 기본형은 ul 태그이다.

 

자 오늘 이렇게 세 가지 리스트 태그에 대해 알아보았고 다음 시간에는 HTML에 이미지를 삽입할 수 있는

img 태그에 대해 알아보도록 하겠다.

저작자표시 (새창열림)