소개
이 랩에서는 강력한 CSS box-shadow 속성을 탐구하고 웹 요소에 시각적으로 매력적인 그림자 효과를 만드는 방법을 배우게 됩니다. 단계별 접근 방식을 통해 box shadow 의 기본 구문을 이해하고, 기본 및 고급 그림자 기법을 적용하며, HTML 요소의 깊이와 시각적 흥미를 향상시키기 위해 그림자 속성을 사용자 정의하는 방법을 배우게 됩니다.
이 랩에서는 box shadow 구문 이해, 다양한 모양에 그림자 적용, 오프셋 (offset), 블러 반경 (blur radius), 색상 변화 실험과 같은 주요 개념을 다룹니다. 이 랩을 마치면 웹 디자인의 시각적 표현을 변환하고 사용자 인터페이스에 미묘한 깊이와 입체감을 더할 수 있는 전문적인 그림자를 만드는 실용적인 기술을 갖추게 될 것입니다.
Box Shadow 구문 이해
이 단계에서는 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: [수평 오프셋] [수직 오프셋] [블러 반경] [색상]
그림자가 있는 렌더링된 상자의 예시 출력:
+------------------------+
| |
| [부드러운 그림자가 있는 회색 상자] |
| |
+------------------------+
기억해야 할 주요 사항:
- 양수 오프셋 값은 그림자를 오른쪽과 아래로 이동시킵니다.
- 음수 오프셋 값은 그림자를 왼쪽과 위로 이동시킵니다.
- 블러 반경은 그림자 가장자리를 부드럽게 만듭니다.
- 색상 이름, 16 진수, RGB 또는 RGBA 값을 사용할 수 있습니다.
Div 요소에 기본 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는 다음과 같은 미묘한 그림자를 사용합니다.- 5px 수평 오프셋
- 5px 수직 오프셋
- 10px 블러 반경
- 20% 불투명도의 밝은 검정색
.dark-shadow는 다음과 같은 더 뚜렷한 그림자를 사용합니다.- 10px 수평 오프셋
- 10px 수직 오프셋
- 15px 블러 반경
- 50% 불투명도의 더 어두운 검정색
예시 시각적 출력:
+------------------------+------------------------+
| | |
| [밝은 그림자 상자] | [어두운 그림자 상자] |
| | |
+------------------------+------------------------+
주요 관찰 사항:
- 오프셋 값을 늘리면 그림자가 요소에서 더 멀리 이동합니다.
- 블러 반경을 늘리면 그림자가 더 부드러워집니다.
- 불투명도를 조정하면 그림자 강도가 변경됩니다.
Box 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 (색상 그림자):
- 투명도가 있는 색상 그림자를 만들기 위해 RGBA 를 사용합니다.
- 예제는 40% 불투명도의 빨간색 그림자를 사용합니다.
예시 시각적 출력:
+------------------------+------------------------+------------------------+
| | | |
| [내부 그림자 상자] | [확산 그림자 상자] | [색상 그림자 상자] |
| | | |
+------------------------+------------------------+------------------------+
주요 사항:
inset은 내부 그림자를 만듭니다.- Spread radius 는 그림자를 확장합니다.
- 색상 및 투명한 그림자를 위해 RGBA 를 사용합니다.
그림자를 가진 원형 요소 만들기
이 단계에서는 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)- 10px 수직 오프셋
- 20px 블러 반경
- 20% 불투명도의 부드러운 검정색
- 두 번째 그림자:
0 6px 6px rgba(0, 0, 0, 0.15)- 더 가깝고 부드러운 그림자로 깊이를 추가합니다.
- 첫 번째 그림자:
예시 시각적 출력:
+------------------------+
| |
| [원형 요소 |
| 부드러운 그림자 포함] |
| |
+------------------------+
주요 사항:
border-radius: 50%은 완벽한 원을 만듭니다.- 여러 box shadow 는 깊이를 만들 수 있습니다.
- 원하는 효과를 위해 불투명도와 블러를 조정합니다.
다중 그림자 효과 실험
이 단계에서는 여러 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 (마우스 오버) 효과:
- 마우스 오버 시 그림자 강도 증가
- 상호 작용적인 느낌을 위해 scale 변환 추가
예시 시각적 출력:
+------------------------+
| |
| [복잡한 그림자 포함 |
| 카드 효과] |
| |
+------------------------+
주요 사항:
- 깊이를 위해 여러 그림자를 결합합니다.
- 내부 그림자에
inset을 사용합니다. - 마우스 오버로 상호 작용 효과를 만듭니다.
요약
이 랩에서는 참가자들이 웹 요소에 시각적으로 매력적인 깊이와 차원을 만들기 위해 강력한 CSS box-shadow 속성을 탐구합니다. box shadow 의 기본적인 구문을 배우면서, 학생들은 수평 및 수직 오프셋, 블러 반경 및 색상 매개변수를 사용하여 그림자 효과를 적용하는 방법을 배우고, 이를 통해 HTML 요소의 시각적 디자인을 향상시킬 수 있습니다.
이 랩은 학습자들을 기본적인 box shadow 생성, 그림자 속성 사용자 정의, 여러 그림자 효과 실험을 포함한 실용적인 연습을 통해 안내합니다. 참가자들은 오프셋 방향, 블러 강도 및 색상 투명도와 같은 그림자 특성을 조작하는 실질적인 경험을 얻게 되며, 이는 웹 페이지 구성 요소의 미적 및 시각적 계층 구조를 크게 향상시킬 수 있습니다.
