HTML <ul> 태그, 웹 페이지에 목록 추가하기

HTML <ul> 태그, 페이지에 목록 추가하기

HTML에서는 목록을 쉽게 작성할 수 있는 다양한 태그를 제공합니다. 그 중에서도 <ul> 태그는 순서 없는 목록을 만드는 데 사용됩니다. 이 글에서는 <ul> 태그를 사용하여 웹 페이지에 목록을 추가하는 방법과 그 활용법에 대해 알아보겠습니다.

 

 

목차

1. HTML <ul> 태그란?
2. <ul> 태그 기본 사용법
3. 목록 항목 스타일링
4. 중첩 목록 만들기
5. 실전 예제
6. 결론

 

1. HTML <ul> 태그란?

<ul> 태그는 "unordered list"의 약자로, 순서가 없는 목록을 의미합니다. 이 태그 안에 <li> 태그를 사용하여 각 목록 항목을 정의합니다. <ul> 태그는 주로 항목의 순서가 중요하지 않은 경우에 사용됩니다.

 

 

2. <ul> 태그 기본 사용법

<ul> 태그는 <li> 태그와 함께 사용됩니다. <li> 태그는 "list item"의 약자로, 목록의 각 항목을 나타냅니다. 아래 예제는 기본적인 <ul> 태그 사용법을 보여줍니다.

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

 

 

3. 목록 항목 스타일링

CSS를 사용하여 <ul> 목록 항목을 스타일링할 수 있습니다. 기본적으로 목록 항목에는 원형 불릿이 사용되지만, CSS를 통해 이를 변경할 수 있습니다.

<style>
ul {
    list-style-type: square;
}
</style>

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

 

 

4. 중첩 목록 만들기

<ul> 태그를 중첩하여 다단계 목록을 만들 수 있습니다. 중첩 목록은 <li> 태그 내에 또 다른 <ul> 태그를 추가하여 만듭니다.

<ul>
    <li>첫 번째 항목
        <ul>
            <li>첫 번째 하위 항목</li>
            <li>두 번째 하위 항목</li>
        </ul>
    </li>
    <li>두 번째 항목</li>
</ul>

 

 

 

 

5. 실전 예제

다음은 <ul> 태그를 사용하여 웹 페이지의 내비게이션 바를 만드는 예제입니다.

<nav>
    <ul>
        <li><a href="#home">홈</a></li>
        <li><a href="#about">소개</a></li>
        <li><a href="#services">서비스</a></li>
        <li><a href="#contact">연락처</a></li>
    </ul>
</nav>

 

 

6. 결론

HTML <ul> 태그는 순서 없는 목록을 작성하는 데 매우 유용합니다. 기본 사용법부터 중첩 목록까지 다양한 방법으로 활용할 수 있으며, CSS를 통해 스타일링할 수 있습니다. 이번 글을 통해 <ul> 태그를 효과적으로 사용하여 웹 페이지를 구성하는 방법을 익히셨기를 바랍니다.