Box Shadow

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

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

다음은 box-shadow 속성을 사용하는 기본 구문입니다:

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

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

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

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

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

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의 horizontal offset, 5px의 vertical offset, 10px의 blur radius 및 gray 색상의 box shadow를 가집니다. button 클래스를 가진 요소는 2px의 horizontal offset, 2px의 vertical offset, 5px의 blur radius, 2px의 spread radius 및 반투명한 black 색상(rgba(0, 0, 0, 0.5))의 box shadow를 가집니다.

챌린지

쉬움

division(<div>) 및 paragraph(<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)로 설정하세요.

직접 해보기

<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>