이 랩에서는 CSS 를 사용하여 목록 스타일링 기술을 탐구하며, 순서가 있는 목록, 순서가 없는 목록, 설명 목록의 기본 모양을 변환하는 데 중점을 둡니다. 참가자들은 list-style-type, list-style-image, list-style-position과 같은 다양한 CSS 속성을 통해 목록 마커를 사용자 정의하는 방법을 배우고, 이를 통해 시각적으로 매력적이고 독특한 목록 디자인을 만들 수 있습니다.
이 랩은 학습자가 다양한 목록 유형을 사용하여 HTML 프로젝트를 만들고 CSS 기술을 적용하여 목록 스타일을 수정하는 단계별 프로세스를 안내합니다. 랩이 끝나면 학생들은 목록 마커 유형 변경, 기본 마커를 사용자 정의 이미지로 대체, 마커 배치 조정, 그리고 단축 속성 list-style을 사용하여 목록을 효율적으로 스타일링하는 실질적인 경험을 얻게 됩니다.
이 단계에서는 CSS 목록 스타일링 탐색을 준비하기 위해 기본 HTML 프로젝트를 설정하고 첫 번째 목록을 생성합니다. 먼저 간단한 프로젝트 구조와 다양한 유형의 목록이 포함된 HTML 파일을 생성하는 것으로 시작합니다.
먼저, 프로젝트 디렉토리로 이동합니다:
cd ~/projectCSS 목록 스타일링 프로젝트를 위한 새 디렉토리를 생성합니다:
mkdir css-list-styling
cd css-list-styling이제 WebIDE 를 사용하여 index.html이라는 HTML 파일을 생성합니다:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS List Styling</title>
</head>
<body>
<h1>My Favorite Programming Languages</h1>
<h2>Ordered List (Numbered)</h2>
<ol>
<li>Python</li>
<li>JavaScript</li>
<li>Java</li>
<li>C++</li>
</ol>
<h2>Unordered List (Bulleted)</h2>
<ul>
<li>Web Development</li>
<li>Data Science</li>
<li>Machine Learning</li>
<li>Mobile Apps</li>
</ul>
<h2>Description List</h2>
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language for web structure</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets for web design</dd>
</dl>
</body>
</html>이 HTML 파일은 세 가지 유형의 목록을 보여줍니다:
<ol>): 자동으로 번호가 매겨짐<ul>): 기본 글머리 기호 사용<dl>): 용어와 설명 쌍에 사용됨브라우저에서 볼 때의 예시 출력:
이 단계에서는 list-style-type CSS 속성을 사용하여 목록 마커의 모양을 사용자 정의하는 방법을 배웁니다. list-style-type을 사용하면 기본 글머리 기호 또는 숫자를 다양한 미리 정의된 스타일로 변경할 수 있습니다.
WebIDE 에서 index.html 파일을 열고 <head>에 CSS 규칙을 정의하기 위해 <style> 섹션을 추가합니다:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS List Styling</title>
<style>
/* Unordered List Styles */
.square-list {
list-style-type: square;
}
.circle-list {
list-style-type: circle;
}
.disc-list {
list-style-type: disc;
}
/* Ordered List Styles */
.decimal-list {
list-style-type: decimal;
}
.lower-alpha-list {
list-style-type: lower-alpha;
}
.upper-roman-list {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<h1>List Style Type Examples</h1>
<h2>Unordered List Styles</h2>
<ul class="square-list">
<li>Square Markers</li>
<li>Web Development</li>
<li>Design Techniques</li>
</ul>
<ul class="circle-list">
<li>Circle Markers</li>
<li>Programming</li>
<li>Software Engineering</li>
</ul>
<h2>Ordered List Styles</h2>
<ol class="decimal-list">
<li>Decimal Numbers</li>
<li>Standard Numbering</li>
<li>Default Style</li>
</ol>
<ol class="lower-alpha-list">
<li>Lowercase Letters</li>
<li>Alphabetical Ordering</li>
<li>a, b, c Style</li>
</ol>
<ol class="upper-roman-list">
<li>Uppercase Roman Numerals</li>
<li>Classic Numbering</li>
<li>I, II, III Style</li>
</ol>
</body>
</html>주요 list-style-type 값:
disc (기본값), circle, squaredecimal, lower-alpha, upper-roman 등브라우저에서의 예시 출력:
이 단계에서는 list-style-image를 사용하여 기본 목록 마커를 사용자 정의 이미지로 바꾸는 방법을 배웁니다. 먼저, 목록 마커로 사용할 샘플 아이콘을 다운로드해야 합니다.
프로젝트에 images 디렉토리를 생성합니다:
cd ~/project/css-list-styling
mkdir imagescurl을 사용하여 샘플 아이콘을 다운로드합니다:
curl -o images/check-icon.png https://labex.io/courses/icons/check-icon.png
curl -o images/star-icon.png https://labex.io/courses/icons/star-icon.png이제 index.html 파일을 업데이트하여 사용자 정의 목록 마커 이미지를 포함합니다:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS List Styling with Images</title>
<style>
.check-list {
list-style-image: url("images/check-icon.png");
}
.star-list {
list-style-image: url("images/star-icon.png");
}
/* Adjust icon size if needed */
.check-list li,
.star-list li {
padding-left: 10px;
}
</style>
</head>
<body>
<h1>Custom List Markers with Images</h1>
<h2>Checklist</h2>
<ul class="check-list">
<li>Complete CSS Tutorial</li>
<li>Practice List Styling</li>
<li>Create Web Project</li>
</ul>
<h2>Favorite Topics</h2>
<ul class="star-list">
<li>Web Development</li>
<li>Design Principles</li>
<li>User Experience</li>
</ul>
</body>
</html>list-style-image에 대한 주요 사항:
url()을 사용하여 이미지 경로를 지정합니다.브라우저에서의 예시 출력:
이 단계에서는 목록 마커가 목록 콘텐츠를 기준으로 어떻게 배치되는지를 제어하는 list-style-position CSS 속성을 살펴봅니다. 이 속성은 두 가지 주요 값, outside (기본값) 및 inside를 갖습니다.
index.html 파일을 업데이트하여 다양한 목록 마커 위치를 시연합니다:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>List Style Position</title>
<style>
.outside-list {
list-style-position: outside;
background-color: #f0f0f0;
padding: 10px;
width: 300px;
}
.inside-list {
list-style-position: inside;
background-color: #e0e0e0;
padding: 10px;
width: 300px;
}
/* Add some visual separation */
li {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>List Style Position Demonstration</h1>
<h2>Outside List Markers (Default)</h2>
<ul class="outside-list">
<li>Markers positioned outside the content area</li>
<li>Default CSS behavior</li>
<li>Markers align to the left of the text</li>
</ul>
<h2>Inside List Markers</h2>
<ul class="inside-list">
<li>Markers positioned inside the content area</li>
<li>Markers are part of the list item text</li>
<li>Content starts immediately after the marker</li>
</ul>
</body>
</html>list-style-position에 대한 주요 사항:
outside: 마커가 콘텐츠 상자 외부에 배치됩니다 (기본값)inside: 마커가 콘텐츠 상자 내부에 배치됩니다브라우저에서의 예시 출력:
이 단계에서는 단일 선언에서 여러 목록 스타일 속성을 결합하기 위해 단축 속성 list-style을 사용하는 방법을 배웁니다. 이 속성을 사용하면 list-style-type, list-style-image, 및 list-style-position을 한 줄로 설정할 수 있습니다.
index.html 파일을 업데이트하여 단축 속성 list-style을 시연합니다:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Shorthand List Styles</title>
<style>
/* Shorthand with type and position */
.todo-list {
list-style: square inside;
}
/* Shorthand with image and position */
.project-list {
list-style: inside url("images/star-icon.png");
}
/* Full shorthand with type, image, and position */
.complete-list {
list-style: lower-roman inside url("images/check-icon.png");
}
/* Reset to default */
.default-list {
list-style: initial;
}
/* Remove list styling */
.no-style-list {
list-style: none;
}
/* Add some spacing for readability */
li {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>Shorthand List Style Demonstration</h1>
<h2>Todo List (Square Markers)</h2>
<ul class="todo-list">
<li>Learn CSS List Styling</li>
<li>Practice Shorthand Properties</li>
<li>Create Stylish Lists</li>
</ul>
<h2>Project List (Star Icons)</h2>
<ul class="project-list">
<li>Web Development Project</li>
<li>Design System</li>
<li>Interactive Tutorials</li>
</ul>
<h2>Completed Projects (Check Icons)</h2>
<ol class="complete-list">
<li>CSS Fundamentals</li>
<li>Responsive Design</li>
<li>Advanced Styling Techniques</li>
</ol>
<h2>No Style List</h2>
<ul class="no-style-list">
<li>Removed List Markers</li>
<li>Clean Unstyled List</li>
<li>No Visual Indicators</li>
</ul>
</body>
</html>list-style 단축 속성에 대한 주요 사항:
list-style-type, list-style-image, 및 list-style-position을 결합합니다.none은 모든 목록 스타일을 제거합니다.initial은 기본 브라우저 스타일로 재설정합니다.단축 속성 조합 예시:
list-style: square inside;list-style: inside url('image.png');list-style: lower-roman inside url('icon.png');이 랩에서는 참가자들이 정렬된 목록, 정렬되지 않은 목록, 설명 목록을 포함한 다양한 목록 유형을 사용하여 HTML 프로젝트를 생성함으로써 CSS 목록 스타일링 기술을 탐구합니다. 이 랩은 학습자가 list-style-type, list-style-image, 및 list-style-position과 같은 CSS 속성을 사용하여 목록 모양을 사용자 정의하는 과정을 안내합니다.
실습을 통해 기본 목록 마커를 수정하고, 표준 글머리 기호를 사용자 지정 이미지로 바꾸고, 마커 배치를 조정하는 방법을 보여주며, CSS 속성을 사용하여 웹 페이지 디자인을 향상시키고 목록의 시각적 표현을 개선하기 위한 실용적인 기술을 제공합니다.
