이 랩에서는 학생들이 실습 HTML 및 CSS 연습을 통해 CSS 테두리 너비 스타일을 탐구합니다. 이 랩은 학습자가 HTML 파일을 생성하고, 단락 요소에 기본적인 테두리 스타일을 적용하며, 다양한 CSS 기술을 사용하여 개별 테두리 너비를 사용자 정의하는 과정을 안내합니다. 참가자들은 테두리 스타일, 색상, 너비를 설정하는 방법을 배우고, 요소 테두리를 정밀하고 창의적으로 제어하는 실질적인 경험을 얻게 됩니다.
단계별 지침을 통해 학습자들은 다양한 테두리 너비 속성 변형을 이해하고 HTML 요소에 스타일을 적용하는 실험을 할 것입니다. 이 랩은 CSS 테두리 스타일링을 학습하기 위한 구조화된 접근 방식을 제공하여, 학습자가 실용적인 웹 디자인 기술을 개발하고 CSS 레이아웃 및 시각 디자인 원리에 대한 이해를 향상시킬 수 있도록 합니다.
이 단계에서는 HTML 파일을 생성하고 CSS 테두리 너비 스타일을 탐구하기 위한 기본 구조를 설정하는 방법을 배웁니다. WebIDE 를 사용하여 CSS 테두리 너비 실험의 기반이 될 새로운 HTML 파일을 생성합니다.
먼저 WebIDE 를 열고 ~/project 디렉토리로 이동합니다. 파일 탐색기에서 마우스 오른쪽 버튼을 클릭하고 "New File"을 선택하여 border-styles.html이라는 새 파일을 생성합니다.
다음은 사용할 기본 HTML 구조입니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Border Width Styles</title>
<style>
/* We'll add CSS styles here in later steps */
</style>
</head>
<body>
<h1>CSS Border Width Exploration</h1>
<p>This paragraph will help us demonstrate border width styles.</p>
</body>
</html>이 HTML 구조의 주요 구성 요소를 살펴보겠습니다.
<!DOCTYPE html>은 이것을 HTML5 문서로 선언합니다.<head> 섹션에는 메타데이터가 포함되어 있으며 CSS 스타일을 호스팅합니다.<style> 태그가 포함되어 있습니다.<body>에는 제목과 스타일링에 사용할 단락이 포함되어 있습니다.이 코드를 WebIDE 에서 방금 생성한 border-styles.html 파일에 복사합니다. 파일을 저장해야 합니다.
이 단계에서는 CSS 를 사용하여 단락 요소에 기본적인 테두리 스타일을 적용하는 방법을 배웁니다. 이전 단계에서 생성한 HTML 파일을 수정하여 단락 주위에 간단한 테두리를 추가합니다.
WebIDE 에서 border-styles.html 파일을 열고 <style> 섹션을 다음 CSS 로 업데이트합니다.
<style>
p {
border-style: solid;
border-color: blue;
border-width: 2px;
}
</style>CSS 속성을 자세히 살펴보겠습니다.
border-style: solid;는 실선 테두리를 생성합니다.border-color: blue;는 테두리 색상을 파란색으로 설정합니다.border-width: 2px;는 테두리 너비를 2 픽셀로 정의합니다.이러한 속성을 결합하기 위해 축약형 표기법을 사용할 수도 있습니다.
<style>
p {
border: 2px solid blue;
}
</style>이 축약형은 테두리 너비, 스타일 및 색상을 단일 선언으로 결합합니다. 순서는 중요하지 않지만 너비, 스타일, 색상 순으로 사용하는 것이 일반적입니다.
HTML 파일을 저장하고 브라우저에서 보면 단락 주위에 파란색 실선 테두리가 표시됩니다.
예시 출력:
[텍스트를 둘러싼 2 픽셀 너비의 파란색 실선 테두리가 있는 단락]이 단계에서는 요소의 각 측면에 대한 개별 테두리 너비를 사용자 정의하는 방법을 배웁니다. CSS 는 각 테두리 측면의 너비를 독립적으로 제어하기 위한 특정 속성을 제공합니다.
WebIDE 에서 border-styles.html 파일을 열고 <style> 섹션을 다음 CSS 로 업데이트합니다.
<style>
p {
border-top-width: 4px;
border-right-width: 2px;
border-bottom-width: 6px;
border-left-width: 1px;
border-style: solid;
border-color: blue;
}
</style>개별 테두리 너비 속성을 자세히 살펴보겠습니다.
border-top-width: 상단 테두리의 너비를 4 픽셀로 설정합니다.border-right-width: 오른쪽 테두리의 너비를 2 픽셀로 설정합니다.border-bottom-width: 하단 테두리의 너비를 6 픽셀로 설정합니다.border-left-width: 왼쪽 테두리의 너비를 1 픽셀로 설정합니다.border-width 속성을 사용하여 축약형 메서드를 사용할 수도 있습니다.
<style>
p {
border-width: 4px 2px 6px 1px;
border-style: solid;
border-color: blue;
}
</style>축약형 표기법의 값 순서는 다음 패턴을 따릅니다.
예시 출력:
[다양한 테두리 너비를 가진 단락:
- 상단 테두리: 4px
- 오른쪽 테두리: 2px
- 하단 테두리: 6px
- 왼쪽 테두리: 1px]이 단계에서는 CSS 에서 테두리 너비 값을 지정하는 다양한 방법을 살펴봅니다. CSS 는 테두리 너비를 정의하기 위해 여러 단위와 접근 방식을 제공하여 스타일링에 유연성을 제공합니다.
border-styles.html 파일을 열고 <style> 섹션을 다양한 테두리 너비 실험으로 업데이트합니다.
<style>
/* Experiment 1: Pixel Values */
.pixel-border {
border: 5px solid green;
}
/* Experiment 2: Thin, Medium, Thick Keywords */
.keyword-border {
border-width: thin medium thick thin;
border-style: solid;
border-color: purple;
}
/* Experiment 3: Relative Units */
.relative-border {
border-width: 0.5em;
border-style: dashed;
border-color: red;
}
</style>
<body>
<h1>Border Width Experiments</h1>
<p class="pixel-border">Pixel Border: Precise 5px width</p>
<p class="keyword-border">Keyword Border: Predefined thickness</p>
<p class="relative-border">Relative Border: Responsive em unit</p>
</body>주요 테두리 너비 기술:
px): 정확하고 고정된 크기의 테두리thin (1px), medium (3px), thick (5px)em, rem): 텍스트 크기에 따라 확장 가능예시 출력:
[다양한 테두리 너비 스타일을 가진 세 개의 단락:
- 녹색 실선 5px 테두리
- 두께가 다른 보라색 실선 테두리
- 빨간색 점선 0.5em 테두리]이 단계에서는 고급 테두리 너비 속성 변형을 살펴보고 CSS 를 사용하여 더 복잡한 테두리 스타일을 만드는 방법을 배웁니다. 테두리 속성을 조작하는 다양한 기술을 시연합니다.
border-styles.html 파일을 열고 <style> 섹션을 이러한 고급 테두리 너비 실험으로 업데이트합니다.
<style>
/* Variation 1: Asymmetric Border Widths */
.asymmetric-border {
border-top-width: 10px;
border-right-width: 5px;
border-bottom-width: 2px;
border-left-width: 8px;
border-style: solid;
border-color: navy;
}
/* Variation 2: Conditional Border Visibility */
.conditional-border {
border-width: 3px;
border-style: solid;
border-color: transparent transparent blue transparent;
}
/* Variation 3: Responsive Border with Calc() */
.responsive-border {
border-width: calc(2px + 1vw);
border-style: dashed;
border-color: orange;
}
</style>
<body>
<h1>Border Width Property Variations</h1>
<p class="asymmetric-border">Asymmetric Border Widths</p>
<p class="conditional-border">Conditional Border Visibility</p>
<p class="responsive-border">Responsive Border Width</p>
</body>주요 테두리 너비 변형:
calc() 함수를 사용한 동적 너비예시 출력:
[다음 세 가지 단락 시연:
- 다양한 측면 너비를 가진 비대칭 테두리
- 하단 측면에만 보이는 테두리
- 뷰포트에 따라 변경되는 테두리 너비]이 랩에서는 참가자가 HTML 파일을 만들고 HTML 요소에 CSS 테두리 너비 스타일을 적용하는 방법을 배웁니다. 랩은 인라인 CSS 정의를 허용하는 <style> 태그를 사용하여 기본 HTML 구조를 설정하는 것으로 시작합니다. 참가자는 단락 요소를 주요 예로 사용하여 테두리 스타일, 색상 및 너비를 포함한 다양한 테두리 속성을 탐색합니다.
이 랩은 학습자가 테두리 모양을 사용자 정의하는 실질적인 단계를 안내하며, 개별 테두리 너비를 설정하고 다양한 테두리 너비 값을 실험하는 방법을 보여줍니다. WebIDE 에서 직접 작업함으로써 학생들은 CSS 테두리 스타일을 적용하고, 서로 다른 속성이 웹 페이지 요소에 시각적 효과를 생성하기 위해 어떻게 상호 작용하는지 이해하는 실질적인 경험을 얻습니다.
