이 랩에서는 강력한 CSS box-shadow 속성을 탐구하고 웹 요소에 시각적으로 매력적인 그림자 효과를 만드는 방법을 배우게 됩니다. 단계별 접근 방식을 통해 box shadow 의 기본 구문을 이해하고, 기본 및 고급 그림자 기법을 적용하며, HTML 요소의 깊이와 시각적 흥미를 향상시키기 위해 그림자 속성을 사용자 정의하는 방법을 배우게 됩니다.
이 랩에서는 box shadow 구문 이해, 다양한 모양에 그림자 적용, 오프셋 (offset), 블러 반경 (blur radius), 색상 변화 실험과 같은 주요 개념을 다룹니다. 이 랩을 마치면 웹 디자인의 시각적 표현을 변환하고 사용자 인터페이스에 미묘한 깊이와 입체감을 더할 수 있는 전문적인 그림자를 만드는 실용적인 기술을 갖추게 될 것입니다.
이 단계에서는 CSS box shadow 의 기본 구문과 웹 요소에 깊이와 시각적 흥미를 더하는 방법을 배우게 됩니다. box-shadow 속성은 HTML 요소에 그림자 효과를 만들 수 있는 강력한 CSS 기능입니다.
box shadow 구문을 탐구하기 위해 새로운 HTML 파일을 만들어 보겠습니다. WebIDE 를 열고 ~/project 디렉토리에 index.html이라는 파일을 만듭니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Box Shadow Syntax</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
/* Basic box-shadow syntax */
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>box-shadow 구문을 자세히 살펴보겠습니다.
5px: 수평 오프셋 (그림자를 오른쪽으로 이동)5px: 수직 오프셋 (그림자를 아래로 이동)10px: 블러 반경 (그림자를 부드럽게 만듦)rgba(0, 0, 0, 0.3): 투명도를 가진 그림자 색상기본 구문은 다음과 같습니다: box-shadow: [수평 오프셋] [수직 오프셋] [블러 반경] [색상]
그림자가 있는 렌더링된 상자의 예시 출력:
+------------------------+
| |
| [부드러운 그림자가 있는 회색 상자] |
| |
+------------------------+기억해야 할 주요 사항:
이 단계에서는 이전 단계에서 배운 구문을 기반으로 div 요소에 기본 box shadow 를 적용하는 방법을 배우게 됩니다. 다양한 그림자 효과를 시연하기 위해 기존 HTML 파일을 수정하겠습니다.
WebIDE 에서 index.html 파일을 열고 다음 코드로 내용을 업데이트합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Basic Box Shadow</title>
<style>
.container {
display: flex;
justify-content: space-around;
padding: 50px;
}
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
margin: 20px;
}
/* Light shadow */
.light-shadow {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}
/* Darker shadow */
.dark-shadow {
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="container">
<div class="box light-shadow"></div>
<div class="box dark-shadow"></div>
</div>
</body>
</html>box shadow 적용을 자세히 살펴보겠습니다.
서로 다른 그림자 강도를 가진 두 개의 div 요소를 만들었습니다.
.light-shadow는 다음과 같은 미묘한 그림자를 사용합니다.
.dark-shadow는 다음과 같은 더 뚜렷한 그림자를 사용합니다.
예시 시각적 출력:
+------------------------+------------------------+
| | |
| [밝은 그림자 상자] | [어두운 그림자 상자] |
| | |
+------------------------+------------------------+주요 관찰 사항:
이 단계에서는 inset 그림자, spread radius, 색상 변형을 포함하여 box shadow 에 대한 고급 사용자 정의 옵션을 탐구합니다. 이러한 고급 속성을 시연하기 위해 index.html 파일을 업데이트하겠습니다.
WebIDE 에서 index.html 파일을 열고 다음 코드로 내용을 바꿉니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Customized Box Shadows</title>
<style>
.container {
display: flex;
justify-content: space-around;
padding: 50px;
}
.box {
width: 200px;
height: 200px;
margin: 20px;
background-color: #f0f0f0;
}
/* Inset shadow */
.inset-shadow {
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
}
/* Spread radius */
.spread-shadow {
box-shadow: 5px 5px 0 10px rgba(0, 0, 255, 0.2);
}
/* Colored shadow */
.colored-shadow {
box-shadow: 8px 8px 12px rgba(255, 0, 0, 0.4);
}
</style>
</head>
<body>
<div class="container">
<div class="box inset-shadow"></div>
<div class="box spread-shadow"></div>
<div class="box colored-shadow"></div>
</div>
</body>
</html>새로운 box shadow 사용자 정의를 살펴보겠습니다.
Inset Shadow (내부 그림자):
inset 키워드를 사용합니다.box-shadow: inset [수평 오프셋] [수직 오프셋] [블러 반경] [색상]Spread Radius (확산 반경):
10px 확산은 파란색 색조의 그림자 테두리를 만듭니다.Colored Shadow (색상 그림자):
예시 시각적 출력:
+------------------------+------------------------+------------------------+
| | | |
| [내부 그림자 상자] | [확산 그림자 상자] | [색상 그림자 상자] |
| | | |
+------------------------+------------------------+------------------------+주요 사항:
inset은 내부 그림자를 만듭니다.이 단계에서는 CSS border-radius 및 box-shadow 속성을 사용하여 그림자가 있는 원형 요소를 만드는 방법을 배우게 됩니다. WebIDE 에서 index.html 파일을 열고 다음 코드로 내용을 업데이트합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Circular Element with Shadow</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.circular-element {
width: 200px;
height: 200px;
background-color: #ffffff;
/* Create circular shape */
border-radius: 50%;
/* Add box shadow */
box-shadow:
0 10px 20px rgba(0, 0, 0, 0.2),
0 6px 6px rgba(0, 0, 0, 0.15);
/* Center content */
display: flex;
justify-content: center;
align-items: center;
/* Optional: add text */
font-family: Arial, sans-serif;
color: #333;
}
</style>
</head>
<body>
<div class="container">
<div class="circular-element">Circular Shadow</div>
</div>
</body>
</html>그림자가 있는 원형 요소를 만들기 위한 주요 기술:
원형 모양:
border-radius: 50%를 사용하여 완벽한 원을 만듭니다.Box Shadow (상자 그림자):
0 10px 20px rgba(0, 0, 0, 0.2)
0 6px 6px rgba(0, 0, 0, 0.15)
예시 시각적 출력:
+------------------------+
| |
| [원형 요소 |
| 부드러운 그림자 포함] |
| |
+------------------------+주요 사항:
border-radius: 50%은 완벽한 원을 만듭니다.이 단계에서는 여러 box shadow 를 사용하여 복잡한 그림자 효과를 만드는 고급 기술을 탐구합니다. WebIDE 에서 index.html 파일을 열고 다음 코드로 내용을 업데이트합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Multiple Shadow Effects</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.card {
width: 300px;
height: 400px;
background-color: white;
border-radius: 10px;
/* Multiple shadow effect */
box-shadow:
/* Outer shadow */
0 10px 20px rgba(0, 0, 0, 0.1),
/* Inner shadow */ inset 0 -5px 10px rgba(0, 0, 0, 0.05),
/* Colored accent shadow */ 0 15px 25px rgba(0, 123, 255, 0.2);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
transition: transform 0.3s ease;
}
.card:hover {
transform: scale(1.05);
box-shadow:
0 15px 30px rgba(0, 0, 0, 0.2),
inset 0 -5px 10px rgba(0, 0, 0, 0.1),
0 20px 35px rgba(0, 123, 255, 0.3);
}
</style>
</head>
<body>
<div class="card">
<h2>Shadow Experiment</h2>
<p>Hover to see shadow effect!</p>
</div>
</body>
</html>여러 그림자 효과를 위한 주요 기술:
레이어 그림자:
그림자 구성:
0 10px 20px rgba(0, 0, 0, 0.1): 부드러운 외부 그림자inset 0 -5px 10px rgba(0, 0, 0, 0.05): 내부 미묘한 그림자0 15px 25px rgba(0, 123, 255, 0.2): 파란색 강조 그림자Hover (마우스 오버) 효과:
예시 시각적 출력:
+------------------------+
| |
| [복잡한 그림자 포함 |
| 카드 효과] |
| |
+------------------------+주요 사항:
inset을 사용합니다.이 랩에서는 참가자들이 웹 요소에 시각적으로 매력적인 깊이와 차원을 만들기 위해 강력한 CSS box-shadow 속성을 탐구합니다. box shadow 의 기본적인 구문을 배우면서, 학생들은 수평 및 수직 오프셋, 블러 반경 및 색상 매개변수를 사용하여 그림자 효과를 적용하는 방법을 배우고, 이를 통해 HTML 요소의 시각적 디자인을 향상시킬 수 있습니다.
이 랩은 학습자들을 기본적인 box shadow 생성, 그림자 속성 사용자 정의, 여러 그림자 효과 실험을 포함한 실용적인 연습을 통해 안내합니다. 참가자들은 오프셋 방향, 블러 강도 및 색상 투명도와 같은 그림자 특성을 조작하는 실질적인 경험을 얻게 되며, 이는 웹 페이지 구성 요소의 미적 및 시각적 계층 구조를 크게 향상시킬 수 있습니다.
