CSS로 그림자에 색상 추가하기
HTML 요소의 그림자에 색상을 지정하려면 CSS의 box-shadow 속성을 사용합니다. 이 속성은 그림자의 가로 오프셋(x), 세로 오프셋(y)과 함께 원하는 색상 값을 함께 설정할 수 있습니다.
box-shadow 속성의 기본 문법
box-shadow: offset-x offset-y blur-radius spread-radius color;
각 값은 다음과 같은 의미를 가집니다.
- offset-x: 그림자를 좌우로 이동시키는 거리
- offset-y: 그림자를 상하로 이동시키는 거리
- blur-radius: 그림자의 흐림 정도(선택 사항)
- spread-radius: 그림자의 확산 크기(선택 사항)
- color: 그림자의 색상
예제
다음 코드를 실행하면 빨간색 배경의 제목(h2) 요소에 초록색 그림자가 적용되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
box-shadow: 10px 10px green;
height: 70px;
background-color: red;
}
</style>
</head>
<body>
<h2>Heading Two</h2>
<p>위 제목에는 그림자가 적용되어 있습니다.</p>
</body>
</html>위 예제에서 box-shadow: 10px 10px green;은 그림자를 오른쪽으로 10px, 아래쪽으로 10px 이동시키고 색상을 초록색(green)으로 지정합니다. 블러(blur) 값이 생략되었기 때문에 그림자의 가장자리가 선명하게 표현됩니다. 부드러운 그림자를 원한다면 블러 값을 추가하여 조절할 수 있습니다.