웹 페이지를 만들다 보면 정보를 보기 좋은 목록 형태로 정리해야 할 때가 많습니다. 예를 들어 학생 명단을 목록으로 표시하거나, 블로그 게시글 목록을 깔끔하게 정리해서 보여주고 싶을 수 있습니다.
HTML에는 이러한 목록을 손쉽게 만들 수 있는 기능이 기본적으로 내장되어 있습니다. 이번 튜토리얼에서는 HTML 목록의 종류와 각각을 웹 페이지에 구현하는 방법을 자세히 알아보겠습니다.
HTML 목록의 3가지 종류
HTML에서 사용할 수 있는 목록은 크게 세 가지이며, 각 목록마다 고유한 용도와 작성 방식이 있습니다.
- 순서 있는 목록(Ordered List): 항목을 특정 순서대로 나열할 때 사용합니다.
- 순서 없는 목록(Unordered List): 순서가 중요하지 않은 항목을 나열할 때 사용합니다.
- 설명 목록(Description List): 항목과 그에 대한 설명을 함께 나열할 때 사용합니다.
목록은 웹 페이지 어디에든 배치할 수 있습니다. 본문 사이에 넣거나 줄바꿈 뒤에 추가할 수 있고, 다른 목록 안에 넣어 중첩 목록(nested list)을 만들 수도 있습니다. 지금부터 세 가지 목록을 HTML로 만드는 방법을 하나씩 살펴보겠습니다.
순서 있는 목록(Ordered List) 만들기
목록의 순서가 중요한 경우에는 순서 있는 목록을 사용합니다. 예를 들어 요리 레시피처럼 특정 순서대로 진행해야 하는 단계를 안내할 때 적합합니다. 순서 있는 목록은 번호가 매겨진 목록입니다.
순서 있는 목록은 <ol> 태그로 만들며, 목록의 각 항목은 <li> 태그로 감싸줍니다. 다음은 순서 있는 목록의 예시입니다:
<ol> <li>볼에 밀가루 100g, 계란 2개, 우유 300ml, 해바라기유 1큰술를 넣고 섞습니다.</li> <li>반죽을 30분간 휴지시킵니다.</li> <li>중간 불로 달군 프라이팬을 키친타월에 기름을 묻혀 닦아줍니다.</li> <li>반죽을 팬에 부어 양면을 각각 1분씩 구워줍니다.</li> </ol>
위 예제는 팬케이크를 만드는 기본 레시피입니다. 각 단계가 반드시 순서대로 진행되어야 하므로 순서 있는 목록을 선택했습니다. 코드를 실행하면 다음과 같이 화면에 표시됩니다.
순서 있는 목록은 기본적으로 1번부터 시작해 오름차순으로 번호가 매겨집니다. 만약 목록이 다른 숫자에서 시작하길 원한다면 start 속성을 사용하면 됩니다:
<ol start="5"> <li>구운 팬케이크를 접시에 옮깁니다. (여러 장을 만들 경우 2~4단계를 반복합니다.)</li> <li>팬케이크에 버터, 메이플시럽, 레몬 등 원하는 토핑을 올립니다.</li> <li>맛있게 즐기세요!</li> </ol>
새로운 목록은 다음과 같이 표시됩니다.
순서 없는 목록(Unordered List) 만들기
항목의 순서가 중요하지 않은 목록을 만들 때는 HTML 순서 없는 목록 태그를 사용합니다. 순서 없는 목록은 <ul> 태그로 생성하며, 앞서 살펴본 순서 있는 목록과 마찬가지로 각 항목은 <li> 태그로 작성합니다.
다음은 순서 없는 목록의 예시입니다:
<ul> <li>Alex</li> <li>Carol</li> <li>Lucy</li> <li>Shawn</li> </ul>
위 코드는 다음과 같이 표시됩니다.
설명 목록(Description List) 만들기
목록을 작성하다 보면 각 항목에 대한 설명을 함께 덧붙이고 싶을 때가 있습니다. 예를 들어 학생 이름 목록에 성적을 추가하고 싶지만, 이름 목록 본문에는 포함하고 싶지 않은 경우가 그렇습니다.
이럴 때 유용한 것이 바로 설명 목록입니다. 설명 목록은 항목과 각 항목에 대한 설명을 함께 담는 목록으로, 전체 목록은 <dl> 태그로 만들고, 항목(용어)은 <dt> 태그, 설명(정의)은 <dd> 태그로 작성합니다.
다음은 HTML에서 설명 목록을 사용한 예시입니다:
<dl> <dt>이코노미석</dt> <dd>일반 좌석, 기내식 서비스 없음.</dd> <dt>퍼스트석</dt> <dd>프리미엄 좌석, 케이터링 기내식 서비스 제공.</dd> </dl>
위 코드는 다음과 같은 목록을 출력합니다.
화면에서 확인할 수 있듯이, 항공 좌석 등급 이름이 목록 형태로 표시되고 각 이름 아래에 해당 설명이 함께 나타납니다. 또한 각 설명은 들여쓰기 처리되어 목록 항목과 시각적으로 구분됩니다.
마무리
목록은 HTML의 필수적인 요소로, 개발자가 정보를 체계적이고 보기 좋게 표현할 수 있도록 도와줍니다. 목록 형태로 정리된 콘텐츠는 사용자가 읽기 편할 뿐만 아니라, 개발자가 정보의 구조를 더욱 세밀하게 제어할 수 있다는 장점도 있습니다.
이번 튜토리얼에서는 HTML 목록의 세 가지 종류와 작성 방법을 모두 살펴보았습니다. 순서 있는 목록(ol, li 태그), 순서 없는 목록(ul, li 태그), 그리고 설명 목록(dl, dt, dd 태그)까지 익혔으니, 이제 여러분도 프로처럼 HTML 목록을 만들 수 있을 것입니다!