CSS3 box-shadow

박스 요소에 그림자 추가하기

텍스트에 그림자 효과를 표현하는 text-shadow 속성과 마찬가지로 CSS3 에는 박스 요소에 그림자를 추가할 수 잇는 방법으로 box-shadow 속성을 제공하고 있습니다.

box-shadow

box-shadow 문법은 text-shadow 문법과 비슷합니다.

box-shadow 문법은 다음과 같습니다.

css

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

첫 번째 값인 inset 은 그림자가 요소의 안쪽에 나타날지 아니면 바깥쪽에 나타나게 할지를 선택할 수 있는 키워드입니다.

별도로 inset 값을 설정하지 않으면 기본 설정 값에 의해 요소 바깥에 그림자가 생깁니다.

inset 다음의 값은 길이를 설정하기 위한 키워드로서 그림자가 박스 요소로부터 가로방향(horizontal), 혹은 세로 방향(vertical)으로 어느 정도의 간격을 두고 나타날지를 결정합니다.

그림자를 나타나게 하려면 이 값들을 반드시 설정해야 합니다.

다음의 값은 블러(blur) 효과의 정도를 설정하며, 이 값 역시 길이로 표현합니다.

그 다음의 값인 spread 는 그림자가 넓게 퍼지는 거리를 설정하기 위한 값입니다.

spread 를 양수인 길이 값을 적용하면 그림자는 요소보다 크게 나타나며 음수를 적용하면 요소보다 작은 그림자가 나타나게 됩니다.

blur 와 spread 는 모두 선택적으로 사용할 수 잇습니다.

마지막으로 color 값을 설정합니다. 웹킷 브라우저에서는 이 값이 필수적이지만 파이어폭스와 오페라에서는 선택적으로 사용할 수 있으며, 별도의 색상을 지정하지 않은 경우에는 검정색으로 표현하게 됩니다.

지금까지 설명한 키워드에 해당하는 값을 적용한 코드는 다음과 같습니다.

See the Pen box-shadow #1 by jaeheekim (@jaehee) on CodePen.

위 스타일 규칙은 요소의 바깥 영역(inset 이 적용되어 있지 않음)에 진한 회색의 그림자를 나타내고, 가로 방향과 세로방향 모두 4px 만큼 이동하고 3px 의 블러 효과를 적용한 것입니다.

box-shadow 속성의 값에 따라서 박스 요소의 그림자가 어떤 차이를 보이는지 확인하기 위해 다음의 코드를 살펴보도록 합니다.

See the Pen box-shadow #2 by jaeheekim (@jaehee) on CodePen.

지금까지 inset 를 지정하지 않은 기본값인 outset 만을 알아보았고 이번에는 inset 키워드를 이용해 보도록 하겠습니다.

inset 키워드가 적용되면 박스의 내부에 그림자를 나타내며 이는 마치 그림자가 박스의 반대편에 뒤집힌 채(flipping) 나타난 것처럼 보이기도 합니다.

즉, inset 이 적용되지 않은(outset으로 설정된) 보통의 그림자는 양의 x,y 값이 적용되어 박스 우측 하단에 그림자가 나타나지만 inset 이 적용되면 박스 좌측 상단에 그림자가 나타나게 됩니다.

좀 더 구체적인 설명을 위해 앞서 사용했던 예제 코드를 그대로 가져와서 각 요소에 inset 키워드를 추가하여 확인해 보도록 하겠습니다.

See the Pen box-shadow inset by jaeheekim (@jaehee) on CodePen.

예제의 실행 결과는 outset 의 그림자 효과였을 때와는 반대로, 즉 거꾸러 놓은 것처럼 보이게 됩니다.

inset 이 적용되는 박스의 내부에서 기존과 반대 방향의 모서리에 그림자가 나타나게 됩니다.

쉽게 이해하기 위해 inset 이 적용된다고 할 때 x, y 축이 바뀐다고 생각하시면 이해하기 수월합니다.

즉, inset 설정시 가로, 세로 방향이 세로, 가로 방향 값으로 바뀌게 되고 세로 방향의 양수값은 왼쪽, 음수값은 오른쪽으로 표현되고 가로방향의 양수값은 상단, 음수값은 하단에 나타나게 됩니다.

Jaehee's WebClub

Web Club