이 랩에서는 CSS 를 사용하여 테두리 색상을 설정하고 조작하는 방법을 배우고, HTML 요소의 스타일을 지정하는 다양한 기술을 탐구합니다. 이 랩은 HTML 파일을 생성하고, 인라인 테두리 스타일을 적용하고, 개별 테두리 색상을 설정하고, 여러 요소에서 다양한 색상 변형을 실험하는 과정을 안내합니다. 단계별 지침을 따르면, 테두리 스타일링을 통해 웹 페이지 구성 요소의 시각적 외관을 향상시키는 데 CSS 를 사용하는 실용적인 기술을 습득할 수 있습니다.
이 랩은 기본적인 HTML 구조에서 시작하여 점차적으로 더 복잡한 스타일링 기술을 추가하면서 테두리 색상 속성을 이해하는 실습 방식을 제공합니다. 요소에 테두리 색상을 직접 적용하고, 개별 테두리 측면을 사용자 정의하며, 다양한 색상 접근 방식을 사용하여 시각적으로 흥미로운 디자인을 만드는 방법을 배우게 됩니다.
이 단계에서는 CSS 테두리 색상을 탐색하기 위한 기반이 될 기본적인 HTML 파일을 만드는 방법을 배웁니다. WebIDE 를 사용하여 초기 HTML 구조를 생성하고 설정합니다.
먼저, WebIDE 에서 ~/project 디렉토리로 이동합니다. 파일 탐색기에서 마우스 오른쪽 버튼을 클릭하고 "New File"을 선택하여 index.html이라는 새 파일을 만듭니다.
다음은 생성할 기본 HTML 구조입니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Border Colors Example</title>
</head>
<body>
<div class="container">
<h1>CSS Border Colors Exploration</h1>
<p>This is our first HTML element to style with borders.</p>
</div>
</body>
</html>이 HTML 구조의 주요 구성 요소를 살펴보겠습니다.
<!DOCTYPE html>은 이것을 HTML5 문서로 선언합니다.<html> 태그는 HTML 페이지의 루트 요소입니다.<head>는 문서에 대한 메타 정보를 포함합니다.<body>는 보이는 페이지 내용을 포함합니다.<div>를 추가했습니다.파일을 만든 후 Ctrl+S를 누르거나 WebIDE 의 저장 아이콘을 사용하여 저장합니다.
파일 내용을 볼 때의 예시 출력:
$ cat ~/project/index.html
<!DOCTYPE html>
html lang="en">
...이 간단한 HTML 구조는 다음 단계에서 CSS 테두리 색상 탐색을 위한 기반을 제공합니다.
이 단계에서는 style 속성을 사용하여 HTML 요소에 직접 인라인 테두리 스타일을 추가하는 방법을 배웁니다. 인라인 스타일은 CSS 속성을 개별 요소에 직접 적용하는 빠른 방법입니다.
이전 단계에서 생성한 index.html 파일을 WebIDE 에서 엽니다. 다양한 요소에 대한 인라인 테두리 스타일을 포함하도록 HTML 을 수정합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Border Colors Example</title>
</head>
<body>
<div class="container">
<h1 style="border: 2px solid black;">CSS Border Colors Exploration</h1>
<p style="border: 3px dotted blue;">
This is our first HTML element with an inline border style.
</p>
<div style="border: 4px dashed red; padding: 10px;">
This div has a different border style and width.
</div>
</div>
</body>
</html>인라인 테두리 스타일을 자세히 살펴보겠습니다.
border: 2px solid black;은 2 픽셀 너비의 실선 검정색 테두리를 생성합니다.border: 3px dotted blue;은 3 픽셀 너비의 점선 파란색 테두리를 생성합니다.border: 4px dashed red;은 4 픽셀 너비의 파선 빨간색 테두리를 생성합니다.border 속성은 다음을 결합하는 단축 속성입니다.
파일 내용을 볼 때의 예시 출력:
$ cat ~/project/index.html
<!DOCTYPE html>
<html lang="en">
...
<h1 style="border: 2px solid black;">...Ctrl+S를 누르거나 WebIDE 의 저장 아이콘을 사용하여 파일을 저장합니다.
이 단계에서는 CSS 를 사용하여 HTML 요소의 각 면에 대해 개별 테두리 색상을 설정하는 방법을 배웁니다. 이 기술을 사용하면 보다 정밀하고 창의적인 테두리 스타일을 지정할 수 있습니다.
WebIDE 에서 index.html 파일을 열고 다음 코드로 업데이트합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Border Colors Example</title>
<style>
.individual-borders {
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: purple;
border-style: solid;
border-width: 4px;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Individual Border Colors</h1>
<div class="individual-borders">
This div has different colors for each border side.
</div>
<p>Notice how each border side has a unique color!</p>
</div>
</body>
</html>개별 테두리 색상에 대한 주요 CSS 속성:
border-top-color: 위쪽 테두리의 색상을 설정합니다.border-right-color: 오른쪽 테두리의 색상을 설정합니다.border-bottom-color: 아래쪽 테두리의 색상을 설정합니다.border-left-color: 왼쪽 테두리의 색상을 설정합니다.또한 다음을 추가했습니다.
border-style: solid; 테두리가 보이도록 합니다.border-width: 4px; 테두리가 더 눈에 띄도록 합니다.파일 내용을 볼 때의 예시 출력:
$ cat ~/project/index.html
<!DOCTYPE html>
<html lang="en">
...
<div class="individual-borders">...Ctrl+S를 누르거나 WebIDE 의 저장 아이콘을 사용하여 파일을 저장합니다.
이 단계에서는 다양한 CSS 색상 형식과 기술을 사용하여 테두리 색상을 지정하는 여러 가지 방법을 살펴봅니다. WebIDE 에서 index.html 파일을 열고 다음 코드로 업데이트합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Border Color Variations</title>
<style>
.color-demo {
width: 200px;
height: 100px;
margin: 10px;
padding: 10px;
}
.named-color {
border: 5px solid tomato;
}
.hex-color {
border: 5px solid #4caf50;
}
.rgb-color {
border: 5px solid rgb(33, 150, 243);
}
.rgba-color {
border: 5px solid rgba(255, 152, 0, 0.7);
}
.hsl-color {
border: 5px solid hsl(120, 100%, 25%);
}
</style>
</head>
<body>
<div class="container">
<h1>Border Color Variations</h1>
<div class="color-demo named-color">Named Color (Tomato)</div>
<div class="color-demo hex-color">Hex Color (#4CAF50)</div>
<div class="color-demo rgb-color">RGB Color (Blue)</div>
<div class="color-demo rgba-color">RGBA Color (Transparent Orange)</div>
<div class="color-demo hsl-color">HSL Color (Dark Green)</div>
</div>
</body>
</html>색상 지정 방법:
tomato와 같이 미리 정의된 색상 이름을 사용합니다.#4CAF50) 를 사용합니다.rgb(red, green, blue) 형식을 사용합니다.rgba()를 사용하여 알파 투명도를 추가합니다.hsl(hue, saturation, lightness) 형식을 사용합니다.파일 내용을 볼 때의 예시 출력:
$ cat ~/project/index.html
<!DOCTYPE html>
<html lang="en">
...
<div class="color-demo named-color">...Ctrl+S를 누르거나 WebIDE 의 저장 아이콘을 사용하여 파일을 저장합니다.
이 단계에서는 CSS 가 다양한 요소를 고유하게 스타일링할 수 있는 방법을 보여주면서, 서로 다른 HTML 요소에 테두리 색상을 적용하는 방법을 배웁니다. WebIDE 에서 index.html 파일을 열고 다음 코드로 업데이트합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Border Colors on Different Elements</title>
<style>
/* Heading styles */
h1 {
border: 3px solid #2196f3;
padding: 10px;
text-align: center;
}
/* Paragraph styles */
p {
border: 2px dashed green;
padding: 15px;
margin: 10px 0;
}
/* Button styles */
.custom-button {
border: 4px dotted purple;
background-color: #f0f0f0;
padding: 10px 20px;
display: inline-block;
margin: 10px;
}
/* Image styles */
.bordered-image {
border: 5px solid orange;
max-width: 300px;
}
/* List styles */
ul {
border: 3px solid red;
padding: 20px;
}
li {
border-bottom: 1px solid #ccc;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>Styling Different Elements</h1>
<p>This paragraph has a green dashed border.</p>
<button class="custom-button">Bordered Button</button>
<img
class="bordered-image"
src="https://via.placeholder.com/300"
alt="Placeholder Image"
/>
<ul>
<li>List item with bottom border</li>
<li>Another list item</li>
<li>Last list item</li>
</ul>
</div>
</body>
</html>핵심 사항:
파일 내용을 볼 때의 예시 출력:
$ cat ~/project/index.html
<!DOCTYPE html>
<html lang="en">
...
<h1>Styling Different Elements</h1>
...Ctrl+S를 누르거나 WebIDE 의 저장 아이콘을 사용하여 파일을 저장합니다.
이 랩에서는 참가자들이 단계별 접근 방식을 통해 CSS 에서 테두리 색상을 설정하는 기본 사항을 배웁니다. 기본적인 HTML 파일 구조를 생성하는 것부터 시작하여, 학습자들은 CSS 테두리 스타일링 기술을 탐구하기 위한 기반을 마련합니다. 초기 단계에서는 style 속성을 사용하여 HTML 요소에 직접 인라인 테두리 스타일을 적용하는 방법을 배우고, 웹 페이지 구성 요소에 시각적인 테두리를 추가하는 빠른 방법을 보여줍니다.
이 랩은 개별 테두리 색상을 설정하고, 다양한 색상 변형을 실험하며, 다양한 HTML 요소에 테두리 색상을 적용하는 방법을 가르칩니다. 실용적인 예제를 통해 참가자들은 테두리 스타일을 조작하는 실질적인 경험을 얻고, 정확한 테두리 색상 제어를 통해 CSS 가 웹 페이지의 시각적 표현을 향상시키는 데 어떻게 사용될 수 있는지 이해하게 됩니다.
