CSS Layout - Box Model

CSS layout: 각 요소의 위치와 크기를 조정하여 웹 페이지의 디자인을 결정

CSS Box Model

모든 HTML 요소를 사각형 박스로 표현하는 개념

> content, padding, border, margin으로 이루어짐

CSS Box Model

margin : 이 박스와 다른 요소 사이의 공백, 가장 바깥쪽 영역

border : 콘텐츠와 패팅을 감싸는 테두리 영역

padding : 콘텐츠 주위에 위치하는 공백 영역

contetnt : 콘텐츠가 표시되는 영역

Box 구성

box-sizing 속성

width와 height는 content를 기준으로 하기에 실제 박스 너비와는 차이가 있음

*{
  box-sizing: content-box;
}

이게 default인 컨텐츠 기준으로 박스 크기가 됨

*{
  box-sizing: border-box;
}

이것이 우리가 원하는 border기준으로 박스 크기가 됨

 

Box type

Block type

CSS를 적용하지 않았을 때 Block Direction(아래 방향)으로 배치됨

내용이 끝나는 지점에서 content가 끝나는게 아니라 모두 차지함

즉 width를 지정하지 않으면 box는 inline 방향으로 사용 가능한 공간을 모두 차지함

ex) h1~h6, p, div

.index{
  display: block;
}

inline type

새로운 행으로 나뉘지 않음

width, height를 사용 못 함

수직 방향(위아래)으로 padding, margins, borders를 적용할 수는 있지만 다른 요소를 못 밀어냄

수평 방향(좌우)으로는 다른 요소를 밀어냄

ex) a, img, span

cf) img는 수직 방향도 밀어냄

inline type

    img {
      border: 3px solid red;
      padding-right:100px;
      padding-top:100px;
    }

 

CSS에서 배치는 영역을 다루는 것이다보니 "정렬의 주체"가 아닌 margin의 위치를 보는 것이니 주의하기

속성에 따른 수평 정렬

기타 display

inline-block

inline과 block 중간 지점을 제공하는 display

요소의 줄 바꿈은 싫지만, 너비와 높이를 적용하고 싶을 때 사용

ex) inline-block을 통해 좌우로 div를 배치하고 가운데에 정렬하고 싶다

inline-block , center

    .box {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: #4CAF50;
      margin: 10px;
    }

    .container {
      text-align: center;
    }

 

none

요소를 화면에 표시하지 않고, 공간조차 부여되지 않음

필요에 의해 div를 아예 없애고 공간을 지우고 싶을 때 사용

 

shorthand

border

width, style, color를 한 번에 설정하며, 3개의 순서는 상관없음

margin, padding

4방향의 속성을 한 번에 지정 가능

4개 작성 : 상 우 하 좌

3개 작성 : 상/좌우/하

2개 작성 : 상하/좌우

1개 작성 : 공통

margin collapsing(마진 상쇄)

두 block에서 margin top과 bottom이 만나면 더 큰 margin으로 결합됨

레이아웃을 더욱 쉽게 관리하기 위함