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;
}
상자 그림자에 영향을 미치는 속성
상자에 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 값은 허용되지 않습니다. drop-shadow 값의 여러 인스턴스를 filter 속성에 추가하여 원하는 만큼 그림자를 추가할 수 있습니다.
각 그림자는 마지막 그림자를 배치 기준점으로 사용합니다.
학습 내용 확인하기
그림자에 관한 지식 테스트
다음 중 box-shadow에 고유한 그림자 값은 무엇인가요?
insetinset는 box-shadow에만 고유한 키워드입니다.각 요소에는 한 번에 13개의 상자 그림자만 허용됩니다.