---

Box 모델

우리가 흔히 사용하던 <div> <p> 가 contents라고 생각하면 된다.

margin

테두리(border 외의 여백을 줄 수 있는 것)

margin collapse (margin 상쇄)

• margin을 넣어도 여백이 합쳐지는 현상

padding

- margin과 동일 하다.

Padding은 Margin처럼 상쇄가 일어나지 않는다.

% 사용시 margin과 동일하게 Parents가 되는 것이 기준이다.

1) 인접 형제

html

      <div class="box"></div>
      <div class="box"></div>
      <p>

      </p>
      <div class="box2"></div>
      <div class="box2"></div>

css

/*margin 넣은 후*/
.box{
  width: 150px;
  height: 150px;
  background-color: tomato;

  margin : 20px;
}

/*margin 넣기전*/
.box2{
  width: 150px;
  height: 150px;
  background-color: tomato;
}

아래는 margin을 넣지 않은 2개의 box 형태이고, 위는 margin을 넣은 2개의 box 형태이다. margin collapsing이 일어나지 않으면 두 박스 사이의 거리가 20px+20px=40px가 되어야하지만, 20px로 상쇄되었다.

2) 부모-자식 요소 간

      <div id=parent>
        <div id=child></div>
      </div>

#parent{
  width: 350px;
  height:350px;
  background-color: cadetblue;

  margin-top:30px
}

#child{
  width: 200px;
  height: 200px;
  background-color: orange;

  margin-top:40px
}

부모에게만 padding을 적용했을 때 margin이 상쇄되어 더 큰 40px로 한번에 들어가게 된다.

만약, padding 혹은 border가 1px이라도 들어가면 일어나지 않는다.

3) 빈 블록

border

border-style

border-style: dotted solid;

margin, padding과 동일하게 dotted는 위 solid는 아래쪽에 들어간다.

border-width (border 두께)

border-width : 10px

테두리의 두께를 의미한다. (만약 border-style이 none이라는 의미가 없다.)

한 줄에 쓸 수 있는 short hand가 존재한다.

border: solid; 
/* 스타일*/
border: solid 2px;
/* 스타일, weight*/

순서가 따로 없기 때문에 알아서 작성하면 된다.

만약, solid로 설정하면 border에 속하지만 두께는 border에 속하지 않는다.

border-radius (둥근 테두리)

border-radius : 10px

border-radius를 통해 둥근 테두리를 만들 수 있다.
만약 퍼센트를 사용하면 height 의 %, weight의 %로 계산이 된다

border-radius : 50px 10px 30px 20px

로 네 꼭짓점의 모양을 따로 지정할 수 있다.

box-sizing

border 안쪽이 padding 바깥쪽이 margin이다.
box-sizing은 요소의 너비와 높이를 계산하는 방법이다.

border-box와 content-box의 차이점

.box{
    width:300px
    height:200px
}

박스요소 안에 text를 추가하면 border 전체 가로가 300 세로가 200이다.
border을 solid로 30px를 추가하면 전체 box 크기가 330px로 보인다.
border까지 추가하면 전체 크기가 커질 수 밖에 없다.

.box{
    width:300px
    height:200px
    box-sizing : border-box
}

content-box가 기본값이고, border-box를 설정하면 border까지 width로 인식한다.

*{
	box-sizing : border-box
 }

로 맨 위에 선언해서 많이 사용한다.