테두리 관련 CSS - border / box-shadow

테두리 관련 CSS - border 속성

• border 속성은 테두리 스타일을 묶어서 한번에 지정할 수 있습니다.
• 기본형 : border-top : < 두께 > / < 색상 > / < 스타일 >
  border-right : < 두께 > / < 색상 > / < 스타일 >
  border-bottom : < 두께 > / < 색상 > / < 스타일 >
  border-left : < 두께 > / < 색상 > / < 스타일 >
  border : < 두께 > / < 색상 > / < 스타일 >
• border 속성을 지정할 때 두께와 색상, 스타일의 순서는 상관 없습니다.

<style>
    .exam1 {width: 700px; height: 200px; border: 3px solid #ccc; padding: 20px;}
    .exam1 h2 {border-bottom: 2px solid #751303; padding-bottom: 5px; margin-bottom: 30px;}
    .exam1 p {border: 2px dotted #c33c25; padding: 15px;}
</style>      

테두리 관련 CSS - box-shadow 속성

• box-shadow 속성은 이미지뿐만 아니라 div 전체 등 지정하는 것에 따라 그림자 효과를 나타낼 수 있습니다.
• 기본형 : box-shadow : none / < 그림자 값 > [, < 그림자 값 >]; < 그림자 값 > = < 수평 거리 > < 수직 거리 > < 흐림 정도 > < 번짐 정도 > < 색상 > inset
• box-shadow 속성에서 수평 거리와 수직 거리는 반드시 지정해야 하며 기타 속성 값은 옵션이므로 필요할 때만 사용하면 됩니다.
• 그림자 효과는 메뉴 등에 마우스를 올려놓으면 그 부분에만 그람자가 표시되도록 하고 싶을 때도 사용할 수 있습니다.
• 두 개 이상의 그림자를 사용할 경우, 쉼표로 그림자 속성 값을 구분해 나열하면 앞의 그림자부터 차례로 적용됩니다.

속성 값	설명
< 수평 거리 >	그림자의 수평 옵셋 거리(수평으로 얼마나 떨어져 있는지)입니다. 양수 값은 요소의 오른쪽, 음수 값은 요소의 왼쪽에 그림자를 만듭니다. 필수 속성입니다.
< 수직 거리 >	그림자의 수직 옵셋거리(세로로 얼마나 떨어져 있는지)입니다. 양수 값은 요소의 아래쪽, 음수 값은 요소의 우쪽에 그림자를 만듭니다. 필수 속성입니다.
< 흐림 정도 >	그림자의 흐림 정도(blur radius)를 지정합니다. 이 값은 생략하면 0을 기본 값으로 해 진한 그림자를 표시합니다. 이 값이 커질수록 부드러운 그림자를 표시하며 음수 값은 사용할 수 없습니다.
< 번짐 정도 >	그림자의 번지는 정도를 나타냅니다. 양수 값을 사용하면 그림자가 모든 방향으로 퍼져 나가기 대문에 그림자가 박스보다 크게 표시됩니다. 반대로 음수 값은 그림자가 모든 방향으로 축소되어 보입니다. 기본 값은 0입니다.
< 색상 >	그림자의 색상을 지정합니다. 한 가지만 지정할 수도 있고 공백으로 구분해 여러 개의 색상을 지정할 수도 있습니다. 필요한 경우에만 사용하는 옵션 값이며 기본 값은 현재 글자 색입니다.
inset	이 키워드를 함께 표시하면 안쪽 그림자로 글비니다. 필요한 경우에만 사용하는 옵션 값입니다.

<style>
    div {
        width: 200px; height: 100px;
        border: 2px solid #000;
        margin-bottom: 20px;
    }
    .exam2 {box-shadow: 2px -2px 5px 0px #000;}
    .exam3 {box-shadow: 5px 5px 15px 5px gray;}
</style>      

 

참고 : HTML5 + CSS3 웹표준의 정석