CSS Box Shadow Tutorial: 단계별 가이드(+ 예제)

box-shadow CSS 속성에 자체 튜토리얼이 필요한 이유는 무엇입니까? 아래에서 볼 수 있듯이 동시에 여러 값을 취하는 더 복잡한 속성 중 하나이기 때문입니다. 이것은 초보자에게 특히 어려울 수 있습니다.

지금까지 box-shadow 를 올바르게 사용하는 데 어려움을 겪었다면 제대로 찾아오셨습니다. 아래 가이드에서는 이 CSS 속성에 대해 알아야 할 모든 것을 살펴볼 것입니다. 우리는 그것이 하는 일, 구문을 올바르게 사용하는 방법, 멋진 CSS box-shadow 예제, 마지막으로 더 쉽게 작업할 수 있게 해주는 몇 가지 생성 도구에 대해 이야기할 것입니다.

CSS 상자 그림자란 무엇입니까?

지금까지 CSS box-shadow 속성에 대해 알지 못하더라도 웹에서 실제로 작동하는 것을 보았을 것입니다.

위는 야생에서 어떻게 보이는지 보여주는 좋은 예입니다(요점을 만들기 위해 여기에서 약간 늘렸음에도 불구하고). box-shadow 는 기본적으로 이름에서 알 수 있듯이 거의 모든 요소의 프레임에 그림자를 추가할 수 있습니다. 그림자는 정사각형, 직사각형, 원형 ​​또는 타원형이든 앵커의 모양에 따라 달라집니다. 이것은 border-radius 속성을 설정한 경우에도 마찬가지입니다.

웹에서 사람들은 이를 사용하여 다양한 효과를 만들고 아래 box-shadow 예제를 볼 수 있습니다. 지금은 가장 기본적인 수준에서 작동하는 방법에 대해 이야기해 보겠습니다.

기본 상자 그림자 구문

브라우저 개발자 도구를 사용하여 상자 그림자가 있는 요소를 보면 다음과 같은 마크업을 찾을 수 있습니다.

 box-shadow: inset 0 25px 40px 0 rgba(0, 0, 0, 0.3);

좀 복잡해 보이죠?

그러나 걱정하지 마십시오. 이러한 모든 선언이 항상 필요한 것은 아닙니다. 또한 작동 방식을 이해하면 더 이상 처음처럼 혼란스러워 보이지 않습니다.

위에서 볼 수 있듯이 box-shadow 는 최대 6개의 값을 가질 수 있습니다. 하나씩 살펴보겠습니다.

오프셋-x

첫 번째 값은 앵커 요소 측면에서 그림자의 수평 거리입니다. 양수 값은 오른쪽으로 이동하고 음수 값은 왼쪽으로 이동합니다.

px , em , vh 등과 같이 이 값의 길이를 나타내는 모든 일반적인 CSS 데이터 유형을 사용할 수 있습니다. 가장 일반적으로 사용되는 것은 px 및 em 입니다.

오프셋-y

위와 같지만 세로축에 대한 것입니다. 양수 값은 그림자를 요소 아래로 이동하고 음수 값은 위로 이동합니다.

흐림 반경

이것은 상자 그림자의 흐림을 정의합니다. 값이 높을수록 더 흐려집니다. blur-radius 는 또한 모든 일반적인 CSS 길이 명칭을 사용하지만 음수 값은 사용하지 않습니다.

확산 반경

이것은 요소의 높이나 너비를 넘어서는 그림자의 확산을 제어합니다. 길이가 높을수록 퍼짐이 커집니다. 음수를 사용하여 수축을 도입할 수도 있습니다.

색깔

짐작할 수 있듯이 이렇게 하면 모든 일반적인 방법으로 상자 그림자의 색상을 정의할 수 있습니다. 16진수(예: #ededed ) 또는 rgba(예: rgba(46, 182, 142, 0.9) ) 값으로 가장 자주 표시됩니다. 후자는 또한 그림자에 일반적으로 사용되는 불투명도를 제어할 수 있습니다.

색상을 설정하지 않으면 브라우저는 현재 사용되는 텍스트 색상을 사용합니다.

삽입

마지막으로 선언의 시작 부분에 선택적으로 inset 을 추가할 수 있습니다. 이것은 그림자를 그림자에서 요소 내부의 그림자로 변경합니다. 테두리 내부, 배경 위, 그러나 요소 콘텐츠 아래에 나타나므로 예를 들어 텍스트를 덮지 않습니다.

값을 순서대로 사용하기

box-shadow 속성 값이 나타나는 순서는 다음과 같습니다.

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

상자 그림자를 지정하려면 길이 값이 두 개 이상 필요합니다. 브라우저는 자동으로 offset-x 및 offset-y 를 사용합니다. 세 번째를 추가하면 blur-radius 로 해석되고 네 번째는 spread-radius 로 해석됩니다. inset 및 color 은 선택 사항이며 끝 또는 시작 부분에 임의의 순서로 나타날 수 있습니다. 아래 CSS는 모두 동일한 결과를 가집니다.

 box-shadow: 20px 20px 10px 0 inset rgba(0, 0, 0, 0.5); box-shadow: 20px 20px 10px 0 rgba(0, 0, 0, 0.5) inset; box-shadow: inset 20px 20px 10px 0 rgba(0, 0, 0, 0.5); box-shadow: rgba(0, 0, 0, 0.5) 20px 20px 10px 0 inset; box-shadow: rgba(0, 0, 0, 0.5) inset 20px 20px 10px 0; box-shadow: inset rgba(0, 0, 0, 0.5) 20px 20px 10px 0;

여러 상자 그림자 할당

모든 사람이 알지 못하는 것은 동일한 요소에 대해 여러 상자 그림자를 설정할 수 있다는 것입니다. 이를 위해 둘 이상의 값 그룹을 제공하고 쉼표로 구분합니다.

 box-shadow: 20px 20px 10px 0 rgba(0, 0, 0, 0.5), -20px -20px 10px 0 olive;

위의 코드는 다음과 같이 나옵니다.

이것을 사용하여 요소 주위에 선을 만들 수도 있습니다. 이를 위해서는 서로 다른 색상의 여러 그림자를 추가하고 오프셋과 흐림 효과를 0으로 설정하기만 하면 됩니다.

 box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.5), 0 0 0 10px olive;

그 결과 다양한 색상의 윤곽선이 생성됩니다.

이것은 상자 모델 치수에 영향을 미치지 않으므로 상자 그림자는 margin 이나 border 처럼 요소의 전체 크기에 추가되지 않습니다.

브라우저 호환성

box-shadow 에 대한 브라우저 호환성은 실제로 걱정할 필요가 없습니다. inset 및 다중 그림자와 같은 마크업을 포함하여 거의 모든 브라우저에서 허용되는 매우 확립된 CSS 속성입니다.

일부 브라우저의 이전 버전을 지원하기 위해 동일한 값 -webkit-box-shadow 및 -moz-box-shadow 속성을 포함하는 것이 일반적입니다. 그러나 가장 일반적인 브라우저의 최신 버전에서는 더 이상 필요하지 않습니다.

CSS 상자 그림자 예제

다음으로 이 box-shadow 튜토리얼에서 CSS 상자 그림자의 몇 가지 예를 살펴보고 이 속성으로 가능한 것을 볼 수 있습니다. 우리는 표준 응용 프로그램에서 보다 특별한 응용 프로그램으로 이동할 것입니다. 보시다시피 이 응용 프로그램으로 정말 흥미로운 작업을 수행할 수 있기 때문입니다.

버튼에 그림자 추가

버튼은 상자 그림자가 적용된 요소인 경우가 많습니다. 페이지에서 눈에 띄게 만드는 좋은 방법이기 때문입니다. 결국 버튼을 포함하면 일반적으로 사람들이 해당 버튼을 클릭하기를 원합니다. 그렇게 하도록 프롬프트를 표시하기 위해 다음은 상자 그림자로 이를 수행하는 방법에 대한 간단한 예입니다.

함께 제공되는 마크업은 다음과 같습니다.

 box-shadow: 0px 11px 12px rgba(0, 0, 0, 0.2);

소프트 박스 섀도우

상대적으로 부드러운 CSS 상자 그림자를 만들고 싶다면 오프셋을 0 으로 설정하면서 대부분 흐림과 퍼짐으로 작업합니다. 이렇게 하면 그림자가 뚜렷한 모양을 얻지 않고 가장자리 주위에 부드럽게 나타납니다.

위의 효과를 얻으려면 다음 마크업을 사용할 수 있습니다.

 box-shadow: 0 0 50px 10px #999;

이것은 또한 요소의 모든 면에 상자 그림자를 만드는 좋은 방법입니다. 더 뚜렷하게 만들고 싶다면 스프레드를 높이고 흐림의 톤을 낮추고 더 어두운 색상을 사용하면 됩니다.

다중 상자 그림자

마지막 box-shadow 예제는 한 번에 여러 그림자를 사용하기 위한 것입니다. 이것은 다양한 가능성을 제공합니다. 하나는 쿨 페이딩, 여러 단계의 박스 섀도우를 도입할 수 있습니다.

놀랍도록 간단합니다. 오프셋을 균등하게 증가시키면서 동시에 불투명도를 낮추면서 상자 그림자를 서로 위에 쌓기만 하면 됩니다. 그건 그렇고, 많은 상자 그림자를 사용할 때 선언을 하나의 긴 선언보다 별도의 줄에 작성하는 것이 도움이 됩니다. 훨씬 더 쉽게 이해할 수 있습니다.

 box-shadow: 10px 10px rgba(0, 0, 0, 0.4), 20px 20px rgba(0, 0, 0, 0.3), 30px 30px rgba(0, 0, 0, 0.2), 40px 40px rgba(0, 0, 0, 0.1), 50px 50px rgba(0, 0, 0, 0.05);

또한 그 사이에 음수 spread-radius 값이 있는 흰색 상자 그림자를 도입하여 여러 요소가 서로 겹쳐진 것처럼 보이게 하여 이를 더욱 발전시킬 수도 있습니다.

왜 음수 스프레드 값입니까? 그렇지 않으면 흰색 상자 그림자가 그 아래의 그림자를 덮을 것이기 때문입니다. 음수 값은 뒤에 있는 색상이 빛날 수 있도록 축소합니다. 다음은 자신의 웹사이트에 유사한 효과를 도입하려는 경우 필요한 마크업입니다.

 box-shadow: 10px 10px 0px -3px rgba(255, 255, 255), 10px 10px rgba(0, 0, 0, 0.4), 20px 20px 0px -3px rgba(255, 255, 255), 20px 20px rgba(0, 0, 0, 0.3), 30px 30px 0px -3px rgba(255, 255, 255), 30px 30px rgba(0, 0, 0, 0.2), 40px 40px 0px -3px rgba(255, 255, 255), 40px 40px rgba(0, 0, 0, 0.1), 50px 50px 0px -3px rgba(255, 255, 255), 50px 50px rgba(0, 0, 0, 0.05);

여러 CSS 상자 그림자에 대한 마지막 예는 앞서 언급한 오프셋과 흐림을 0 으로 설정하는 방법입니다. 위에서 보았듯이 여러 아웃라인이 있는 요소가 생성되며 이 경우에는 다채로운 아웃라인이 됩니다. 그러나 이것은 각 상자 그림자에 대해 spread-radius 값이 증가하기 때문에 작동합니다.

이것을 직접 시도하고 싶다면 다음과 같이 시작할 수 있습니다.

 box-shadow: 0px 0px 0px 3px red, 0px 0px 0px 6px orange, 0px 0px 0px 9px yellow, 0px 0px 0px 12px green, 0px 0px 0px 15px blue, 0px 0px 0px 18px indigo, 0px 0px 0px 21px violet;

최고의 상자 그림자 생성기

우리가 다루었듯이 box-shadow 는 많은 값을 취합니다. 따라서 원하는 그림자 종류에 도달할 때까지 약간의 시행착오가 필요할 수 있습니다.

이를 쉽게 하기 위해 컨트롤을 사용하고 결과를 즉시 확인한 다음 만족스러운 마크업을 복사할 수 있는 많은 상자 그림자 생성 도구가 있습니다.

다음은 상자 그림자 생성기를 위한 최상의 옵션입니다.

• box-shadow.dev — 이 단일 목적 도구에는 필요한 모든 기능과 최고의 사용자 인터페이스가 있습니다. inset 을 사용하고, 여러 상자 그림자를 만들고, 오프셋을 제어하고, 슬라이더를 통해 흐리게 처리하고, 색상을 수동으로 입력할 수 있습니다. 만족하면 코드 표시 를 클릭하여 CSS 마크업을 복사합니다. 유일한 단점은 이전 브라우저에 대한 코드를 제공하지 않는다는 것입니다.
• CSSmatic 상자 그림자 CSS 생성기 — 위와 유사합니다. 슬라이더를 통해 box-shadow 속성을 제어하고 숫자를 수동으로 입력할 수도 있습니다. 불투명도에 대한 자체 제어 기능이 있습니다. 반면에 다중 그림자에 대한 기능이 없습니다. 얻는 코드 마크업에는 이전 브라우저가 포함되어 있습니다.
• Box Shadow CSS Generator — 색상 선택 기능이 있고 이전 브라우저에 대한 코드도 제공하는 견고한 옵션입니다. 간단한 클릭으로 복사할 수 있습니다. 불투명도 제어가 있지만 그림자를 하나만 만들 수 있습니다.
• CSS3gen CSS3 상자 그림자 생성기 — 또 다른 그림자 생성기. 여기서 멋진 기능은 x 및 y 오프셋 대신 그림자 각도와 거리를 선택할 수 있고 나머지는 도구가 자동으로 수행한다는 것입니다. 어떤 이유로 spread-radius 과 inset 에는 자체 메뉴가 있습니다. 단순히 복사하여 붙여넣을 수 있는 CSS에는 이전 브라우저 세대를 위한 마크업도 포함되어 있습니다.

최종 생각: CSS 상자 그림자

box-shadow 속성은 처음에는 압도적일 수 있습니다. 많은 값을 취하는 속성 중 하나이므로 실제보다 더 복잡해 보일 수 있습니다. 바라건대, 이 CSS box-shadow 튜토리얼이 그 느낌을 진정시켰습니다.

위에서 CSS box-shadow 가 무엇이고 어떻게 작동하는지 살펴보았습니다. 구문, 값 및 함께 작동하는 방식을 설명했습니다. 또한 바로 사용할 수 있는 마크업을 포함하여 실생활에서 CSS 상자 그림자를 사용하는 방법에 대한 여러 예를 살펴보았습니다. 마지막으로, 약간의 도움이 필요한 분들을 위해 많은 작업을 수행할 수 있는 CSS box-shadow 생성기를 나열했습니다.

지금쯤이면 웹사이트에서 이 CSS 기능을 사용할 수 있을 것입니다. 우리는 당신이 그것으로 무엇을 할 수 있기를 기대합니다.

웹사이트에서 CSS 상자 그림자를 어떻게 사용하고 있습니까? 위에서 다루지 않은 흥미로운 사용 사례가 있습니까? 아래 의견에 알려주십시오!