이 랩에서는 CSS 테두리와 패딩을 사용하여 웹 요소를 스타일링하는 방법을 배우고, HTML 요소의 시각적 표현을 향상시키는 데 중점을 둡니다. 이 랩은 HTML 문서를 생성하고 다양한 테두리 및 패딩 기술을 적용하여 웹 콘텐츠의 디자인과 레이아웃을 개선하는 단계별 가이드를 제공합니다.
실습을 통해 단락에 테두리 스타일을 추가하고, 테두리 속성을 사용자 정의하며, 패딩을 적용하고, 이러한 CSS 스타일링 기술의 다양한 조합을 실험하는 방법을 탐구할 것입니다. 랩을 마치면 CSS 를 사용하여 시각적으로 더 매력적이고 구조화된 웹 요소를 만드는 데 대한 실질적인 경험을 얻게 될 것입니다.
이 단계에서는 CSS 테두리와 패딩으로 스타일링하기 위한 기반이 될 HTML 문서를 생성하는 방법을 배웁니다. HTML 은 웹 콘텐츠의 구조를 제공하며, 기본적인 문서를 설정하는 것으로 시작합니다.
WebIDE 를 열고 ~/project 디렉토리로 이동합니다. 파일 탐색기에서 마우스 오른쪽 버튼을 클릭하고 "New File"을 선택하여 styles.html이라는 새 파일을 생성합니다.
다음은 사용할 기본적인 HTML5 문서 구조입니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Border and Padding Example</title>
<style>
/* CSS styles will be added here in later steps */
</style>
</head>
<body>
<p>Welcome to CSS Styling!</p>
</body>
</html>주요 구성 요소를 살펴보겠습니다.
<!DOCTYPE html>은 이것이 HTML5 문서임을 선언합니다.<html lang="en">은 언어 사양이 있는 루트 요소입니다.<head>는 문서에 대한 메타데이터를 포함합니다.<meta charset="UTF-8">는 올바른 문자 인코딩을 보장합니다.<title>은 브라우저 탭에 표시되는 페이지 제목을 설정합니다.<style> 태그는 다음 단계에서 CSS 를 추가할 위치입니다.<body>는 페이지의 보이는 콘텐츠를 포함합니다.이 코드를 WebIDE 의 styles.html 파일에 복사합니다. Ctrl+S를 누르거나 저장 아이콘을 사용하여 파일을 저장합니다.
예시 출력:
이 파일을 웹 브라우저에서 열면 "Welcome to CSS Styling!"이라는 간단한 단락이 표시됩니다. 이것이 다음 단계에서 테두리와 패딩을 추가하기 위한 시작점입니다.
이 단계에서는 CSS 를 사용하여 단락에 테두리 스타일을 추가하는 방법을 배웁니다. 테두리는 웹 페이지에서 요소를 시각적으로 정의하고 구분하는 기본적인 방법입니다.
이전 단계에서 생성한 styles.html 파일을 엽니다. <style> 태그 안에 다음 CSS 를 추가하여 단락에 테두리를 만듭니다.
<style>
p {
border: 2px solid blue;
}
</style>테두리 속성을 자세히 살펴보겠습니다.
border는 세 개의 하위 속성을 결합하는 단축 속성입니다.2px는 테두리 너비를 2 픽셀로 설정합니다.solid는 연속적인, 끊어지지 않은 선 스타일을 정의합니다.blue는 테두리 색상을 지정합니다.예시 출력:
이 HTML 파일을 웹 브라우저에서 열면 단락이 2 픽셀 너비의 실선 파란색 테두리로 둘러싸인 것을 볼 수 있습니다. 이것은 CSS 를 사용하여 HTML 요소에 시각적 정의를 얼마나 쉽게 추가할 수 있는지 보여줍니다.
이해를 돕기 위해 테두리가 수행하는 작업에 대한 시각적 표현은 다음과 같습니다.
+-------------------+
| |
| Welcome to CSS |
| Styling! |
| |
+-------------------+테두리는 단락 주위에 명확한 경계를 만들어 페이지의 다른 콘텐츠와 구별되도록 합니다.
이 단계에서는 CSS 에서 더 발전된 테두리 사용자 정의 기술을 탐구합니다. 개별 테두리 속성을 수정하여 더 복잡하고 흥미로운 디자인을 만들 것입니다.
styles.html 파일의 <style> 섹션을 다음 CSS 로 업데이트합니다.
<style>
p {
border-width: 4px;
border-style: dashed;
border-color: green;
border-radius: 10px;
}
</style>새로운 테두리 속성을 자세히 살펴보겠습니다.
border-width: 테두리의 두께를 4 픽셀로 설정합니다.border-style: 테두리를 실선에서 점선으로 변경합니다.border-color: 테두리 색상을 녹색으로 변경합니다.border-radius: 10 픽셀 곡선으로 둥근 모서리를 추가합니다.모든 값을 사용하여 단축 border 속성을 사용할 수도 있습니다.
p {
border: 4px dashed green;
}예시 출력:
HTML 파일을 열면 다음이 적용된 단락이 표시됩니다.
더 많은 유연성을 보여주기 위해 다음 추가 변형을 시도해 보세요.
p {
/* Different border styles */
border-top: 3px dotted red;
border-bottom: 3px double blue;
border-left: 3px groove purple;
border-right: 3px ridge orange;
}이 단계에서는 요소의 내용과 테두리 사이에 공간을 만드는 CSS 속성인 패딩에 대해 배웁니다. 패딩은 요소의 가독성과 시각적 간격을 개선하는 데 도움이 됩니다.
styles.html 파일의 <style> 섹션을 다음 CSS 로 업데이트합니다.
<style>
p {
border: 4px dashed green;
border-radius: 10px;
padding: 20px;
}
</style>패딩을 적용하는 다양한 방법을 살펴보겠습니다.
padding: 20px; /* 모든 면에 20px 패딩 */padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 25px;padding: 10px 20px 15px 25px;
/* 위: 10px, 오른쪽: 20px, 아래: 15px, 왼쪽: 25px */padding: 15px 30px;
/* 위/아래: 15px, 왼쪽/오른쪽: 30px */예시 출력:
HTML 파일을 열면 다음이 적용된 단락이 표시됩니다.
패딩 시각화:
+---------------------------+
| |
| [20px 패딩] |
| Welcome to CSS |
| Styling! |
| [20px 패딩] |
| |
+---------------------------+이 마지막 단계에서는 테두리 및 패딩 속성을 결합하여 시각적으로 흥미로운 디자인을 만드는 창의적인 방법을 탐구합니다. 여러 단락을 추가하여 다양한 스타일링 기술을 시연합니다.
styles.html 파일을 다음 HTML 및 CSS 로 업데이트합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Border and Padding Combinations</title>
<style>
.box1 {
border: 3px solid purple;
padding: 15px;
border-radius: 10px;
margin-bottom: 10px;
}
.box2 {
border: 2px dashed orange;
padding: 10px 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.box3 {
border: 4px double green;
padding: 25px;
border-radius: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="box1">
<p>First paragraph with purple solid border and 15px padding</p>
</div>
<div class="box2">
<p>Second paragraph with orange dashed border and asymmetric radius</p>
</div>
<div class="box3">
<p>Third paragraph with green double border and centered text</p>
</div>
</body>
</html>시연된 주요 기술:
border-radius예시 출력:
HTML 파일을 열면 고유한 테두리 및 패딩 조합이 있는 세 개의 단락이 표시됩니다.
조합 시각화:
+--- Box 1 ---+ +--- Box 2 ---+ +--- Box 3 ---+
| Purple | | Orange | | Green |
| Solid | | Dashed | | Double |
| Border | | Border | | Border |
+-------------+ +-------------+ +-------------+이 랩에서는 참가자들이 CSS 테두리 및 패딩을 사용하여 웹 요소를 스타일링하는 방법을 배웠습니다. 랩은 웹 페이지 스타일링의 기본적인 설정을 시연하면서 기본적인 HTML5 문서 구조를 만드는 것으로 시작했습니다. 참가자들은 너비, 색상 및 스타일과 같은 테두리 속성을 사용자 정의하는 것을 포함하여 단락에 테두리 스타일을 추가하는 것을 탐구했습니다.
이 랩은 학습자들에게 실선 테두리 적용, 다양한 테두리 구성 실험, 패딩이 요소 간격 및 모양을 어떻게 수정할 수 있는지 이해하는 것을 포함한 실용적인 CSS 기술을 안내했습니다. 실습 예제를 통해 참가자들은 웹 페이지 요소의 시각적 표현을 향상시키기 위해 CSS 를 사용하는 실용적인 기술을 습득하여 시각적으로 더 매력적이고 구조화된 웹 디자인을 만드는 방법을 배웠습니다.
