[CSS 공부] box-shadow 속성 설정 및 사용 예제

box-shadow 속성은 CSS에서 요소에 그림자 효과를 추가하는 데 사용됩니다. 이 속성은 요소에 깊이와 차원감을 부여하거나 시각적으로 분리된 요소를 강조하는 데 많이 활용됩니다. box-shadow 속성의 특징과 설정의 방법, 그리고 그 사용 예를 살펴 보겠습니다.

`box-shadow` 속성을 사용의 효과

box-shadow 속성은 다음과 같은 경우에 많이 사용됩니다:

요소의 효과 강조: 그림자를 사용하여 요소에 깊이와 입체감을 부여할 수 있습니다. 이는 버튼, 카드, 팝업 창 등의 UI 요소에서 자주 사용됩니다.
시각적인 구분: box-shadow를 이용하여 요소를 주변과 구분짓는 효과를 줄 수 있습니다. 예를 들어, 모달 창이나 드롭다운 메뉴와 같이 다른 컨텐츠로부터 시선을 분리하고 강조할 때 활용될 수 있습니다.
텍스트 읽기 용이성: 밝은 배경 위에 있는 텍스트의 가독성을 높이기 위해 box-shadow 속성을 활용할 수 있습니다. 그림자로 인해 텍스트가 배경으로부터 돋보이게 되어 가독성을 개선할 수 있습니다.
아웃라인 대체: outline 속성만으로는 제한된 스타일링만 가능하지만, box-shadow 속성을 활용하면 보다 다양한 아웃라인 스타일링을 구현할 수 있습니다.

CSS의 `box-shadow` 속성 설정 종류

CSS의 box-shadow 속성은 요소에 그림자 효과를 추가하는 데 사용됩니다. 이 속성은 최대 6개의 값을 가질 수 있습니다:

Horizontal Offset (필수): 그림자가 얼마나 좌우로 이동할지 결정합니다. 양수 값은 그림자를 오른쪽으로, 음수 값은 왼쪽으로 이동시킵니다.
Vertical Offset (필수): 그림자가 얼마나 상하로 이동할지 결정합니다. 양수 값은 그림자를 아래로, 음수 값은 위로 이동시킵니다.
Blur Radius: 선택적인 값이며, 그림자가 얼마나 흐려질지 결정합니다. 값이 클수록 더 많이 흐려집니다.
Spread Radius: 선택적인 값이며, 그림자의 크기를 조절합니다. 양수 값을 사용하면 그림자가 확장되고, 음수 값을 사용하면 축소됩니다.
Color: 선택적인 값이며, 그림자의 색상을 정의합니다.
Inset Keyword: 선택적인 값으로 ‘inset’을 지정하여 내부에 그림자를 생성할 수 있습니다(기본값은 외부에 그림자).

`box-shadow` 속성의 기본 구문(syntax)

box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color inset;

각 값들은 다음과 같이 정의됩니다:

horizontal-offset: 그림자가 수평으로 얼마나 멀리 떨어져 있는지를 지정합니다. 양수 값은 요소의 오른쪽에 그림자를, 음수 값은 왼쪽에 그림자를 생성합니다.
vertical-offset: 그림자가 수직으로 얼마나 멀리 떨어져 있는지를 지정합니다. 양수 값은 요소 아래에 그림자를, 음수 값은 위에 그림자를 생성합니다.
blur-radius(optional): 픽셀 단위로 지정하며, 0일 경우 날카로운 그림자 효과가 나타나고 숫자가 클수록 부드럽고 넓게 퍼진 그림자 효과가 나타납니다.
spread-radius(optional): 만약 주어진다면, 이는 어떻게 그림자가 확장되어야 하는지 결정하는데 사용됩니다. 음수 값을 사용하면, 이는 “그림자 크기”을 줄이는 것입니다.
color(optional): CSS 색상 값을 이용해 원하는 색상을 정할 수 있습니다.
inset(optional): 기본적으로 ‘box-shadow’는 요소의 외부에 위치하지만 ‘inset’ 키워드를 추가하여 내부에 위치한 내부그린 (‘inner shadow’)을 생성할 수 있습니다.

예제:

.box {
    box-shadow: 10px 5px 5px black;
}

위 코드는 .box 클래스가 적용된 요소에 오른쪽으로 10px, 아래로 5px 이동한 검정색(black)그림자를 추가하고 있습니다.

위의 CSS코드를 활용해서 실행코드를 만들어 보면 다음과 같다.

<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>박스모델 box-shadow</title>
	<style>
		div {
			width:200px;
			height:50px;
			margin:30px;
			padding:10px;
			border:2px solid black;
			background:yellow;			
		}
		.box_shadow1 { box-shadow: 0 0 10px; }
		.box_shadow2 { box-shadow: inset 0 0 10px; }
		.box_shadow3 { box-shadow: 5px 5px 10px; }
		.box_shadow4 { box-shadow: -5px -5px 10px; }
		.box_shadow5 { box-shadow: inset 0 0 5px 5px blue; }
		.box_shadow6 { box-shadow: 0 0 5px 5px blue; }
		.box_shadow7 { box-shadow: 10px 5px; }
		.box_shadow8 { box-shadow: 5px -10px; }
		.box_shadow9 { box-shadow: 5px 5px 20px; }
		.box_shadow10 { box-shadow: 0 0 10px 5px; }
		.box_shadow11 { box-shadow: 0 10px 10px -5px; }
		.box_shadow12 { color: red; box-shadow: 0 0 10px 5px; }
		.box_shadow13 { color: red; box-shadow: 0 0 10px 5px blue; }
		.box_shadow14 { box-shadow: -5px -5px 30px 5px red, 5px 5px 30px 5px blue; }

	</style>
</head>
<body>
    <div class="box_shadow1">[1] Basic Drop Shadow</div>
    <div class="box_shadow2">[2] Inner Shadow</div>
    <div class="box_shadow3">[3] Offset Drop Shadow (Bottom Right)</div>
    <div class="box_shadow4">[4] Offset Drop Shadow (Top Left)</div>
    <div class="box_shadow5">[5] Inset Value</div>
    <div class="box_shadow6">[6] No Inset Value</div>
    <div class="box_shadow7">[7] Horizontal Offset Value</div>
    <div class="box_shadow8">[8] Vertical Offset Value</div>
    <div class="box_shadow9">[9] Blur Radius Value</div>
    <div class="box_shadow10">[10] Spread Distance Value</div>
    <div class="box_shadow11">[11] Negative Spread Distance Value</div>
    <div class="box_shadow12">[12] Default Color Value</div>
    <div class="box_shadow13">[13] With Color Value</div>
    <div class="box_shadow14">[14] Multiple Box Shadows</div></div>
</body>
</html>

위의 실행 결과는 아래와 같이 나온다.