이 랩에서는 참가자들이 CSS 에서 margin 스타일을 적용하는 기본 사항을 실습을 통해 탐구합니다. 이 랩은 학습자들이 HTML 문서를 생성하고, margin 속성 구문을 이해하며, 다양한 margin 기법을 실험하도록 안내합니다. 단계별로 작업함으로써, 학생들은 인라인 스타일과 CSS margin 속성을 사용하여 HTML 요소 주변의 간격을 조작하는 방법을 배우게 됩니다.
이 랩은 기본적인 HTML5 문서 구조를 설정하는 것으로 시작하며, margin 스타일 데모를 위한 캔버스 역할을 할 세 개의 <div> 요소를 소개합니다. 참가자들은 점진적으로 인라인 스타일을 추가하고, 다양한 margin 값 구문을 탐구하며, 개별 margin 속성을 적용하여 요소 간격 및 레이아웃 디자인을 제어하는 실질적인 경험을 얻게 됩니다.
이 단계에서는 CSS margin 스타일을 탐구하기 위한 기반이 될 기본적인 HTML 문서를 생성하는 방법을 배웁니다. HTML 은 웹 페이지의 구조를 제공하며, 잘 구성된 문서를 만드는 것은 웹 개발의 첫 번째 단계입니다.
WebIDE 를 열고 ~/project 디렉토리로 이동합니다. 파일 탐색기에서 마우스 오른쪽 버튼을 클릭하고 "New File"을 선택하여 index.html이라는 새 파일을 생성합니다.
다음은 이 랩에서 사용할 기본적인 HTML5 문서 구조입니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Margin Styles Lab</title>
</head>
<body>
<div>First Paragraph</div>
<div>Second Paragraph</div>
<div>Third Paragraph</div>
</body>
</html>이 HTML 구조의 주요 구성 요소를 살펴보겠습니다.
<!DOCTYPE html>은 이것이 HTML5 문서임을 선언합니다.<html>은 HTML 페이지의 루트 요소입니다.<head>는 문서에 대한 메타 정보를 포함합니다.<meta charset="UTF-8">는 문자 인코딩을 지정합니다.<meta name="viewport">는 다양한 장치에서 적절한 렌더링을 보장합니다.<body>는 페이지의 보이는 내용을 포함합니다.다음 단계에서 margin 스타일을 시연하는 데 사용할 세 개의 <div> 요소를 추가했습니다.
Ctrl+S를 누르거나 WebIDE 의 저장 아이콘을 사용하여 파일을 저장합니다.
이 단계에서는 style 속성을 사용하여 HTML 요소에 인라인 스타일을 추가하는 방법을 배웁니다. 인라인 스타일을 사용하면 CSS 를 개별 HTML 요소에 직접 적용할 수 있으며, 이는 웹 페이지에 스타일을 빠르게 추가하는 방법입니다.
WebIDE 를 사용하여 이전 단계에서 생성한 index.html 파일을 엽니다. margin 속성을 시연하는 인라인 스타일을 포함하도록 <div> 요소를 수정합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Margin Styles Lab</title>
</head>
<body>
<div style="margin: 20px; background-color: lightblue;">
First Paragraph
</div>
<div style="margin: 30px; background-color: lightgreen;">
Second Paragraph
</div>
<div style="margin: 40px; background-color: lightsalmon;">
Third Paragraph
</div>
</body>
</html>인라인 스타일에 대한 주요 사항:
style 속성은 HTML 요소에 직접 추가됩니다.margin 속성과 background-color를 추가했습니다.이제 각 <div>가 서로 다른 margin 크기와 배경색을 갖는 것을 확인하세요. margin 속성은 요소 주변에 공간을 생성하여 다른 요소를 밀어냅니다.
Ctrl+S를 누르거나 WebIDE 의 저장 아이콘을 사용하여 파일을 저장합니다.
이 단계에서는 CSS margin 속성 구문에 대해 더 자세히 알아보고 margin 을 지정하는 다양한 방법에 대해 배웁니다. WebIDE 에서 index.html 파일을 열고 다양한 margin 구문 옵션을 시연하도록 업데이트합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Margin Styles Lab</title>
<style>
.single-value {
margin: 20px; /* All sides 20px */
background-color: lightblue;
}
.two-values {
margin: 10px 30px; /* Top/Bottom 10px, Left/Right 30px */
background-color: lightgreen;
}
.four-values {
margin: 5px 10px 15px 20px; /* Top, Right, Bottom, Left */
background-color: lightsalmon;
}
</style>
</head>
<body>
<div class="single-value">Single Value Margin</div>
<div class="two-values">Two Value Margin</div>
<div class="four-values">Four Value Margin</div>
</body>
</html>Margin 구문 설명:
단일 값: margin: 20px;
두 값: margin: 10px 30px;
네 값: margin: 5px 10px 15px 20px;
참고: 인라인 스타일보다 유연한 다양한 margin 구문을 시연하기 위해 내부 <style> 태그를 사용하는 것으로 전환했습니다.
Ctrl+S를 누르거나 WebIDE 의 저장 아이콘을 사용하여 파일을 저장합니다.
이 단계에서는 웹 디자인에서 다양한 margin 값이 어떻게 다양한 간격 효과를 만들 수 있는지 살펴봅니다. WebIDE 에서 index.html 파일을 열고 픽셀, 백분율 및 기타 단위를 사용하여 margin 값을 시연하도록 스타일을 업데이트합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Margin Styles Lab</title>
<style>
.pixel-margin {
margin: 20px; /* Fixed pixel margin */
background-color: lightblue;
border: 1px solid blue;
}
.percentage-margin {
margin: 5%; /* Percentage-based margin */
background-color: lightgreen;
border: 1px solid green;
}
.mixed-margin {
margin: 10px 5%; /* Mixing pixel and percentage */
background-color: lightsalmon;
border: 1px solid red;
}
.container {
width: 80%;
margin: 0 auto; /* Center the container */
background-color: #f0f0f0;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="pixel-margin">Pixel Margin (20px)</div>
<div class="percentage-margin">Percentage Margin (5%)</div>
<div class="mixed-margin">
Mixed Margin (10px top/bottom, 5% left/right)
</div>
</div>
</body>
</html>Margin 값 유형 설명:
픽셀 Margin (20px):
백분율 Margin (5%):
혼합 Margin (10px 5%):
Margin 을 사용한 가운데 정렬 (margin: 0 auto):
0autoCtrl+S를 누르거나 WebIDE 의 저장 아이콘을 사용하여 파일을 저장합니다.
이 단계에서는 요소의 각 측면에 대한 간격을 정밀하게 제어할 수 있는 개별 margin 속성을 살펴봅니다. WebIDE 에서 index.html 파일을 열고 개별 margin 속성을 시연하도록 스타일을 업데이트합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Individual Margin Properties</title>
<style>
.box {
width: 200px;
background-color: lightblue;
border: 2px solid blue;
margin-top: 20px; /* Top margin */
margin-right: 30px; /* Right margin */
margin-bottom: 40px; /* Bottom margin */
margin-left: 50px; /* Left margin */
padding: 10px;
}
.individual-margins {
display: flex;
justify-content: space-between;
}
.margin-example {
width: 100px;
height: 100px;
background-color: lightgreen;
margin-top: 10px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="individual-margins">
<div class="box">Margin on All Sides</div>
<div class="margin-example">Vertical Margins</div>
</div>
</body>
</html>개별 Margin 속성 설명:
margin-top: 위쪽 margin 을 제어합니다.
margin-right: 오른쪽 margin 을 제어합니다.
margin-bottom: 아래쪽 margin 을 제어합니다.
margin-left: 왼쪽 margin 을 제어합니다.
주요 관찰 사항:
전문가 팁: 개별 margin 속성은 축약형 margin 속성에 비해 더 세분화된 제어를 제공하여 특정 측면을 독립적으로 조정할 수 있습니다.
Ctrl+S를 누르거나 WebIDE 의 저장 아이콘을 사용하여 파일을 저장합니다.
이 Lab 에서 참가자는 HTML 문서를 생성하고 다양한 스타일링 기법을 탐구하여 CSS margin 스타일 적용의 기본 사항을 배웁니다. Lab 은 <!DOCTYPE html>, <head>, <body>와 같은 필수 요소를 소개하고 margin 속성을 시연하기 위해 세 개의 <div> 요소를 생성하여 기본적인 HTML5 구조를 구성하는 것으로 시작합니다.
학습 과정은 style 속성을 사용하여 HTML 요소에 직접 인라인 스타일을 추가하는 것으로 이어지며, 이를 통해 margin 이 요소 주변의 간격을 제어하는 데 어떻게 적용될 수 있는지 이해하는 실질적인 접근 방식을 제공합니다. 참가자는 다양한 margin 구문을 실험하고, 개별 margin 속성을 탐구하며, 다양한 margin 값을 적용하여 CSS 스타일링 기법에 대한 실질적인 경험을 얻게 됩니다.
