소개
이 랩에서는 참가자들이 HTML 에서 <div> 요소를 생성하고 스타일링하는 기본적인 개념을 탐구하며, 웹 페이지 디자인에서 해당 요소의 목적, 구조 및 다용도성에 중점을 둡니다. 이 랩은 div 요소 사용에 대한 포괄적인 여정을 안내하며, 기본적인 생성부터 시작하여 고급 스타일링 기술까지 다룹니다.
참가자들은 div 요소가 웹 콘텐츠를 구성하고 그룹화하는 데 필수적인 컨테이너 역할을 한다는 것을 배우고, 블록 레벨 특성을 이해하며, 크기, 위치 및 시각적 외관을 사용자 정의하는 기술을 연습하게 됩니다. 실용적인 예제와 실습을 통해 학생들은 div 요소를 사용하여 디자인과 기능성을 모두 향상시키는 논리적이고 잘 구조화된 웹 페이지 레이아웃을 만드는 실질적인 기술을 습득하게 됩니다.
Div 요소의 목적 이해
이 단계에서는 HTML 에서 <div> 요소의 기본적인 목적과 웹 페이지 콘텐츠를 구조화하고 구성하는 방법에 대해 배우게 됩니다.
<div> (division, 분할) 요소는 다른 HTML 요소를 그룹화하고 구성하는 데 사용되는 컨테이너입니다. 이는 개발자가 논리적인 섹션을 만들고 콘텐츠 그룹에 스타일을 적용하는 데 도움이 되는 다용도 블록 레벨 요소입니다. <div>를 다른 요소를 담을 수 있고 웹 페이지 레이아웃을 구조화하는 데 도움이 되는 상자라고 생각하십시오.
<div> 요소의 기본 사용법을 보여주는 간단한 HTML 파일을 만들어 보겠습니다. WebIDE 를 열고 ~/project 디렉토리에 div-example.html이라는 새 파일을 만듭니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Div Element Example</title>
</head>
<body>
<div>
<h1>Welcome to My Website</h1>
<p>This is a paragraph inside a div element.</p>
</div>
<div>
<h2>About Section</h2>
<p>Here's some information about our project.</p>
</div>
</body>
</html>
이 예제에서는 두 개의 <div> 요소를 사용하여 페이지에 별도의 섹션을 만들었습니다. 각 <div>에는 제목과 단락이 포함되어 있어 div 가 관련 콘텐츠를 함께 그룹화할 수 있는 방법을 보여줍니다.
<div> 요소의 주요 특징:
- 블록 레벨 요소이므로 일반적으로 새 줄에서 시작합니다.
- 다른 HTML 요소를 포함할 수 있습니다.
- 레이아웃 및 스타일링 목적으로 자주 사용됩니다.
- CSS 가 없으면 고유한 시각적 표현이 없습니다.
웹 브라우저에서 볼 때의 예시 출력:
텍스트 콘텐츠를 포함하는 기본 Div 생성
이 단계에서는 div 요소를 생성하고 텍스트 콘텐츠를 추가하는 방법을 배우게 됩니다. 이전 단계를 기반으로 div 요소 내부에 의미 있는 텍스트를 추가하는 방법을 살펴보겠습니다.
WebIDE 를 열고 ~/project 디렉토리의 div-example.html 파일을 수정하여 더 자세한 텍스트 콘텐츠를 포함합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Div Text Content Example</title>
</head>
<body>
<div>
<h1>Welcome to Our Learning Platform</h1>
<p>This div contains an introduction to our website.</p>
<p>We provide interactive learning experiences for web development.</p>
</div>
<div>
<h2>Course Highlights</h2>
<p>Our courses cover various web technologies:</p>
<ul>
<li>HTML Fundamentals</li>
<li>CSS Styling</li>
<li>JavaScript Interactivity</li>
</ul>
</div>
</body>
</html>
이 예제에서는 div 요소에 텍스트 콘텐츠를 추가하는 여러 가지 방법을 보여주었습니다.
- 제목 태그 (
<h1>,<h2>) 사용 <p>태그로 단락 추가<ul>및<li>태그로 정렬되지 않은 목록 포함
각 div 는 여러 유형의 텍스트와 HTML 요소를 포함할 수 있습니다. 이러한 유연성을 통해 웹 페이지에서 구조화되고 구성된 콘텐츠를 만들 수 있습니다.
웹 브라우저에서 볼 때의 예시 출력은 다음과 같습니다.
Div 요소에 배경색 추가하기 (CSS 활용)
이 단계에서는 인라인 CSS 스타일을 사용하여 div 요소에 배경색을 추가하는 방법을 배우게 됩니다. 배경색은 시각적인 분리를 만들고 웹 페이지의 디자인을 향상시키는 데 도움이 됩니다.
~/project 디렉토리에서 div-example.html 파일을 열고 배경색을 포함하도록 수정합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Div Background Color Example</title>
<style>
.intro-section {
background-color: #f0f0f0;
padding: 15px;
}
.courses-section {
background-color: #e6f2ff;
padding: 15px;
}
</style>
</head>
<body>
<div class="intro-section">
<h1>Welcome to Our Learning Platform</h1>
<p>This section has a light gray background.</p>
<p>Background colors help create visual hierarchy.</p>
</div>
<div class="courses-section">
<h2>Course Highlights</h2>
<p>This section has a light blue background.</p>
<ul>
<li>HTML Fundamentals</li>
<li>CSS Styling</li>
<li>JavaScript Interactivity</li>
</ul>
</div>
</body>
</html>
이 예제에서는 배경색을 추가하는 두 가지 방법을 보여주었습니다.
<head>섹션에서 인라인 CSSstyle태그 사용- 특정 배경색으로 CSS 클래스 생성
- div 내부에 공간을 만들기 위해
padding추가
배경색에 대한 주요 사항:
- 16 진수 색상 코드 (예:
#f0f0f0) 사용 - 색상 이름 또는 RGB 값을 사용할 수 있습니다.
background-color속성은 배경을 설정합니다.padding은 div 내부에 공간을 추가합니다.
예시 시각적 출력:
Div 요소의 블록 레벨 특성 탐구
이 단계에서는 div 요소의 블록 레벨 특성과 웹 페이지 레이아웃에서의 동작 방식을 배우게 됩니다. Div 요소는 새로운 줄에서 자동으로 시작하는 별개의 콘텐츠 섹션을 생성하는 고유한 기능을 가지고 있습니다.
~/project 디렉토리에 block-level-example.html이라는 새 파일을 다음 내용으로 생성합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Div Block-Level Characteristics</title>
<style>
.block-example {
border: 2px solid blue;
margin: 10px 0;
padding: 10px;
}
</style>
</head>
<body>
<div class="block-example">
<h2>First Div Block</h2>
<p>
This is the first div element. Notice how it takes up the full width of
its container.
</p>
</div>
<div class="block-example">
<h2>Second Div Block</h2>
<p>
This div starts on a new line, even though the previous div is right
above it.
</p>
</div>
<p>
This is a paragraph outside the divs to show the block-level behavior.
</p>
</body>
</html>
div 요소의 주요 블록 레벨 특성:
- 항상 새로운 줄에서 시작합니다.
- 부모 컨테이너의 전체 너비를 차지합니다.
- 쉽게 스타일을 지정하고 배치할 수 있는 "블록" 콘텐츠를 생성합니다.
블록 레벨 특성을 보여주기 위해 다음을 추가했습니다.
- 각 div 의 경계를 시각화하기 위한 파란색 테두리
- 간격을 표시하기 위한 여백 (margin) 및 안쪽 여백 (padding)
- 수직으로 쌓이는 방식을 보여주기 위한 여러 div
예시 시각적 출력은 다음과 같습니다.
Div 크기 및 위치 사용자 정의 (CSS 활용)
이 단계에서는 CSS 속성을 사용하여 div 요소의 크기와 위치를 사용자 정의하는 방법을 배우게 됩니다. 이를 통해 더 복잡하고 시각적으로 매력적인 웹 레이아웃을 만들 수 있습니다.
~/project 디렉토리에 div-sizing-example.html이라는 새 파일을 다음 내용으로 생성합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Div Sizing and Positioning</title>
<style>
.container {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.box {
width: 300px;
height: 200px;
background-color: #f0f0f0;
margin: 20px;
padding: 15px;
border: 2px solid #333;
}
.inline-boxes {
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<div class="container">
<h1>Div Sizing and Positioning Example</h1>
<div class="box">
<h2>Fixed Size Div</h2>
<p>This div has a fixed width of 300px and height of 200px.</p>
</div>
<div class="inline-boxes">
<div class="box">
<h2>Inline Box 1</h2>
<p>Flexbox allows divs to sit side by side.</p>
</div>
<div class="box">
<h2>Inline Box 2</h2>
<p>Divs can be easily positioned horizontally.</p>
</div>
</div>
</div>
</body>
</html>
div 크기 및 위치를 사용자 정의하기 위한 주요 CSS 속성:
width및height: div 의 크기를 제어합니다.margin: div 주변에 공간을 추가합니다.padding: div 내부에 공간을 추가합니다.display: flex: 유연한 레이아웃을 만듭니다.max-width: div 의 최대 너비를 제한합니다.margin: 0 auto: div 를 가로로 가운데 정렬합니다.
예시 시각적 출력은 다음과 같습니다.
요약
이 Lab 에서 참가자들은 웹 페이지 구조 및 구성에서 <div> 요소의 역할을 이해하는 데 중점을 두고 HTML 에서 <div> 요소의 기본적인 사용법과 스타일 지정을 탐구했습니다. 이 Lab 은 학습자들이 기본적인 div 컨테이너를 만들고, 텍스트 콘텐츠를 추가하고, 배경색을 적용하고, 이러한 다재다능한 HTML 요소의 블록 레벨 특성을 검토하는 과정을 안내했습니다.
참가자들은 div 가 관련 콘텐츠를 그룹화하기 위한 유연한 컨테이너 역할을 하며, 웹 페이지 내에서 논리적인 섹션을 만들고, 레이아웃 및 스타일 지정을 위한 기반을 제공하는 방법을 배웠습니다. 실습 예제를 통해 학습자들은 div 요소를 사용하여 웹 콘텐츠를 구성하고 기본적인 CSS 속성을 적용하는 실질적인 기술을 습득하여 HTML 페이지 구성 및 디자인 기술에 대한 이해를 높였습니다.
