소개
이 랩에서는 참가자들이 HTML 리스트의 생성과 스타일링을 탐구하며, 다양한 리스트 유형과 속성에 중점을 둡니다. 이 랩은 학습자들이 숫자 및 알파벳 번호 매기기를 사용하는 정렬된 리스트, 사용자 지정 마커 스타일을 사용하는 정렬되지 않은 리스트, 그리고 여러 항목이 있는 설명 리스트를 포함한 다양한 리스트 구조를 구성하도록 안내합니다.
참가자들은 표준 HTML5 문서 구조를 설정하는 것으로 시작하여 <ol>, <ul>, <li>, 그리고 <dl>과 같은 태그를 사용하여 의미론적이고 시각적으로 매력적인 리스트 레이아웃을 만드는 방법을 배우면서 복잡한 리스트 예제를 점진적으로 구축할 것입니다. 리스트 속성 및 중첩된 리스트 구조를 실험함으로써, 학생들은 HTML 리스트 디자인에 대한 실용적인 기술을 습득하고 웹 페이지 콘텐츠 구성을 향상시키는 방법을 이해하게 될 것입니다.
HTML 문서 구조 설정
이 단계에서는 리스트 데모를 위한 기본적인 HTML 문서 구조를 만드는 방법을 배웁니다. HTML 문서는 웹 콘텐츠의 기반을 제공하는 표준 구조를 가지고 있습니다.
WebIDE 를 열고 ~/project 디렉토리로 이동합니다. 파일 탐색기에서 마우스 오른쪽 버튼을 클릭하고 "New File"을 선택하여 lists.html이라는 새 파일을 만듭니다.
이제 기본적인 HTML5 문서 구조를 만들어 보겠습니다. 다음 코드를 lists.html 파일에 입력합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Lists Example</title>
</head>
<body>
<!-- We'll add our lists here in the next steps -->
</body>
</html>
이 HTML 구조의 주요 구성 요소를 살펴보겠습니다.
<!DOCTYPE html>은 이것이 HTML5 문서임을 선언합니다.<html lang="en">은 언어 사양이 있는 루트 요소입니다.<head>는 문서에 대한 메타데이터를 포함합니다.<meta charset="UTF-8">는 올바른 문자 인코딩을 보장합니다.<meta name="viewport">는 반응형 디자인에 도움이 됩니다.<title>은 브라우저 탭에 표시되는 페이지 제목을 설정합니다.<body>는 주요 콘텐츠가 배치될 위치입니다.
웹 브라우저에서 예시 출력은 브라우저 탭에 "HTML Lists Example"이라는 제목이 있는 빈 페이지를 표시합니다.
참고: WebIDE 에서 HTML 파일을 미리 보는 방법에 대해 자세히 알아보세요.
숫자 및 알파벳 유형의 정렬된 리스트 생성
이 단계에서는 <ol> (정렬된 리스트) 및 <li> (리스트 항목) 태그를 사용하여 HTML 에서 정렬된 리스트를 만드는 방법을 배웁니다. 정렬된 리스트는 항목에 자동으로 번호를 매기며, 다양한 번호 매기기 스타일로 사용자 정의할 수 있습니다.
이전 단계에서 생성한 lists.html 파일을 엽니다. <body> 태그 안에 다음 코드를 추가하여 다양한 유형의 정렬된 리스트를 만듭니다.
<h2>Numeric Ordered List (Default)</h2>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<h2>Alphabetic Ordered List</h2>
<ol type="a">
<li>First alphabetic item</li>
<li>Second alphabetic item</li>
<li>Third alphabetic item</li>
</ol>
<h2>Uppercase Alphabetic Ordered List</h2>
<ol type="A">
<li>First uppercase item</li>
<li>Second uppercase item</li>
<li>Third uppercase item</li>
</ol>
<h2>Roman Numeral Ordered List</h2>
<ol type="i">
<li>First roman numeral item</li>
<li>Second roman numeral item</li>
<li>Third roman numeral item</li>
</ol>
다양한 리스트 유형을 살펴보겠습니다.
- 기본 정렬된 리스트는 숫자 번호 매기기 (1, 2, 3) 를 사용합니다.
type="a"는 소문자 알파벳 번호 매기기 (a, b, c) 를 만듭니다.type="A"는 대문자 알파벳 번호 매기기 (A, B, C) 를 만듭니다.type="i"는 소문자 로마 숫자 번호 매기기 (i, ii, iii) 를 만듭니다.
웹 브라우저에서 예시 출력은 각 번호 매기기 스타일을 가진 네 개의 서로 다른 정렬된 리스트를 표시합니다.
다양한 마커 스타일을 사용한 순서 없는 리스트 구현
이 단계에서는 <ul> (정렬되지 않은 리스트) 및 <li> (리스트 항목) 태그를 사용하여 HTML 에서 정렬되지 않은 리스트를 만드는 방법을 배웁니다. 정렬되지 않은 리스트는 숫자 또는 알파벳 순서 없이 리스트 항목을 표시하기 위해 다양한 마커 스타일을 사용합니다.
lists.html 파일을 열고 이전 정렬된 리스트 뒤에 다음 코드를 추가합니다.
<h2>Default Unordered List (Bullet Points)</h2>
<ul>
<li>First bullet point</li>
<li>Second bullet point</li>
<li>Third bullet point</li>
</ul>
<h2>Disc Marker Style</h2>
<ul type="disc">
<li>Disc marker item</li>
<li>Another disc marker item</li>
<li>Third disc marker item</li>
</ul>
<h2>Circle Marker Style</h2>
<ul type="circle">
<li>Circle marker item</li>
<li>Another circle marker item</li>
<li>Third circle marker item</li>
</ul>
<h2>Square Marker Style</h2>
<ul type="square">
<li>Square marker item</li>
<li>Another square marker item</li>
<li>Third square marker item</li>
</ul>
다양한 정렬되지 않은 리스트 마커 스타일을 살펴보겠습니다.
- 기본 정렬되지 않은 리스트는 채워진 글머리 기호를 사용합니다.
type="disc"는 채워진 원형 마커 (기본값) 를 만듭니다.type="circle"는 비어있는 원형 마커를 만듭니다.type="square"는 채워진 사각형 마커를 만듭니다.
웹 브라우저에서 예시 출력은 각 마커 스타일을 가진 네 개의 서로 다른 정렬되지 않은 리스트를 표시합니다.
다중 항목을 갖는 사용자 정의 설명 리스트 디자인
이 단계에서는 <dl> (설명 리스트), <dt> (설명 용어), 및 <dd> (설명 세부 정보) 태그를 사용하여 HTML 에서 설명 리스트를 만드는 방법을 배웁니다. 설명 리스트는 키 - 값 쌍 또는 용어와 해당 설명을 표시하는 데 적합합니다.
lists.html 파일을 열고 이전 리스트 예제 뒤에 다음 코드를 추가합니다.
<h2>Programming Languages Description List</h2>
<dl>
<dt>HTML</dt>
<dd>A markup language for creating web pages</dd>
<dt>CSS</dt>
<dd>A styling language used to design web page appearance</dd>
<dt>JavaScript</dt>
<dd>A programming language that adds interactivity to web pages</dd>
</dl>
<h2>Contact Information Description List</h2>
<dl>
<dt>Name</dt>
<dd>John Doe</dd>
<dt>Email</dt>
<dd>john.doe@example.com</dd>
<dt>Phone</dt>
<dd>+1 (555) 123-4567</dd>
</dl>
설명 리스트에 대한 주요 사항:
<dl>은 전체 설명 리스트를 정의합니다.<dt>는 용어 또는 이름을 나타냅니다.<dd>는 설명 또는 세부 정보를 제공합니다.- 단일
<dt>에 대해 여러 개의<dd>태그를 사용할 수 있습니다. - 용어집, 메타데이터 및 키 - 값 표현에 유용합니다.
웹 브라우저에서 예시 출력은 용어와 해당 설명을 포함하는 두 개의 설명 리스트를 표시합니다.
리스트 속성 및 중첩 리스트 구조 실험
이 단계에서는 중첩 리스트를 만들고 추가적인 리스트 속성을 사용하여 고급 리스트 기술을 탐구합니다. 중첩 리스트를 사용하면 계층적 콘텐츠를 만들 수 있으며, 속성을 사용하면 리스트의 모양과 동작을 사용자 정의할 수 있습니다.
lists.html 파일을 열고 이전 리스트 예제 뒤에 다음 코드를 추가합니다.
<h2>Nested Unordered List</h2>
<ul>
<li>
Main Category 1
<ul>
<li>Subcategory 1.1</li>
<li>Subcategory 1.2</li>
</ul>
</li>
<li>
Main Category 2
<ul>
<li>Subcategory 2.1</li>
<li>Subcategory 2.2</li>
</ul>
</li>
</ul>
<h2>Nested Ordered List with Start Attribute</h2>
<ol start="5">
<li>
First main item
<ol type="a">
<li>First nested item</li>
<li>Second nested item</li>
</ol>
</li>
<li>
Second main item
<ol type="a">
<li>Third nested item</li>
<li>Fourth nested item</li>
</ol>
</li>
</ol>
<h2>Mixed Nested List</h2>
<ul>
<li>
Web Development
<ol>
<li>HTML</li>
<li>
CSS
<ul>
<li>Flexbox</li>
<li>Grid</li>
</ul>
</li>
<li>JavaScript</li>
</ol>
</li>
</ul>
시연된 주요 개념:
- 중첩 리스트는 리스트 항목 안에 새 리스트를 배치하여 만들 수 있습니다.
- 리스트는 혼합될 수 있습니다 (정렬되지 않은 리스트를 정렬된 리스트 안에, 또는 그 반대로).
start속성을 사용하면 정렬된 리스트의 시작 번호를 변경할 수 있습니다.type속성을 사용하여 중첩 리스트의 번호 매기기 또는 마커 스타일을 변경할 수 있습니다.
웹 브라우저에서 예시 출력은 다양한 스타일과 계층 구조를 가진 세 가지 다른 중첩 리스트 구조를 표시합니다.
요약
이 랩에서는 참가자들이 다양한 기술을 사용하여 HTML 리스트를 만들고 스타일을 지정하는 방법을 배웠습니다. 랩은 DOCTYPE, html, head, body 태그와 같은 필수 요소를 시연하고, 적절한 메타데이터 및 문자 인코딩에 중점을 두어 표준 HTML5 문서 구조를 설정하는 것으로 시작했습니다.
실습에서는 숫자 및 알파벳 리스트 스타일을 포함하여 다양한 유형의 정렬된 리스트와 정렬되지 않은 리스트를 만드는 방법을 다루었습니다. 참가자들은 리스트 속성 및 중첩 리스트 구조를 탐구하여 의미론적 마크업을 사용하여 구조화된 HTML 콘텐츠를 디자인하는 실질적인 경험을 얻었습니다. 이 랩은 HTML 리스트 요소에 대한 포괄적인 소개를 제공하여 학습자가 웹 문서에서 정보를 효과적으로 구성하고 제시할 수 있도록 했습니다.
