소개
HTML 목록은 웹 개발의 기본적인 부분으로, 관련 항목들을 그룹화하고 구성하는 데 사용됩니다. 콘텐츠를 더 읽기 쉽고 접근 가능하게 만들어 줍니다. 목록에는 두 가지 주요 유형이 있습니다:
- 순서 없는 목록 (
<ul>): 항목의 순서가 중요하지 않을 때 사용됩니다. 일반적으로 글머리 기호 (bullet points) 로 표시됩니다. - 순서 있는 목록 (
<ol>): 항목의 순서가 중요할 때 사용됩니다. 일반적으로 숫자로 표시됩니다.
이 실습에서는 두 가지 유형의 목록을 생성하고, 항목을 추가하며, 더 복잡한 구조를 만들기 위해 중첩된 하위 목록을 만드는 방법을 배우게 됩니다. 실습이 끝나면 이러한 목록 유형을 보여주는 단일 HTML 페이지를 갖게 될 것입니다.
순서 없는 목록을 위한 ul 태그 생성
이 단계에서는 순서 없는 목록을 생성합니다. 순서 없는 목록은 <ul> 태그로 정의되며, 항목의 순서가 중요하지 않을 때 사용됩니다.
먼저, WebIDE 왼쪽의 파일 탐색기에서 index.html 파일을 찾습니다. 파일을 클릭하여 편집기에서 엽니다.
index.html 파일의 <body> 안에, <h1> 제목 바로 뒤에 <ul> 태그와 </ul> 태그를 넣어 빈 순서 없는 목록을 추가합니다.
이제 index.html 파일은 다음과 같이 보여야 합니다:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Lists</title>
</head>
<body>
<h1>My Grocery List</h1>
<ul></ul>
</body>
</html>
코드를 추가한 후 파일을 저장합니다. Web 8080 탭으로 전환하여 변경 사항을 미리 볼 수 있습니다. 아직 항목을 추가하지 않았기 때문에 이 시점에서는 목록 항목이 보이지 않을 것입니다.
목록 항목을 위한 ul 안에 li 태그 추가
이 단계에서는 순서 없는 목록에 항목을 추가합니다. 목록의 각 항목은 <li> (list item) 태그로 정의됩니다. 이 <li> 태그들은 부모 <ul> 태그 안에 배치되어야 합니다.
식료품 목록에 세 가지 항목을 추가해 보겠습니다. "Milk", "Bread", "Cheese"를 목록 항목으로 포함하도록 index.html 파일을 수정하세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Lists</title>
</head>
<body>
<h1>My Grocery List</h1>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Cheese</li>
</ul>
</body>
</html>
파일을 저장하고 Web 8080 탭으로 전환하여 변경 사항을 확인하세요. 이제 세 가지 식료품 항목이 있는 글머리 기호 목록이 표시될 것입니다.
순서 있는 목록을 위한 ol 태그 생성
이 단계에서는 순서 있는 목록을 생성합니다. 순서 있는 목록은 <ol> 태그로 정의되며, 레시피나 할 일 목록처럼 항목의 순서가 중요할 때 사용됩니다. 브라우저는 자동으로 항목에 번호를 매깁니다.
할 일 목록을 위한 새로운 섹션을 추가해 보겠습니다. index.html 파일에서 기존 순서 없는 목록 아래에 새로운 제목 <h2>To-Do List</h2>와 빈 순서 있는 목록 <ol></ol>을 추가하세요.
이제 index.html 파일에는 두 가지 목록 구조가 모두 포함되어야 합니다:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Lists</title>
</head>
<body>
<h1>My Grocery List</h1>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Cheese</li>
</ul>
<h2>To-Do List</h2>
<ol></ol>
</body>
</html>
파일을 저장하고 Web 8080 탭에서 미리 보기를 확인하세요. 새로운 제목이 보이지만, 순서 있는 목록은 현재 비어 있습니다.
순서 있는 목록 (ol) 안에 li 태그 추가
이 단계에서는 새로 생성한 순서 있는 목록에 항목을 추가합니다. 순서 없는 목록과 마찬가지로 각 항목을 정의하기 위해 <li> 태그를 사용합니다. 브라우저가 자동으로 번호를 매깁니다.
할 일 목록에 세 가지 작업을 추가해 보겠습니다. index.html 파일을 편집하고 <ol> 태그 안에 다음 <li> 요소를 배치하세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Lists</title>
</head>
<body>
<h1>My Grocery List</h1>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Cheese</li>
</ul>
<h2>To-Do List</h2>
<ol>
<li>Pay bills</li>
<li>Walk the dog</li>
<li>Go to the gym</li>
</ol>
</body>
</html>
파일을 저장하고 Web 8080 탭을 새로고침하세요. 이제 세 가지 작업을 보여주는 번호가 매겨진 목록이 표시될 것입니다.
하위 목록을 위한 ol 안에 ul 중첩
이 단계에서는 중첩 목록 (하위 목록이라고도 함) 을 만드는 방법을 배웁니다. 이는 목록 항목을 더 작고 관련된 요점으로 나누는 데 유용합니다. <li> 요소 안에 목록 (<ul> 또는 <ol>) 을 중첩할 수 있습니다.
"Go to the gym" 작업에 더 자세한 내용을 추가해 보겠습니다. 운동 활동을 지정하기 위해 중첩된 순서 없는 목록을 추가할 것입니다. 이를 위해 <li>Go to the gym</li> 요소 안에 새로운 <ul> 블록을 배치하세요.
index.html 파일을 다음 코드로 업데이트하세요:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Lists</title>
</head>
<body>
<h1>My Grocery List</h1>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Cheese</li>
</ul>
<h2>To-Do List</h2>
<ol>
<li>Pay bills</li>
<li>Walk the dog</li>
<li>
Go to the gym
<ul>
<li>Treadmill</li>
<li>Weights</li>
</ul>
</li>
</ol>
</body>
</html>
파일을 저장하고 Web 8080 탭에서 확인하세요. "Go to the gym" 항목 아래에 들여쓰기된 글머리 기호가 있는 하위 목록이 표시됩니다. 이는 더 복잡하고 체계적인 콘텐츠 구조를 만드는 방법을 보여줍니다.
요약
실습을 완료하신 것을 축하드립니다!
이번 실습에서는 HTML 에서 목록을 만드는 필수적인 내용을 배웠습니다. 성공적으로 다음을 수행했습니다:
- 특정 순서가 없는 항목을 위한 순서 없는 목록 (
<ul>) 생성 - 순서가 중요한 항목을 위한 순서 있는 목록 (
<ol>) 생성 - 목록 항목 태그 (
<li>) 를 사용하여 두 가지 유형의 목록에 항목 추가 - 중첩 목록을 생성하여 계층 구조 구축
목록은 콘텐츠를 구성하고 웹 페이지의 가독성을 향상시키는 중요한 도구입니다. 이제 향후 웹 프로젝트에서 효과적으로 사용할 수 있습니다.
