Box Shadow

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 42번째.

CSS에서 box-shadow 속성은 요소의 박스에 그림자 효과를 추가하는 데 사용됩니다. 이 속성을 사용하면 요소가 페이지에서 "튀어나온" 것처럼 보이게 하거나 깊이감과 입체감을 주는 시각적으로 매력적인 효과를 만들 수 있습니다.

box-shadow 속성을 사용하기 위한 기본 구문은 다음과 같습니다:

selector {
    box-shadow: horizontal-offset vertical-offset blur spread color inset;
}

horizontal-offset: 요소로부터 그림자의 가로 거리입니다. 양수 값은 그림자를 오른쪽으로 이동시키고, 음수 값은 왼쪽으로 이동시킵니다.

vertical-offset: 요소로부터 그림자의 수직 거리입니다. 양수 값은 그림자를 아래로 이동시키고, 음수 값은 위로 이동시킵니다.

blur (선택 사항): 그림자의 흐림 반경입니다. 값이 클수록 더 흐릿한 그림자가 생성됩니다. 생략하면 기본값은 0(흐림 없음)입니다.

spread (선택 사항): 그림자의 확산 반경입니다. 양수 값은 그림자를 확장시키고, 음수 값은 그림자를 축소시킵니다.

color (선택 사항): 그림자의 색상입니다. 색상 이름, 16진수 값, RGB 값 또는 HSL 값을 사용하여 지정할 수 있습니다.
inset (선택 사항): 그림자를 외부 그림자(outset)에서 내부 그림자로 변경합니다.

예를 들어:

div {
    box-shadow: 5px 5px 10px gray;
}

.button {
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
}

이 예제에서 모든 <div> 요소는 수평 오프셋 5px, 수직 오프셋 5px, 블러 반경 10px 및 회색 색상의 박스 그림자를 가집니다. button 클래스를 가진 요소는 수평 오프셋 2px, 수직 오프셋 2px, 블러 반경 5px, 확산 반경 2px 및 반투명한 검은색(rgba(0, 0, 0, 0.5))의 박스 그림자를 가집니다.

챌린지

쉬움

디비전(<div>)과 단락(<p>)이 포함된 HTML 문서가 주어집니다. 여러분의 작업은 box-shadow 속성을 사용하여 이 요소들에 그림자 효과를 추가하는 것입니다. 아래 단계를 따르세요:

<div> 요소를 대상으로 하는 CSS 규칙을 작성하세요. box-shadow를 10px 10px 5px gray로 설정하세요.
<p> 요소를 대상으로 하는 CSS 규칙을 작성하세요. box-shadow를 -5px -5px 10px 2px rgba(0, 0, 0, 0.7)로 설정하세요.

치트 시트

box-shadow 속성은 요소에 그림자 효과를 추가합니다:

selector {
    box-shadow: horizontal-offset vertical-offset blur spread color inset;
}

horizontal-offset: 수평 거리 (양수 = 오른쪽, 음수 = 왼쪽)
vertical-offset: 수직 거리 (양수 = 아래쪽, 음수 = 위쪽)
blur (선택 사항): 흐림 반경 (값이 클수록 더 흐릿해짐)
spread (선택 사항): 확산 반경 (양수 = 확장, 음수 = 축소)
color (선택 사항): 그림자 색상
inset (선택 사항): 외곽 그림자 대신 내부 그림자를 생성함

div {
    box-shadow: 5px 5px 10px gray;
}

.button {
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
}

직접 해보기

<html>
<head>
    <title>Box Shadow</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>This is a division with a box shadow.</div>
    <br>
    <p>This is a paragraph with a box shadow.</p>
</body>
</html>