박스 그림자

Coddy HTML 여정의 CSS로 스타일링하기 섹션에 포함된 레슨. 76개 중 42번째.

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

다음은 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이고 gray 색상인 box shadow가 적용됩니다. button 클래스를 가진 요소에는 가로 오프셋이 2px, 세로 오프셋이 2px, 흐림 반경이 5px, spread 반경이 2px이고 반투명한 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>