CSS Box Model의 이해 box-sizing, box-shadow, overflow, visibility

🗓2020년 02월 28일 ∙ 🖊TutorialPost ∙ ⏳2분

CSS Box Model과 관련된 box-sizing, box-shadow, overflow, visibility 속성을 확인해 보겠습니다.

box-sizing

box-sizing 속성은 기본적인 CSS box model을 대체하기 위해 사용하는 속성입니다. box model은 요소의 너비와 높이를 계산하는 데에 사용되며, 기본적으로 요소의 콘텐츠 크기가 요소의 width 와 height 값이 됩니다.

하지만 실제로 개발을 하다보면, 많은 경우 콘텐츠의 크기가 아닌 padding 과 border 까지 포함한 크기를 요소의 크기로 지정해야 할 경우가 생기게 됩니다. 이럴 경우, box-sizing: border-box 속성을 사용하면 border 까지 요소의 크기에 포함시킬 수 있게 됩니다.

box-sizing: content-box  /* 기본값 : width와 height 속성은 콘텐츠만 포함한다. */
box-sizing: padding-box  /* width와 height 속성은 padding 크기를 포함한다. */
box-sizing: border-box   /* width와 height 속성은 border 까지 포함한다. */
box-sizing: inherit
-moz-box-sizing: border-box;

/* 예시 */
/* 실제 폭은 border 영역을 합친 370px이 됩니다. */
.box {
  box-sizing: content-box;
  width: 350px;
  border: 10px solid black;
};

/* 실제폭은 border가 width, height에 포함되므로 350px이 됩니다. */
.box {
  box-sizing: border-box;
  width: 350px;
  border: 10px solid black;
};

box-shadow

box-shadow 속성은 하나 이상의 그림자(shadow) 효과를 표현하는데 사용됩니다. 만약 그림자가 설정된 요소에 border-radius 속성도 함께 설정되어 있다면, 그림자 역시 둥근모서리를 가지게 됩니다.

기본 용법

box-shadow:  none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
  • inset : 그림자가 엘리먼트 프레임(frame)안쪽에 위치하도록 합니다.
  • offset-x offset-y : 그림자의 위치값을 설정하는 두개의 length 값입니다. 만약 음수값을 줄 경우 그림자가 엘리먼트의 왼쪽(위쪽)에 나타나게 합니다.
  • blur-radius : length 값으로, 이 값이 클수록 더 큰 blur 효과를 나타냅니다.
  • spread-radius : 양수값은 그림자를 확장시키고, 음수값은 축소 시킵니다.
box-shadow: 60px -16px teal;
box-shadow: 10px 5px 5px black;
box-shadow: 3px 3px red, -1em 0 0.4em olive;
box-shadow: inset 5em 1em gold;
box-shadow: 0 0 1em gold;
box-shadow: inset 0 0 1em gold;

overflow

overflow 속성은 요소에 포함된 내용 (content)이 너무 클 때 (즉, 내용을 감싸고 있는 영역보다 커졌을 때), 내용을 잘라낼 지, 스크롤바를 보여줄 지, 혹은 범위를 넘어가게 보여줄 지를 기술하기 위한 속성입니다.

overflow 속성이 효력을 갖기 위해선, 반드시 블록 레벨 컨테이너의 높이(height 또는 max-height)가 설정되어 있거나, white-space가 nowrap으로 설정되어야 합니다.

/* 기본값 : 내용이 잘리지 않음 */
overflow: visible;

/* 내용을 자르고, 스크롤바를 보여주지 않음 */
overflow: hidden;

/* 내용을 자르고, 스크롤바를 보여줌. */
overflow: scroll;

/* 브라우저가 결정하게 함 */
overflow: auto;

/* 전역 값 */
overflow: inherit;
overflow: initial;
overflow: unset;

visibility

visibility 속성을 이용하면 문서의 레이아웃에 영향을주지 않고 요소를 표시하거나 숨길 수 있습니다. 이 속성을 이용하면 요소가 표시 여부에 관계없이 요소에 대한 공간은 유지되게 됩니다.

visibility: visible;

/* 요소를 가림 */
visibility: hidden;

/* table에서 사용 */
visibility: collapse;
SHARE