CSS / Reference / box-shadow
box-shadow는 요소 박스에 바깥 또는 안쪽 그림자를 그립니다. 가로·세로 오프셋은 필수이고 흐림과 확산은 선택 사항입니다. 그림자는 일반적인 레이아웃 공간을 추가하지 않으므로 인접 요소와 겹치거나 잘릴 수 있습니다.
문법과 주요 값
| 속성 | 초기값 | 상속 | 주요 적용 조건 |
|---|---|---|---|
box-shadow |
none | 아니요 | 모든 요소; 실제 그림·텍스트·상자의 존재 조건은 본문에서 확인 |
초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.
.card { box-shadow: 4px 6px 12px 2px rgb(0 0 0 / 25%); }
.inset { box-shadow: inset 0 0 0 3px #006c9c; }
| 값 또는 구분 | 동작과 선택 기준 |
|---|---|
첫 두 길이 |
가로·세로 이동; 음수는 반대 방향 |
세 번째 길이 |
흐림 반경; 음수 불가 |
네 번째 길이 |
확산 거리; 음수로 줄일 수 있음 |
inset |
안쪽 그림자 |
쉼표 |
여러 그림자를 겹쳐 지정; 첫 그림자가 위쪽 |
값과 적용 조건은 MDN box-shadow에서 확인할 수 있습니다.
실행 예제와 결과 비교
아래 전체 코드를 UTF-8 형식의 box-shadow-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>box-shadow 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 200px; height: 100px; padding: 18px; background: #bfe3ff; margin: 14px; }
.target { box-shadow: 4px 6px 12px 2px rgb(0 0 0 / 25%); }
.reference { box-shadow: inset 0 0 0 3px #006c9c; }
</style>
</head>
<body>
<main id="demo">
<h1>box-shadow 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">바깥 그림자</p><div class="target">박스 그림자</div></div><div class="b"><p class="label">inset 안쪽 그림자</p><div class="reference">박스 그림자</div></div></section>
</main>
</body>
</html>
첫 박스는 오른쪽 아래로 흐린 그림자가 생기고 두 번째 박스는 안쪽에 색 띠가 생깁니다. 그림자 때문에 주변 박스의 위치가 자동으로 밀리지는 않습니다.
색과 둥근 모서리
그림자 색을 생략하면 currentColor가 사용되므로 텍스트 색에 따라 결과가 달라질 수 있습니다. 명시적인 알파 색을 사용하면 의도를 읽기 쉽습니다. box-shadow는 border-radius의 모양을 따르지만 이미지 자체의 투명한 윤곽을 따라 그림자를 만드는 필터와는 다릅니다.
잘림과 성능
상위 요소의 overflow: hidden이나 clip 때문에 바깥 그림자가 잘릴 수 있습니다. 큰 흐림 반경과 많은 레이어를 넓은 영역에 반복하면 렌더링 비용이 늘 수 있으므로 필요한 정도로 제한하고 실제 화면에서 확인하세요. 글자 자체의 그림자는 text-shadow를 사용합니다.
한 가지 설정씩 바꾸어 확인하기
앞의 전체 코드를 저장한 예제 파일을 사용합니다. 지정한 선택자의 CSS만 변경하고, 서로 다른 비교 조건을 한꺼번에 바꾸지 않습니다.
- 기존 .target의 그림자에서 흐림 반경 12px만 0으로 바꾸고 다시 복구합니다. 다음에는 확산 2px만 -2px로 바꾸어 영역이 줄어드는지 비교하고 되돌립니다.
- 두 그림자를 쉼표로 지정하면 첫 그림자가 위에 그려집니다. 레이어 순서만 바꾸어 보고, 잘림은 그림자 수치가 아니라 상위 overflow 때문에 생기는지도 확인합니다.
테두리와 그림자를 구성 요소에 함께 적용하려면 테두리, 둥근 모서리, 그림자 만들기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 text-shadow, overflow입니다.
적용되지 않거나 예상과 다를 때
- 그림자가 잘리면 상위 overflow와 박스 주변 공간을 확인합니다.
- none이나 다른 box-shadow 규칙이 덮어쓰는지 확인합니다.
전경색과 currentColor의 연결을 같은 박스에서 확인합니다. 상속, 배경색과의 차이, 대비와 색상 이외의 정보 표시 기준을 설명합니다.
CSS / Reference / background-position
배경 위치의 백분율이 영역과 이미지 크기의 차이에 적용되는 이유를 설명합니다. 동일 영역에서 0·50·100%를 비교하고 위치와 잘림을 조정합니다.
CSS / Reference / background-repeat
repeat·no-repeat·space·round를 같은 타일로 비교합니다. 반복 방향, 타일 간격과 크기 조정, 한 축에 한 타일만 들어가는 조건을 살펴봅니다.
중첩 인용에 사용할 여닫는 부호를 지정하고 문자로 입력한 따옴표와 구분합니다. 인용 깊이, 마지막 쌍의 재사용과 none의 동작을 비교합니다.
넘친 내용을 자르거나 스크롤하는 조건을 비교합니다. hidden과 clip의 scrollTop 차이를 버튼으로 확인하고 축별 계산값과 레이아웃 조건을 설명합니다.
박스 그림자의 위치·흐림·확산·겹침 순서를 조정합니다. 한 값씩 바꾸는 실습으로 그림자가 레이아웃 크기와 상위 잘림에 미치는 관계를 확인합니다.
CSS / Reference / border-width
테두리 두께의 1~4개 값 대응과 실제 외곽 크기를 확인합니다. none·hidden의 계산값과 hover 시 배치 변화, outline 대안을 설명합니다.
사용 중단된 clip의 좌표를 읽고 clip-path의 inset 거리와 비교합니다. 절대 위치 조건과 크기 변경 시 좌표 재계산을 설명합니다.
빈 표 셀의 테두리·배경을 표시하거나 숨기는 방법을 비교합니다. 빈칸의 의미와 상속, separate·collapse 모델의 차이를 함께 확인할 수 있습니다.
CSS / Reference / accent-color
체크박스·라디오·범위·진행률의 기본 강조색을 지정합니다. 레이블과 키보드 조작, disabled·appearance 및 운영체제별 차이를 확인합니다.