목록(List) - 한 눈에 끝내는 HTML5/CSS3
한 눈에 끝내는 HTML5/CSS3
  • 목록(List)
    learn
    Practice
    learn
    08 테이블과 리스트
    목록(List)

    할 일을 체크하거나 장보기 목록을 적어야 할 때 체크리스트로 작성해본 경험이 있으실겁니다. 표와 마찬가지로 간단한 데이터에 대해 정리하기 편리하고 줄글과 달리 한 눈에 잘 들어오는 리스트에 대해 알아봅시다.

    리스트 형식의 목록 형태 또한 HTML을 통해 웹에 배치할 수 있습니다. 목록(List)은 크게 순서 없는 목록(Unordered List)순서 있는 목록(Ordered List)로 나뉩니다.


    순서 없는 목록


    먼저 순서 없는 목록은 아래와 같이 생겼으며, 다음 예시 코드와 같이 작성합니다.

    • 학교 과제하기
    • Python 강의 듣기

    <ul>은 리스트의 항목을 감싸는 태그이고, <li>는 리스트에 나열할 항목을 담아두는 태그입니다. 여기서 <ul>은 unordered list의 약자이고, <li> list item의 약자입니다. 순서가 없는 목록을 작성할 때 사용됩니다.


    순서 있는 목록


    다음으로 순서 있는 목록은 다음과 같은 모양입니다. 말 그대로 순서를 가진 리스트입니다. 다음 세 가지 요소를 순서 있는 목록으로 코드를 작성해보려 합니다.

    1. 세제
    2. 돼지 고기 300g
    3. 생수

    순서 없는 목록과 <ul>이 <ol>로 바뀌었다는 점을 제외하면 태그 사용 방법은 동일합니다.

    예시 코드로 만든 두 리스트를 비교해봅시다.

    구분점 혹은 목록 스타일만 다를 뿐, 사용하는 형태나 브라우저에 적용되는 스타일은 동일한 것을 확인할 수 있습니다.

    다만, 각 리스트를 보면 제목이나 <p> 태그 혹은 일반적인 텍스트와는 다르게 들여쓰기되어 리스트 범위에 포함되는 관계임을 나타냅니다. 또한, 리스트 태그 역시 브라우저의 디폴트 스타일이 적용되고 있는 점을 확인할 수 있습니다.


    중첩 리스트


    마지막으로 리스트는 서로 중첩이 가능하다는 점을 살펴보겠습니다.

    위 코드를 통해 오늘 할 일 리스트 항목 중 학교 과제하기라는 항목에 <ol>태그를 하나 더 넣어 리스트 안에 리스트를 넣은 것을 볼 수 있습니다. 리스트 태그는 들여쓰기가 기본적인 스타일입니다. 이 중첩을 반복하여 한 번 더 들여쓰기하면 한 번 더 하위 항목으로 들어가게 됩니다.

    Practice
    이론에서 살펴본 코드를 직접 작성하여 결과를 확인한 뒤, 구성 요소를 변경하며 어떤 변화가 일어나는지 확인해봅시다.
    learn
    Practice
    Q & A
    Q&A forum that anyone can ask and answer.
    Share your questions and answers with other students and grow together!

    Registered Questions(0)