6.1 box-shadow 속성
CSS에서 box-shadow 속성은 요소에 그림자를 추가하는 데 사용돼. 이 속성을 통해 다양한 시각적 효과를 만들어 웹 페이지의 외관을 개선할 수 있어. 이제 box-shadow의 문법, 값, 사용 예시를 자세히 살펴보자.
box-shadow 문법
box-shadow 속성은 여러 값을 받아, 각각이 그림자의 매개변수를 설정해. 일반적인 문법은 다음과 같아:
element {
box-shadow: offset-x offset-y blur-radius spread-radius color;
}
값:
offset-x: 그림자의 수평 오프셋. 양수는 그림자를 오른쪽으로, 음수는 왼쪽으로 이동시켜줘offset-y: 그림자의 수직 오프셋. 양수는 아래쪽으로, 음수는 위쪽으로 이동시켜blur-radius: 그림자의 흐림 반경. 값이 클수록 그림자가 더 흐려져. 기본값은 0 (흐림 없는 그림자)spread-radius: 그림자의 확장 반경. 양수는 그림자를 크게, 음수는 작게 만들어. 기본값은 0color: 그림자의 색상. 모든 CSS 색상 형식을 지원해
6.2 사용 예시
기본 그림자:
CSS
.shadow-basic {
width: 200px;
height: 200px;
background-color: #3498db;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
margin: 20px;
}
HTML
<body>
<div class="shadow-basic">기본 그림자</div>
</body>
흐림 그림자:
CSS
.shadow-blur {
width: 200px;
height: 200px;
background-color: #2ecc71;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
HTML
<body>
<div class="shadow-blur">흐림 그림자</div>
</body>
확산 그림자:
CSS
.shadow-spread {
width: 200px;
height: 200px;
background-color: #e74c3c;
box-shadow: 10px 10px 20px 10px rgba(0, 0, 0, 0.5);
margin: 20px;
}
HTML
<body>
<div class="shadow-spread">확산 그림자</div>
</body>
내부 그림자:
CSS
.shadow-inset {
width: 200px;
height: 200px;
background-color: #f1c40f;
box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
HTML
<body>
<div class="shadow-inset">내부 그림자</div>
</body>
6.3 box-shadow 설정
box-shadow 설정의 세부 사항:
그림자 오프셋 (offset-x와 offset-y)
- 양수 값: 그림자가 오른쪽 (
offset-x) 및 아래 (offset-y)로 이동 - 음수 값: 그림자가 왼쪽 (
offset-x) 및 위 (offset-y)로 이동
그림자 흐림 (blur-radius)
- 값 0: 그림자가 선명하고 흐리지 않음
- 양수 값: 값이 클수록 그림자가 더 흐려져
그림자 확산 (spread-radius)
- 양수 값: 그림자가 커짐
- 음수 값: 그림자가 작아짐
그림자 색상 (color)
색상은 다양한 형식으로 지정할 수 있어: 색상 이름, 16진수 코드, RGB, RGBA, HSL, HSLA.
내부 그림자 (inset)
inset 키워드는 요소 내부에 그림자를 만들어, 움푹 들어간 효과를 줄 수 있어.
다른 매개변수로 여러 개의 그림자:
CSS
.multiple-shadows {
width: 200px;
height: 200px;
background-color: #bdc3c7;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 15px rgba(0, 0, 0, 0.3);
margin: 20px;
}
HTML
<body>
<div class="multiple-shadows">다양한 그림자</div>
</body>
GO TO FULL VERSION