CSS 팟캐스트 - 017: 그림자
를 통해 개인정보처리방침을 정의할 수 있습니다.
제작할 디자인을 보냈는데 그 디자인에 티셔츠 사진이 있다고 가정해 보겠습니다. 그림자가 있습니다. 디자이너가 제품 이미지가 동적이라고 말합니다. 콘텐츠 관리 시스템을 통해 업데이트할 수 있습니다 그림자도 동적이어야 합니다. 티셔츠 대신 바이저, 반바지, 기타 물품일 수 있습니다. CSS로 어떻게 하면 될까요?
CSS에는
box-shadow
및
text-shadow
속성,
사진이 텍스트가 아니므로 text-shadow
를 사용할 수 없습니다.
box-shadow
를 사용하면 그림자가 주변 상자에 표시됩니다.
아닙니다.
다행히도 다른 옵션이 있습니다.
drop-shadow()
필터
이렇게 하면 디자이너가 요청한 작업을 정확하게 수행할 수 있습니다.
CSS에는 그림자와 관련된 많은 옵션이 있습니다.
각각 다른 사용 사례에 맞게 설계됩니다
상자 그림자
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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;
}
텍스트 음영
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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%);
}
여러 그림자
text-shadow
로 그림자를 원하는 만큼 추가할 수 있습니다.
box-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개의 상자 그림자만 허용됩니다.