CSS 상자 그림자

CSS에서 요소를 디자인할 때 해당 요소의 프레임 주위에 그림자 효과를 만들 것인지 결정할 수 있습니다. 예를 들어 이미지 아래에 그림자가 있는 이미지를 만들 수 있습니다.

CSS box-shadow 속성이 유용할 수 있는 곳입니다. box-shadow 속성을 사용하면 요소 프레임 주위에 그림자 효과를 추가할 수 있습니다. 이 튜토리얼에서는 CSS box-shadow 속성을 사용하여 웹 요소에 그림자 효과를 추가하는 방법을 예제와 함께 설명합니다.

CSS 상자 그림자

box-shadow 속성은 요소에 그림자를 추가합니다. box-shadow 속성은 거의 모든 HTML 요소에 적용할 수 있으며 모서리가 둥근 요소에도 사용할 수 있습니다.

box-shadow 속성의 구문은 다음과 같습니다.

box-shadow: offset-x offset-y blur-radius spread color;

이 구문을 분석하고 각 요소에 대해 논의해 보겠습니다.

offset-x는 그림자의 수평 오프셋입니다(필수).
offset-y는 그림자의 수직 오프셋입니다(필수).
blur-radius는 그림자에 추가된 흐림 효과입니다(선택 사항).
확산은 흐림 효과의 확산 반경입니다(선택 사항).
color는 그림자의 색상입니다(선택 사항, 기본적으로 검은색).

이제 box-shadow 속성의 구문을 알았으므로 작동 중인 속성의 몇 가지 예를 탐색할 수 있습니다. 아래 예제에서는 스타일을 지정하려는 다음 HTML 요소를 사용합니다.

<html>
<div>
	<p>This is a box.</p>
</div>

HTML 요소의 스타일은 다음과 같습니다.

<html>
<div>
	<p>This is a box.</p>
</div>
  
<style>
div {
     height: 100px;
     width: 200px;
     padding: 10px;
     background-color: lightblue;
 }

기본 상자가 표시되는 방식은 다음과 같습니다. CSS 상자 그림자 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

우리의 상자는 너비가 100픽셀이고 높이가 200픽셀입니다. 상자의 내용에는 10px 패딩이 있습니다. 이는 상자 안의 텍스트와 상자 테두리 사이에 10px 간격이 있음을 의미합니다. 또한, 우리의 상자는 하늘색입니다.

수평 및 수직 그림자

box-shadow 속성으로 만들 수 있는 가장 기본적인 그림자는 수평 및 수직 그림자입니다. 다음은 수평 및 수직 그림자가 있는 상자의 예입니다.

<html>
<div>
	<p>This is a box.</p>
</div>
  
<style>
div {
     height: 100px;
     width: 200px;
     padding: 10px;
     background-color: lightblue;
}
div {
	box-shadow: 10px 10px;
}

CSS 상자 그림자 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

코드에서 offset-x 및 offset-y 속성을 지정하고 둘 다 10px로 설정했습니다. 이렇게 하면 위에서 볼 수 있듯이 검은색이고 두 축에서 10픽셀 오프셋되는 그림자가 만들어집니다.

그림자 색상

color 속성을 사용하여 그림자에 색상을 지정할 수 있습니다. 우리의 그림자가 밝은 회색이 되기를 원한다고 가정해 봅시다. 다음 코드를 사용하여 상자 그림자의 색상을 변경할 수 있습니다.

<html>
<div>
	<p>This is a box.</p>
</div>
  
<style>
div {
     height: 100px;
     width: 200px;
     padding: 10px;
     background-color: lightblue;
}
div {
	box-shadow: 10px 10px;
}
div {
	box-shadow: 10px 10px lightgray;
}

CSS 상자 그림자 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

우리 상자에는 이제 밝은 회색 그림자가 있습니다.

그림자 흐림 효과

blur-radius 속성은 그림자에 흐림 효과를 추가하는 데 사용됩니다. 그림자가 3px 흐려지기를 원한다고 가정해 보겠습니다. 그러면 약간 흐려집니다. 이 코드를 사용하여 상자의 흐림을 정의할 수 있습니다.

<html>
<div>
	<p>This is a box.</p>
</div>
  
<style>
div {
     height: 100px;
     width: 200px;
     padding: 10px;
     background-color: lightblue;
}
div {
	box-shadow: 10px 10px;
}
div {
	box-shadow: 10px 10px 3px lightgray;
}

CSS 상자 그림자 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

이 상자는 마지막 예의 상자와 유사하지만 그림자를 자세히 보면 약간 흐려진 것을 볼 수 있습니다.

확산 효과

box-shadow 속성을 사용할 때 그림자에 확산 반경을 추가할 수 있습니다. 이것은 그림자가 모든 방향으로 퍼질 수 있는 정도를 정의합니다. 그림자가 자신 주위에 5px 퍼지도록 하고 싶다고 가정해 보겠습니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.

<html>
<div>
	<p>This is a box.</p>
</div>
  
<style>
div {
     height: 100px;
     width: 200px;
     padding: 10px;
     background-color: lightblue;
}
div {
	box-shadow: 10px 10px;
}
div {
	box-shadow: 10px 10px 5px 5px lightgray;
}

CSS 상자 그림자 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

이 예에서는 그림자가 약간 더 깁니다. 이는 우리가 지정한 확산 반경으로 인해 그림자가 5px 확장되기 때문입니다.

코드에서 지정한 속성은 다음과 같은 방식으로 정렬됩니다.

오프셋-x
오프셋-y
흐림
반경
색상

여러 그림자

box-shadow 속성은 요소에 여러 그림자를 추가하는 데 사용할 수 있습니다. 요소에 여러 그림자를 추가하려면 위의 구문을 사용하고 쉼표를 사용하여 그림자를 구분할 수 있습니다. 다음은 여러 그림자를 만드는 구문입니다.

box-shadow: shadow1, shadow2;

여러 그림자로 작업할 때 오프셋 값은 각 그림자에 대해 달라야 합니다. 그렇지 않으면 그림자가 겹치고 특정 오프셋 값 세트가 할당된 첫 번째 그림자만 나타납니다.

상자 뒤에 밝은 회색과 분홍색 그림자가 모두 있기를 원한다고 가정합니다. 다음 코드를 사용하여 이러한 그림자를 만들 수 있습니다.

<html>
<div>
	<p>This is a box.</p>
</div>
  
<style>
div {
     height: 100px;
     width: 200px;
     padding: 10px;
     background-color: lightblue;
}
div {
	box-shadow: 10px 10px;
}
div {
	box-shadow: 5px 5px lightgray, 5px 5px pink;
}

코드 반환:

그림자 삽입

inset 키워드는 요소 내부에 그림자를 표시하는 데 사용할 수 있습니다. 밝은 회색 그림자가 상자 안에 나타나길 원한다고 가정합니다. 다음 코드를 사용하여 이를 수행할 수 있습니다.

<html>
<div>
	<p>This is a box.</p>
</div>
  
<style>
div {
     height: 100px;
     width: 200px;
     padding: 10px;
     background-color: lightblue;
}
div {
	box-shadow: 10px 10px;
}
div {
box-shadow: 5px 5px lightgray inset;
}

CSS 상자 그림자 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

inset 키워드를 사용하면 위에서 볼 수 있는 것처럼 외부 그림자에서 내부 그림자로 그림자를 변경할 수 있습니다.

박스 그림자 속성

CSS box-shadow 속성과 함께 사용할 수 있는 속성이 많이 있습니다. 다음은 이러한 속성에 대한 참조 테이블입니다.

속성	설명
오프셋-x	수평(x) 축에서 그림자의 오프셋입니다.
오프셋-y	수직(y) 축에서 그림자의 오프셋입니다.
흐림 효과	그림자의 흐림 반경.
색상	그림자의 색상입니다.
확산	그림자의 확산 반경입니다.
삽입	그림자를 내부 그림자로 변경합니다.
상속	상위 요소에서 그림자를 상속합니다.

결론

CSS box-shadow 속성은 HTML 요소에 그림자 효과를 추가하는 데 사용됩니다.

이 자습서에서는 몇 가지 예를 참조하여 box-shadow 속성을 사용하여 사용자 지정 그림자를 만드는 방법에 대해 설명했습니다. 이제 전문 웹 개발자처럼 자신만의 CSS 섀도우를 만들 준비가 되었습니다!