HTML <li> 태그로 리스트 항목 만들기

HTML <li> 태그로 리스트 항목 만들기

HTML 문서에서 목록을 만드는 것은 내용을 구조적으로 나열하는 중요한 방법입니다. 그 중 <li> 태그는 목록의 각 항목을 정의하는 데 사용됩니다. 이 가이드에서는 <li> 태그의 기본 사용법부터 고급 활용법까지 상세히 다루겠습니다.

 

 

목차

1. <li> 태그의 기본 사용법
2. 순서 있는 목록에서 <li> 태그 사용하기
3. 순서 없는 목록에서 <li> 태그 사용하기
4. 내부 리스트 만들기
5. 스타일링 리스트 항목
6. 접근성 고려하기
7. 결론

 

1. <li> 태그의 기본 사용법

<li> 태그는 목록 항목(list item)을 나타내며, <ol> 또는 <ul> 태그 안에 포함되어야 합니다. 기본적인 사용법은 다음과 같습니다:

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

 

 

2. 순서 있는 목록에서 <li> 태그 사용하기

순서 있는 목록은 <ol> 태그를 사용하며, 각 항목은 번호가 매겨집니다. 예를 들어, 쇼핑 목록을 만들 때 사용할 수 있습니다:

<ol>
    <li>사과 사기</li>
    <li>빵 사기</li>
    <li>우유 사기</li>
</ol>

 

 

3. 순서 없는 목록에서 <li> 태그 사용하기

순서 없는 목록은 <ul> 태그를 사용하며, 각 항목은 점 또는 다른 기호로 표시됩니다. 예를 들어, 할 일 목록을 만들 때 사용할 수 있습니다:

<ul>
    <li>청소하기</li>
    <li>세탁하기</li>
    <li>장보기</li>
</ul>

 

 

4. 내부 리스트 만들기

목록 항목 안에 또 다른 목록을 포함할 수 있습니다. 이를 통해 복잡한 리스트 구조를 만들 수 있습니다:

<ul>
    <li>과일
        <ul>
            <li>사과</li>
            <li>바나나</li>
        </ul>
    </li>
    <li>야채
        <ul>
            <li>당근</li>
            <li>브로콜리</li>
        </ul>
    </li>
</ul>

 

 

 

 

5. 스타일링 리스트 항목

CSS를 사용하여 리스트 항목의 스타일을 조정할 수 있습니다. 예를 들어, 글자 색상이나 글꼴 크기를 변경할 수 있습니다:

<style>
ul li {
    color: blue;
    font-size: 18px;
}
</style>

<ul>
    <li>HTML 배우기</li>
    <li>CSS 배우기</li>
    <li>JavaScript 배우기</li>
</ul>

 

 

6. 접근성 고려하기

접근성을 높이기 위해 목록을 작성할 때는 스크린 리더 사용자를 고려해야 합니다. 명확하고 간결한 항목을 사용하고, 중첩 리스트를 사용해 내용을 잘 구조화하는 것이 중요합니다.

<ul>
    <li>웹 접근성 향상하기
        <ul>
            <li>키보드 내비게이션 지원</li>
            <li>스크린 리더 호환성</li>
        </ul>
    </li>
    <li>반응형 디자인 구현</li>
</ul>

 

 

7. 결론

<li> 태그를 사용하여 목록 항목을 만드는 것은 HTML의 기본 중 하나입니다. 이 가이드를 통해 <li> 태그의 다양한 활용 방법을 익히고, 더 나아가 웹 페이지의 내용을 구조적으로 정리해 보세요. 목록은 정보를 쉽게 이해하고 탐색할 수 있도록 도와주는 중요한 도구입니다.