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 규칙이 덮어쓰는지 확인합니다.
CSS / Reference / caption-side
표 캡션을 위·아래로 배치하면서 첫 요소 자식 위치를 유지합니다. 표 내용과 맞는 제목, 긴 캡션 줄바꿈과 글자 정렬을 확인합니다.
한국어·영문 예문에서 normal·keep-all·break-all의 줄바꿈을 비교합니다. 사용 중단된 break-word와 overflow-wrap의 차이도 구분합니다.
CSS / Reference / list-style-type
목록의 의미를 유지하면서 마커 모양과 번호 표시를 변경합니다. start 속성, 이미지 마커와 단축 속성의 영향까지 예제로 확인합니다.
content-box·border-box의 내용과 외곽 너비를 계산합니다. 여백과 테두리보다 작은 지정 너비에서 생기는 최소 크기 예외도 실습합니다.
같은 공백·탭·개행을 normal·nowrap·pre·pre-wrap·pre-line·break-spaces로 비교합니다. 보존과 접힘, 자동 줄바꿈 및 내부 스크롤의 차이를 확인합니다.
CSS / Reference / accent-color
체크박스·라디오·범위·진행률의 기본 강조색을 지정합니다. 레이블과 키보드 조작, disabled·appearance 및 운영체제별 차이를 확인합니다.
중첩 인용에 사용할 여닫는 부호를 지정하고 문자로 입력한 따옴표와 구분합니다. 인용 깊이, 마지막 쌍의 재사용과 none의 동작을 비교합니다.
긴 단어의 긴급 줄바꿈과 최소 내용 너비를 비교합니다. anywhere·break-word의 min-content 차이와 Flex·Grid에서 필요한 최소 크기 조정을 확인합니다.
CSS / Reference / align-content
Flex 줄 묶음과 Grid 트랙의 공간 배분을 비교합니다. nowrap·wrap, auto 트랙 stretch와 일반 블록의 적용 조건을 별도 실습으로 확인합니다.
italic·oblique의 요청과 실제 글꼴 선택을 구분합니다. 서체 파일, 합성 기울임, 의미 있는 강조와 font 단축 속성의 영향을 확인합니다.