이 랩에서는 참가자들이 강력한 CSS border-radius 속성을 탐구하여 웹 요소에 시각적으로 매력적인 둥근 모서리를 만드는 방법을 배웁니다. 단계별 접근 방식을 통해 학습자는 기본적인 HTML 문서를 설정하는 것부터 시작하여 다양한 border-radius 기술을 점진적으로 적용하여 요소의 모서리를 동적으로 조작하는 방법을 이해하게 됩니다.
이 랩은 균일한 둥근 모서리 생성, 개별 모서리에 서로 다른 반지름 적용, 그리고 border-radius 변형 실험과 같은 기본적인 기술을 다룹니다. 실용적인 예제를 통해 학생들은 날카로운 모서리의 div 요소를 부드럽고 둥근 디자인 구성 요소로 변환하여 웹 인터페이스의 미적 매력을 향상시키는 CSS 사용에 대한 실질적인 경험을 얻게 됩니다.
이 단계에서는 CSS border-radius 속성을 탐구하기 위한 기본적인 HTML 문서를 설정합니다. CSS 스타일링 실험의 기반이 될 간단한 HTML 파일을 만들 것입니다.
WebIDE 를 열고 ~/project 디렉토리로 이동합니다. 파일 탐색기에서 마우스 오른쪽 버튼을 클릭하고 "New File"을 선택하여 index.html이라는 새 파일을 만듭니다.
다음 HTML 구조를 복사하여 index.html 파일에 붙여넣습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Border-Radius Exploration</title>
<style>
/* We'll add our CSS styles here in the next steps */
</style>
</head>
<body>
<div class="container">
<h1>CSS Border-Radius Examples</h1>
<!-- We'll add our div elements here in the next steps -->
</div>
</body>
</html>이 기본 HTML 문서는 CSS border-radius 탐구를 위한 간단한 구조를 제공합니다. 주요 구성 요소를 살펴보겠습니다.
<!DOCTYPE html> 선언은 브라우저가 최신 HTML 표준을 사용하도록 보장합니다.<meta> 태그는 문자 인코딩 및 반응형 디자인에 도움이 됩니다.<style> 태그를 포함했습니다.<body>에는 예제에 사용할 컨테이너 div 가 포함되어 있습니다.이 파일을 브라우저에서 열 때의 예시 출력:
CSS Border-Radius Examples파일을 저장하고 ~/project/index.html에 있는지 확인합니다.
이 단계에서는 border-radius 속성을 사용하여 div 요소에 둥근 모서리를 만드는 방법을 배웁니다. border-radius 속성을 사용하면 HTML 요소에 부드럽고 둥근 모서리를 쉽게 만들 수 있습니다.
WebIDE 에서 index.html 파일을 엽니다. <style> 태그 안에 다음 CSS 를 추가하여 둥근 모서리가 있는 기본 div 를 만듭니다.
<style>
.rounded-box {
width: 200px;
height: 200px;
background-color: #3498db;
border-radius: 20px;
margin: 20px;
}
</style>이제 HTML 의 <body> 섹션 안에 rounded-box 클래스가 있는 div 를 추가합니다.
<body>
<div class="container">
<h1>CSS Border-Radius Examples</h1>
<div class="rounded-box"></div>
</div>
</body>CSS 속성을 자세히 살펴보겠습니다.
width 및 height는 div 의 크기를 설정합니다.background-color는 div 에 단색을 제공합니다.border-radius: 20px는 20 픽셀 반지름으로 둥근 모서리를 만듭니다.margin은 div 주변에 약간의 공간을 추가합니다.이 HTML 파일을 브라우저에서 열면 둥근 모서리가 있는 파란색 사각형이 표시됩니다. border-radius 속성은 div 의 네 모서리 모두에 동일한 곡선을 적용합니다.
예시 시각적 출력:
+--------------------+
| |
| 둥근 모서리가 |
| 있는 파란색 상자 |
| |
+--------------------+border-radius 값을 변경하여 모서리 곡률에 어떤 영향을 미치는지 실험해 보세요. 10px, 50px 또는 100px과 같은 값을 시도하여 다양한 둥근 효과를 확인하십시오.
이 단계에서는 개별 모서리의 둥글림을 더 세밀하게 제어할 수 있도록 서로 다른 모서리 반지름을 가진 div 를 만드는 방법을 배웁니다. border-radius 속성을 사용하여 독특하고 흥미로운 모양을 만들 수 있습니다.
index.html 파일의 <style> 섹션을 다음 CSS 로 업데이트합니다.
<style>
.different-corners {
width: 250px;
height: 200px;
background-color: #2ecc71;
margin: 20px;
}
.top-left-corner {
border-top-left-radius: 50px;
}
.bottom-right-corner {
border-bottom-right-radius: 30px;
}
.mixed-corners {
border-top-left-radius: 40px;
border-bottom-right-radius: 20px;
border-top-right-radius: 10px;
border-bottom-left-radius: 60px;
}
</style>이제 해당 div 를 HTML body 에 추가합니다.
<body>
<div class="container">
<h1>CSS Border-Radius Examples</h1>
<div class="rounded-box"></div>
<div class="different-corners top-left-corner"></div>
<div class="different-corners bottom-right-corner"></div>
<div class="different-corners mixed-corners"></div>
</div>
</body>다양한 border-radius 적용 방식을 자세히 살펴보겠습니다.
border-top-left-radius: 50px는 왼쪽 상단 모서리만 둥글게 만듭니다.border-bottom-right-radius: 30px는 오른쪽 하단 모서리만 둥글게 만듭니다.mixed-corners div 는 각 모서리에 대해 서로 다른 반지름을 독립적으로 설정하는 방법을 보여줍니다.예시 시각적 출력:
+--------------------+
| 다양한 모서리 |
| 둥글림이 있는 |
| 녹색 상자 |
+--------------------+픽셀 값을 변경하여 서로 다른 모서리 반지름이 어떻게 독특한 모양을 만드는지 실험해 보세요. 픽셀 (px), 백분율 (%), 또는 수평 및 수직 반지름에 대해 서로 다른 값을 사용할 수 있습니다.
이 단계에서는 개별 모서리 반지름 속성에 대해 더 자세히 알아보고, 다양한 단위와 기술을 사용하여 더욱 복잡하고 정밀한 둥근 모서리를 만드는 방법을 배웁니다.
index.html 파일의 <style> 섹션을 다음 CSS 로 업데이트합니다.
<style>
.individual-radius {
width: 300px;
height: 200px;
background-color: #e74c3c;
margin: 20px;
}
.elliptical-corners {
border-top-left-radius: 50px 25px;
border-top-right-radius: 25px 50px;
border-bottom-right-radius: 40px 20px;
border-bottom-left-radius: 20px 40px;
}
.percentage-corners {
border-top-left-radius: 30%;
border-bottom-right-radius: 30%;
}
</style>해당 div 를 HTML body 에 추가합니다.
<body>
<div class="container">
<h1>CSS Border-Radius Examples</h1>
<div class="individual-radius elliptical-corners"></div>
<div class="individual-radius percentage-corners"></div>
</div>
</body>새로운 border-radius 기술을 살펴보겠습니다.
타원형 모서리 (Elliptical Corners):
border-radius: horizontal-radius vertical-radiusborder-top-left-radius: 50px 25px는 비대칭 곡선을 만듭니다.백분율 기반 모서리 (Percentage-based Corners):
border-top-left-radius: 30%는 요소의 크기를 기준으로 모서리를 둥글게 만듭니다.예시 시각적 출력:
+--------------------+
| 독특한 모서리가 |
| 있는 빨간색 상자 |
| 둥글림 |
+--------------------+반지름 값과 단위를 변경하여 요소의 모양에 어떤 영향을 미치는지 실험해 보세요.
이 마지막 단계에서는 CSS 를 사용하여 독특하고 창의적인 모양을 만들 수 있는 고급 border-radius 기술을 탐구합니다. border-radius를 사용하여 복잡한 기하학적 디자인을 만드는 방법을 보여드리겠습니다.
index.html 파일의 <style> 섹션을 다음 CSS 로 업데이트합니다.
<style>
.creative-shapes {
width: 250px;
height: 250px;
margin: 20px;
background-color: #9b59b6;
}
.circle {
border-radius: 50%;
}
.leaf-shape {
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.complex-shape {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}
</style>해당 div 를 HTML body 에 추가합니다.
<body>
<div class="container">
<h1>CSS Border-Radius Creative Shapes</h1>
<div class="creative-shapes circle"></div>
<div class="creative-shapes leaf-shape"></div>
<div class="creative-shapes complex-shape"></div>
</div>
</body>이러한 창의적인 border-radius 변형을 살펴보겠습니다.
완벽한 원 (Perfect Circle):
border-radius: 50%를 사용합니다.잎 모양 (Leaf-like Shape):
border-top-left-radius: 50%는 곡선 모서리를 만듭니다.복잡한 비대칭 모양 (Complex Asymmetrical Shape):
border-radius: horizontal / vertical을 사용합니다.border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%은 독특하고 비대칭적인 모양을 만듭니다.예시 시각적 출력:
+--------------------+
| 창의적인 |
| border-radius를 |
| 가진 보라색 모양 |
+--------------------+백분율 값을 변경하고 요소의 모양이 어떻게 변하는지 관찰하여 실험해 보세요.
이 랩에서는 참가자들이 CSS border-radius 속성을 사용하여 둥근 모서리를 만드는 방법을 단계별 탐구를 통해 배웁니다. 랩은 내부 스타일 태그가 있는 기본 HTML 문서를 설정하는 것으로 시작하여 CSS 스타일링 실험의 기반을 제공합니다. 참가자들은 간단한 HTML 구조를 만들고 점진적으로 border-radius 기술을 div 요소에 적용하는 것으로 시작합니다.
학습 과정에는 부드러운 모서리를 만들기 위한 기본 border-radius 적용, 다양한 모서리 반지름 실험, 개별 모서리 반지름 속성 탐색이 포함됩니다. 실용적인 예제를 통해 참가자들은 CSS 를 사용하여 요소 모양을 조작하는 실질적인 경험을 얻고, border-radius가 간단하고 직관적인 스타일링 기술로 웹 페이지 요소의 시각적 모양을 어떻게 변환할 수 있는지 이해하게 됩니다.
