목록은 웹 페이지에서 정보를 구조화하는 데 매우 중요한 요소입니다. 이번 포스팅에서는 HTML에서 순서 있는 목록(ordered list)과 순서 없는 목록(unordered list)을 만드는 방법에 대해 알아보겠습니다. 먼저 이론적인 부분을 살펴보고, 그 다음에 직접 코드를 작성해 실습해 보도록 하겠습니다. 이러한 목록들은 사용자가 정보를 손쉽게 읽고 이해할 수 있도록 도와줍니다.
이론: HTML 목록
HTML에서는 글머리 기호 목록과 순차 목록을 만들 때 별개의 태그를 사용합니다.
1. 순서 없는 목록 (<ul>)
<ul> (Unordered List) 요소는 글머리 기호로 항목을 나타내는 목록을 만드는 데 사용됩니다. 보통 점, 원형, 사각형 등의 기호로 목록의 각 항목(<li>)을 표시합니다. 순서가 중요하지 않은 목록에 이용됩니다.
<ul>
<li>커피</li>
<li>차</li>
<li>우유</li>
</ul>
2. 순서 있는 목록 (<ol>)
<ol> (Ordered List) 요소는 숫자나 알파벳 등의 순서를 가진 리스트를 만드는 데 사용됩니다. 각 항목은 <li> 태그를 통해 생성됩니다. 절차, 순서, 랭킹 등 순차적 중요도가 있는 항목에 사용됩니다.
<ol>
<li>먼저 커피를 간다.</li>
<li>그 다음 물을 끓인다.</li>
<li>그리고 커피를 우린다.</li>
</ol>
실습: HTML 목록 만들기
이제 이론을 바탕으로 실제로 HTML 목록을 만들어보겠습니다.
1. 텍스트 에디터를 열어서 아래와 같은 코드를 작성해보세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 목록 만들기</title>
</head>
<body>
<h1>오늘의 할 일</h1>
<h2>순서 없는 목록</h2>
<ul>
<li>집 정리하기</li>
<li>장보기</li>
<li>독서</li>
</ul>
<h2>순서 있는 목록</h2>
<ol>
<li>아침 7시에 일어나기</li>
<li>아침 먹기</li>
<li>8시 반 출근하기</li>
</ol>
</body>
</html>2. 파일을 'lists.html'로 저장합니다.
3. 저장한 파일을 웹 브라우저에서 열어 제대로 작동하는지 확인해 보세요.
코드 설명
- <h1>과 <h2> 태그를 사용하여 페이지 제목과 소제목을 만들었습니다. 이를 통해 페이지의 구조를 논리적으로 표현했습니다.
- <ul> 태그는 순서 없는 목록을 만드는 데 사용되며, 내부의 `<li>` 태그들로 각 항목을 나타냅니다.
- <ol> 태그는 순서 있는 목록을 만드는데 사용됩니다. `<li>`를 사용하여 순서를 가진 항목들을 나타냈습니다.
마무리
목록을 사용하면 웹 페이지의 내용을 체계적으로 정렬하여 사용자가 정보를 더 쉽게 찾고 이해할 수 있도록 도와줍니다. 순서 없는 목록과 순서 있는 목록은 단순해 보이지만, 웹 페이지에서 정보를 제공하는 기본적이고 효과적인 방법입니다.
이 게시물을 통해 HTML 목록을 만드는 법과 그 중요성을 이해하셨기를 바랍니다. 다음 포스팅에서는 HTML에서의 표 만드는 법을 살펴보겠습니다.
읽어주셔서 감사하며, 항상 행복한 코딩 되세요!