CSS 박스속성(Box Property)

CSS 속성중에 박스모델을 구성하는 다양한 속성들 중에 일부를 알아봅니다.

box-decoration-break

CSS3에 추가된 속성으로 컬럼 및 줄바꿈시 테두리와 패딩을 처리하는 방법을 지정한다.

.class {box-decoration-break: slice;}

속성값

• slice : 하나의 테두리와 패딩이 모든 박스에 적용된다.
• clone : 각각의 테두리 및 패딩이 독립적으로 적용된다.

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
미지원	미지원	미지원	미지원	O11

box-shadow

CSS3에 추가된 속성으로 box에 하나 이상의 그림자를 만든다.

div {box-shadow: 10px 10px 5px #888888;}

• offset-x, offset-y, blur, spread, color, inset 순으로 작성한다.
• 여러 개의 그림자 속성을 콤마(,)로 구분하여 적용시킬 수 있다.
• 생략된 길이값은 0이 된다.

속성값

• offset-x : 수평 그림자의 offset 값으로 반드시 필요하다.
• offset-y : 수직 그림자의 offset 값으로 반드시 필요하다.
• blur : 그림자 가장자리를 부드럽게 처리하는 정도를 나타나매 선택적 값이다. 0이면 가장 날카롭게 처리한다.
• spread : 그림자의 크기를 나타내며 선택적 값이다.
• color : CSS 컬러 값을 지정하는 선택적 값이다.
• inset : 안쪽 그림자를 정의하는 선택적 키워드이다.

box-shadow 데모 보기

자바스크립트 문법

object.style.boxShadow="10px 10px 5px #888888"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
IE9+	지원	SF5.1.1	지원	지원

box-sizing

CSS3에 추가된 속성으로 요소에 box-sizing을 지정하면 해당 요소의 패딩과 테두리가 더는 너비를 늘리지 않는다.

.simple {
  width: 200px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.fancy {
  width: 200px;
  padding: 50px;
  border: solid blue 10px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.simple

.fancy

위 두개의 박스 너비는 같다. 패딩과 테두리가 늘어나도 box-sizing이 적용된 요소는 박스 크기를 고정한다.

속성값

• content-box : 내용 위치에 고정한다.
• border-box : 테두리 위치에 고정한다.
• inherit : 부모 요소로부터 값을 상속 받는다.

자바스크립트 문법

object.style.boxSizing="border-box"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
IE8+	지원	SF5.1.1	지원	지원

Firefox는 -moz-box-sizing 과 같이 prefix 를 사용해야 한다.