티스토리 뷰
목차
HTML에서 목록 태그를 활용하면 콘텐츠를 정리된 형태로 보여줄 수 있어
웹페이지의 가독성을 크게 향상시킬 수 있습니다. 이번 실습에서는
<ul>, <ol>, <li> 태그를 활용하여 다양한 형태의 목록을 만들어보고,
그 결과가 웹에서 어떻게 표현되는지도 함께 살펴보겠습니다.
HTML 목록 태그의 실사용 예제를 통해 구조 이해하기
이번 실습은 HTML에서 비순서 목록, 순서 목록, 중첩 목록을 모두 구현하며
웹 페이지 구조를 효율적으로 구성하는 방법을 익히는 것이 목적입니다.
각 태그가 어떤 기능을 하고, 어떤 시각적 효과를 주는지 직접 비교하며
배울 수 있는 과정입니다.
비순서 목록(unordered list)으로 기본 정리하기
가장 기본적인 <ul> 태그와 <li> 항목들을 사용해
반려동물 이름을 나열한 예제입니다.
"사랑스러운 반려동물들"이라는 제목 아래에
강아지, 고양이, 거북이, 햄스터 순으로 표시됩니다.
출력 결과에서는 글머리 기호(●)가 항목 앞에 붙어 정리된 느낌을 줍니다.
순서 목록(ordered list)으로 번호 매기기
비슷한 항목이지만 이번에는 <ol> 태그를 사용하여 순서를 부여합니다.
"사랑스러운 반려동물들"이라는 제목은 그대로 두고,
항목 앞에는 1, 2, 3, 4처럼 숫자가 붙어 표시됩니다.
이 방식은 순위나 단계별 설명이 필요한 경우 유용합니다.
비순서 목록과 순서 목록을 동시에 사용한 구조
두 개의 섹션으로 나눠서 각각 <ul>, <ol>을 사용한 예제입니다.
첫 번째는 반려동물 이름 리스트, 두 번째는 노래 제목 리스트입니다.
특히 "VOS 2019년 이후 싱글"이라는 제목 아래에
곡 제목들을 <ol>로 정리하며 콘텐츠 구분이 명확해졌습니다.
리스트 형식 사용자 정의하기
<ol start="1" type="a">처럼 속성을 추가하면
번호 대신 a, b, c 같은 알파벳으로도 리스트를 표현할 수 있습니다.
이러한 속성은 디자인적인 요소 외에도
특정 문서 포맷이나 시험지 스타일을 구현할 때 유용합니다.
중첩 목록(Nested list) 활용하기
목록 안에 또 다른 목록을 넣는 중첩 구조도 HTML에서는 간단히 구현할 수 있습니다.
예를 들어 "반려동물의 특징"이라는 제목 아래에
각 동물의 특성을 하위 <ul>로 묶었습니다.
강아지 → 귀엽다, 산책을 좋아한다
고양이 → 귀엽다, 도도하다
처럼 각각 세부 항목을 구분할 수 있어 콘텐츠를 더욱 풍부하게 만들 수 있습니다.
실습을 통해 얻는 핵심 정리
이번 실습을 통해 HTML 목록 태그를 다양하게 활용하는 방법을 배웠습니다.
비순서 목록은 일반적인 나열에, 순서 목록은 단계나 우선순위에,
중첩 목록은 구조화된 정보를 표현할 때 적합합니다.
중요: 시맨틱한 HTML 태그를 적절히 활용하면
검색 엔진 최적화(SEO)에도 긍정적인 영향을 미칩니다.
마크다운 표로 태그 기능 정리
태그 설명 사용 예시
| <ul> | 비순서 목록 | 일반 리스트 |
| <ol> | 순서 있는 목록 | 단계별 설명 |
| <li> | 항목 정의 | 각각의 리스트 아이템 |
| type | 번호 스타일 지정 | 숫자, 알파벳 등 |
| start | 시작 번호 설정 | 중간 번호부터 시작 가능 |
이번 실습을 마치며
HTML에서 목록을 다양하게 활용하는 방법을 익히면
더 깔끔하고 직관적인 웹페이지를 만들 수 있습니다.
이런 작은 요소 하나하나가 사용자 경험을 결정짓는 핵심 요소가 됩니다.