li element - by. UXKM

2025-05-16

요약 설명
<li> 요소는 <ul>, <ol>의 목록 요소 안에서 각 개별 항목(list item)을 정의하는 태그입니다.
목록의 한 줄 또는 한 항목을 의미하며, 콘텐츠의 수직 나열이나 절차, 항목 구분 등 다양한 용도로 사용됩니다. <li>는 반드시 직계 부모 요소로 <ul>, <ol> 중 하나가 있어야 하며, 필요에 따라 중첩된 목록도 구성할 수 있습니다.

주요 역할 및 특징

목록 항목 정의
- <li>는 비순서 목록(<ul>)과 순서 목록(<ol>)의 각 항목을 정의합니다.
- 각각의 <li>는 목록에서 하나의 독립된 항목으로 취급됩니다.
다양한 콘텐츠 포함 가능
- <li>는 텍스트뿐만 아니라, 이미지, 링크, 서브 목록 등을 포함할 수 있습니다.
- 예)
  <li><a href="#">링크</a></li> <li><img src="image.jpg" alt="이미지"></li> <li> 서브 목록 <ul> <li>서브 목록 아이템</li> <li>서브 목록 아이템</li> </ul> </li>
구조적 의미 부여
- <li>는 목록 항목을 그룹화하여 콘텐츠 구조를 명확히 표현합니다.
- 순서 목록(<ol>)에서는 항목 순서가 중요하고, 비순서 목록(<ul>)에서는 순서가 중요하지 않습니다.
다른 요소와의 관계
- <li>는 반드시 <ul> 또는 <ol>의 직계 자식으로 위치해야 합니다.
- 단독으로 사용할 수 없으며, 목록의 구성 요소로만 사용됩니다.

CSS 기본 값

<li> 요소는 list-item 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

							li {
								display: list-item;
								list-style-type: inherit;
								margin: 0;
								padding: 0;
							}

기본 문법

							<ul>
								<li>첫 번째 항목</li>
								<li>두 번째 항목</li>
								<li>세 번째 항목</li>
							</ul>

속성

[value] 선택 사항 <li value="number">

순서 있는 목록(<ol>)의 <li>에만 사용하며, 특정 항목 번호를 수동으로 설정할 수 있습니다.
아래 예제와 같이 첫 번째 <li>에만 value 속성을 설정하면, 이후 항목은 자동으로 순서가 매겨집니다.

예제

순서 없는 목록의 항목

								<ul>
									<li>사과</li>
									<li>바나나</li>
									<li>체리</li>
								</ul>

순서 있는 목록의 항목

								<ol>
									<li>단계 1</li>
									<li>단계 2</li>
									<li>단계 3</li>
								</ol>

중첩된 목록

								<ul>
									<li>프로그래밍 언어
										<ul>
											<li>Python</li>
											<li>JavaScript</li>
											<li>Java</li>
										</ul>
									</li>
									<li>웹 기술
										<ul>
											<li>HTML</li>
											<li>CSS</li>
										</ul>
									</li>
								</ul>

이미지와 함께 사용하는 목록

								<ul>
									<li><img src="apple.jpg" alt="사과"> 사과</li>
									<li><img src="banana.jpg" alt="바나나"> 바나나</li>
								</ul>

링크를 포함한 목록

								<ul>
									<li><a href="https://www.example.com">첫 번째 링크</a></li>
									<li><a href="https://www.example.com">두 번째 링크</a></li>
								</ul>

접근성을 고려한 목록 항목

								<ul aria-label="과일 목록">
									<li>사과</li>
									<li>바나나</li>
									<li>오렌지</li>
								</ul>

주의사항

<li> 요소는 반드시 <ul> 또는 <ol>의 직계 자식으로만 사용해야 하며, <li> 요소 단독으로 사용할 수 없습니다.
중첩된 목록은 들여쓰기를 적절히 설정하여 가독성을 높이는 것이 중요합니다. 또한, 중첩된 목록이 명확히 구분되도록 CSS를 활용해 스타일을 지정하면 사용자 경험이 향상됩니다.