CSS 팟캐스트 - 017: 그림자
제작할 디자인을 전송받았는데 디자인에 잘린 티셔츠 사진과 음영이 있습니다. 디자이너는 제품 이미지가 동적이며 콘텐츠 관리 시스템을 통해 업데이트할 수 있으므로 음영도 동적이어야 한다고 말합니다. 티셔츠 대신 바이저, 반바지 또는 기타 상품 이미지를 사용할 수 있습니다. CSS로 어떻게 하면 될까요?
CSS에는 box-shadow
및 text-shadow
속성이 있지만 그림은 텍스트가 아니므로 text-shadow
를 사용할 수 없습니다.
box-shadow
를 사용하면 그림자가 티셔츠 주변이 아닌 주변 상자에 적용됩니다.
다행히도 drop-shadow()
필터라는 다른 옵션이 있습니다.
이렇게 하면 디자이너가 요청한 사항을 정확하게 수행할 수 있습니다.
CSS의 그림자에는 다양한 옵션이 있으며, 각각 다른 사용 사례에 맞게 설계되었습니다.
상자 그림자
box-shadow
속성은 HTML 요소의 상자에 그림자를 추가하는 데 사용됩니다.
블록 요소와 인라인 요소에서 작동합니다.
.my-element {
box-shadow: 5px 5px 20px 5px #000;
}
box-shadow
값의 순서는 다음과 같습니다.
- 가로 오프셋: 양수는 왼쪽에서 밀어내고 음수는 오른쪽에서 밀어냅니다.
- 세로 오프셋: 양수는 위에서 아래로, 음수는 아래에서 위로 이동합니다.
- 흐리게 처리 반지름: 값이 클수록 그림자가 더 흐리게 처리되고 값이 작을수록 그림자가 더 선명하게 처리됩니다.
- 확산 반지름 (선택사항): 값이 클수록 그림자의 크기가 커지고 값이 작을수록 그림자의 크기가 작아집니다. 0으로 설정하면 흐리게 처리 반지름과 같은 크기가 됩니다.
- 색상: 유효한 색상 값 정의되지 않으면 계산된 텍스트 색상이 사용됩니다.
박스 그림자를 기본 외부 그림자가 아닌 내부 그림자로 만들려면 다른 속성 앞에 inset
키워드를 추가합니다.
/* Outer shadow */
.my-element {
box-shadow: 5px 5px 20px 5px #000;
}
/* Inner shadow */
.my-element {
box-shadow: inset 5px 5px 20px 5px #000;
}
여러 개의 그림자
box-shadow
를 사용하여 원하는 만큼 그림자를 추가할 수 있습니다.
이를 위해 쉼표로 구분된 값 집합 모음을 추가합니다.
.my-element {
box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue,
inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
}
box-shadow에 영향을 미치는 속성
상자에 border-radius
를 추가하면 상자 그림자의 모양에도 영향을 미칩니다.
이는 CSS가 빛이 비추는 것처럼 상자의 도형을 기반으로 그림자를 만들기 때문입니다.
.my-element {
box-shadow: 0px 0px 20px 5px darkslateblue;
border-radius: 25px;
}
box-shadow
가 있는 상자가 overflow: hidden
가 있는 컨테이너에 있으면 그림자도 이 오버플로를 벗어나지 않습니다.
<div class="my-parent">
<div class="my-shadow">My shadow is hidden by my parent.</div>
</div>
.my-parent,
.my-shadow {
width: 250px;
height: 250px;
}
.my-shadow {
box-shadow: 0px 0px 20px 5px darkslateblue;
}
.my-parent {
overflow: hidden;
}
텍스트 음영
text-shadow
속성은 box-shadow
속성과 매우 유사합니다.
텍스트 노드에서만 작동합니다.
.my-element {
text-shadow: 3px 3px 3px hotpink;
}
text-shadow
의 값은 box-shadow
와 동일하며 순서도 동일합니다.
유일한 차이점은 text-shadow
에는 spread
값과 inset
키워드가 없다는 점입니다.
box-shadow
를 추가하면 상자의 도형으로 잘리지만 text-shadow
에는 잘림이 없습니다.
즉, 텍스트가 완전히 또는 부분적으로 투명하면 그 텍스트를 통해 그림자가 보입니다.
.my-element {
text-shadow: 3px 3px 3px gold;
color: rgb(0 0 0 / 70%);
}
여러 개의 그림자
box-shadow
와 마찬가지로 text-shadow
를 사용하여 원하는 만큼 그림자를 추가할 수 있습니다.
쉼표로 구분된 값 집합 모음을 추가하면 3D 텍스트와 같은 멋진 텍스트 효과를 만들 수 있습니다.
.my-element {
text-shadow: 1px 1px 0px white,
2px 2px 0px firebrick;
color: darkslategray;
}
그림자
이미지의 잠재적 곡선을 따라가는 그림자를 만들려면 CSS drop-shadow
필터를 사용하세요.
이 그림자는 알파 마스크에 적용되므로 이 모듈의 시작 부분과 같이 컷아웃 이미지에 그림자를 추가하는 데 매우 유용합니다.
.my-image {
filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}
drop-shadow
필터는 box-shadow
와 동일한 값을 가지지만 inset
키워드와 spread
값은 허용되지 않습니다. filter
속성에 drop-shadow
값의 인스턴스를 여러 개 추가하여 원하는 만큼 그림자를 추가할 수 있습니다.
각 그림자는 마지막 그림자를 배치 참조점으로 사용합니다.
이해도 확인
그림자에 대한 지식 테스트
아래의 그림자 값 중 box-shadow
에만 고유한 것은 무엇인가요?
inset
요소에 한 번에 13개의 박스 그림자만 허용됩니다.