CSS3을 사용하여 그림자를 추가하는 방법

이 항목에서는 Windows Internet Explorer 9 및 CSS3(Cascading Style Sheets, Level 3)를 사용하여 레이아웃 요소 바깥쪽이나 안쪽에 그림자를 추가하는 방법을 보여 줍니다. Internet Explorer 9에 새로 추가된 둥근 모서리 지원을 사용하여 만든 모서리 곡선을 그림자가 따라갑니다.이 항목의 내용은 다음과 같습니다.

상자 그림자 옵션 및 구문

그림자는 box-shadow 속성으로 사용할 수 있습니다. 둥근 모서리와 마찬가지로 Internet Explorer 9의 그림자는 매우 강력하며 사용자가 여러 옵션을 지정할 수 있습니다. box-shadow 속성 내 값의 순서는 다음과 같습니다.


box-shadow: hoff voff bd sd color inset;

여기서 hoff는 가로 오프셋, voff는 세로 오프셋, bd는 흐림 거리, sd는 확산 거리, color는 그림자의 색을 나타내며, inset는 그림자가 바깥쪽 그림자가 아니라 안쪽 그림자임을 나타내는 키워드입니다. 처음 두 개의 값은 속성의 필수 값이며 모든 값을 표시된 순서대로 지정해야 합니다. 색이 지정되지 않은 경우 Internet Explorer 9에서는 검정을 그림자 색으로 사용합니다.

여기서는 각 값이 정의됩니다.

  • horizontal offset길이 값은 필수입니다. 그림자가 오른쪽(양수 값) 또는 왼쪽(음수 값)으로 얼마나 확장되는지를 지정합니다. 시각적 설명은 다음 다이어그램을 참조하세요. hoff는 가로 오프셋을 나타내며 20픽셀로 설정되어 있습니다.
  • vertical offset 이 길이 값은 필수입니다. 그림자가 아래쪽(양수 값) 또는 위쪽(음수 값)으로 얼마나 확장되는지를 지정합니다. 시각적 설명은 다음 다이어그램을 참조하세요. voff는 세로 오프셋을 나타내며 20픽셀로 설정되어 있습니다.
상자 그림자, 가로 오프셋 및 세로 오프셋이 지정된 둥근 직사각형
  • blur distance 이 양수 길이 값은 그림자의 가장자리가 얼마나 흐린지, 즉 흐림 시작과 끝 사이의 대략적 길이를 나타냅니다. 값이 클수록 더 흐려집니다. 시각적 설명은 다음 다이어그램을 참조하세요. bd는 흐림 거리를 나타내며 30픽셀로 설정되어 있습니다.
상자 그림자, 흐림 거리가 지정된 둥근 직사각형
  • spread distance 이 길이 값은 그림자 모양이 사방으로 얼마나 확장(양수 값) 또는 수축(음수 값)되는지를 나타냅니다. 이 값은 원본 모양의 크기를 기준으로 그림자가 사방으로 얼마나 확장되어야 하는지를 나타냅니다. 시각적 설명은 다음 다이어그램을 참조하세요. sd는 확산 거리를 나타내며 30픽셀로 설정되어 있습니다. 원본 오프셋 경계 상자 모양이 점선으로 표시되므로 원본 오프셋 상자 경계에서 시작되는 확산을 쉽게 구분할 수 있습니다.
상자 그림자, 확산 거리가 지정된 둥근 직사각형
  • colorCSS 색 값은 그림자의 색을 나타냅니다. 다음 이미지는 앞의 그림과 값이 같지만 끝에 "회색"이 추가된 box-shadow 속성을 보여 줍니다. 동일한 색을 지정하기 위해 이 값을 #808080으로 설정할 수도 있습니다. 16진수 색 값도 지원됩니다.

    중요  CSS3 배경 및 테두리에 대한 W3C(World Wide Web 컨소시엄) 사양에서는 색이 필수라고 지정하지 않았지만 box-shadow 속성(또는 해당 공급업체별 변수)에서 색을 빠뜨리면 브라우저 간 동일한 결과가 생성되지 않을 수 있습니다. 따라서 box-shadow 속성에서 항상 색 값을 지정하는 것이 좋습니다.

상자 그림자, 색이 지정된 둥근 직사각형
  • inset 이 키워드를 사용하면 그림자가 바깥쪽 그림자에서 안쪽 그림자로 변경됩니다. 다음 이미지는 확산 거리 그림(이 섹션의 두 번째 그림)과 같은 값의 box-shadow 속성을 보여 주지만 끝에 inset 키워드가 첨부되었습니다.
상자 그림자, inset 키워드가 지정된 둥근 직사각형

기본 그림자 만들기

가장 간단하면서도 일반적인 그림자는 상자에서 몇 픽셀 확장되고 약간 흐림이 있는 회색 그림자입니다. CSS3을 사용하여 둥근 모서리를 추가하는 방법 항목의 커피 회사 예제에 이 작업을 적용해 보겠습니다. 머리글과 바닥글에 약간의 그림자를 추가하여 시각적으로 장식할 수 있습니다.

CSS3을 사용하여 둥근 모서리를 추가하는 방법에서 수행한 작업 후의 header ID 선택기에 대한 CSS 스타일시트는 다음과 같습니다.


#header {
    padding-top: 10px;
    background-color: #FFFFCC;
    border-top-left-radius: 50px 30px;
    border-top-right-radius: 50px 30px;
}

footer ID 선택기에 대한 CSS는 다음과 같습니다.


#footer {
    font-style: italic;
    color: #999999;
    padding: 10px;
    font-size: 10px;
    clear: both;
    background-color: #FFFFCC;
    border-bottom-left-radius: 15px 25px;
    border-bottom-right-radius: 15px 25px;
}

확산 없이 세로 및 가로 오프셋 5픽셀, 약간의 흐림 5픽셀이 적용된 그림자를 추가하겠습니다. 색은 밝은 회색을 지정할 것입니다. 이 작업을 위해 두 선택기에 모두 다음 줄을 추가합니다.


    box-shadow: 5px 5px 5px lightgray;

box-shadow 속성의 네 번째 값을 지정하지 않으면 확산이 없음을 효과적으로 지정하는 것입니다. 따라서 앞의 줄은 다음과 같습니다.


    box-shadow: 5px 5px 5px 0px lightgray;

두 상자에서 그림자를 지정한 후 머리글의 오른쪽 부분은 다음과 같이 표시됩니다.

상자 그림자가 적용된 후 페이지 머리글의 오른쪽 부분

바닥글의 오른쪽 부분은 다음과 같이 표시됩니다.

상자 그림자가 적용된 후 페이지 바닥글의 오른쪽 부분

그림자를 사용하여 "후광" 효과 만들기

box-shadow 속성의 처음 두 값을 영(0)으로 설정하기만 하면 상자에 "후광" 효과를 적용할 수 있습니다.

예를 들어 CSS3을 사용하여 둥근 모서리를 추가하는 방법 항목에서 커피 회사 예제의 제품 미리 보기를 살펴보겠습니다. product_thumb 클래스 선택기에 대한 CSS는 다음과 같습니다.


.product_thumb {
    clear: left;
    height: 80px;
    width: 80px;
    margin-right: 10px;
    padding: 5px;
    float: left;
    border-width: 1px;
    border-color: #7f7f7f;
    border-style: dashed;
    border-radius: 5px;
}


해당 상자에 그림자를 추가하고 오프셋은 0으로 두겠습니다. 약간의 흐림과 작은 확산(원본 상자 테두리에서 확장하여 흐림을 보기 쉽게 만들기 위해)을 추가하고, 커피 원두의 색을 보완하기 위해 황토색을 지정할 것입니다.


    box-shadow: 0 0 5px 5px sienna;

이렇게 하면 미리 보기가 다음과 같이 표시됩니다.

상자 그림자가 적용된 후 커피 원두 미리 보기 중 하나

안쪽 그림자 만들기

마지막으로, 세로 막대에 안쪽 그림자를 추가하겠습니다. sidebar ID 선택기에 대한 CSS는 다음과 같습니다.


#sidebar {
    font-size: 12px;
    padding: 15px;
    margin: 10px 10px 10px 75%;
    border-style: dashed;
    border-color: #996600;
    border-width: 5px;
    border-radius: 10em 0 5em 2em;
}


새 그림자와 어울리도록 테두리 색과 스타일도 변경하겠습니다. 탐색 모음 링크와 기타 인터페이스 요소를 맞추고, 시각적 연속성을 위해 그림자 색을 머리글 및 바닥글 배경색(#FFFFCC)과 맞추기 위해 border-style 속성을 solid로, border-color 속성을 #663300으로 변경할 것입니다. 따라서 새 선택기는 다음과 같습니다.


#sidebar {
    font-size: 12px;
    padding: 15px;
    margin: 10px 10px 10px 75%;
    border-style: solid;
    border-color: #663300;
    border-width: 5px;
    border-radius: 10em 0 5em 2em;
    box-shadow: 10px 10px 10px #FFFFCC inset;
}


이제 세로 막대가 다음과 같이 표시됩니다. 이미지 크기가 축소되었습니다.

inset 상자 그림자가 적용된 후 레이아웃의 세로 막대

다른 브라우저를 사용하여 그림자 만들기

border-radius 속성(CSS3을 사용하여 둥근 모서리를 추가하는 방법 항목에서 설명)과 마찬가지로 box-shadow 속성도 서로 다른 브라우저 공급업체 및 버전에 따라 다양한 지원 수준을 가지고 있습니다.

다른 브라우저 및 다른 브라우저의 이전 버전과 호환되도록 하는 최상의 방법은 해당 브라우저 공급업체의 웹 사이트를 참조하는 것입니다. 브라우저 및 버전에 따라 공급업체별 접두사와 함께 box-shadow 속성을 단순히 복사할 수도 있습니다. 예를 들어 마지막 섹션의 세로 막대 예제에 대해 다음 선택기는 대부분의 브라우저에서 유사한 결과를 생성합니다.


#sidebar {
    font-size: 12px;
    padding: 15px;
    margin: 10px 10px 10px 75%;
    border-style: solid;
    border-color: #663300;
    border-width: 5px;
    border-radius: 10em 0 5em 2em;
    -moz-border-radius: 10em 0 5em 2em;
    -webkit-border-radius: 10em 0 5em 2em;
    box-shadow: 10px 10px 10px #FFFFCC inset;
    -moz-box-shadow: 10px 10px 10px #FFFFCC inset;
    -webkit-box-shadow: 10px 10px 10px #FFFFCC inset;
}


box-shadow 지원 및 동작을 보장하려면 다음의 브라우저 공급업체 웹 사이트를 참조하세요.

요약

이 항목에서 설명한 변경 작업을 모두 수행하고 다른 브라우저에 대한 공급업체별 속성 이름을 추가한 후 새 페이지 모양을 확인하세요. CSS를 다운로드하려면 링크를 마우스 오른쪽 단추로 클릭하고 다른 이름으로 대상 저장...을 클릭하세요.

이전 버전의 Windows Internet Explorer를 사용하여 그림자 만들기

box-shadow 속성 지원은 Internet Explorer 9의 새로운 기능입니다. Windows Internet Explorer 8 및 이전 버전의 사용자가 볼 수 있도록 레이아웃에 그림자를 추가하려면 웹에서 사용 가능한 대체 솔루션 중 하나를 이용할 수 있습니다.

여기에 표시된 것은 몇 가지 옵션입니다. 링크가 포함된 것이 Microsoft에서 해당 사이트를 보증함을 의미하지는 않습니다.

관련 항목

Contoso 이미지 사진 갤러리
CSS3을 사용하여 둥근 모서리를 추가하는 방법
CSS3을 사용하여 멋진 단추를 만드는 방법
CSS3

 

 

표시:
© 2014 Microsoft