Box model

Box model

- margin

- border

- padding

- width x height (content 영역)

 

※ border-radius로 동그랗게 만들어도 그건 여전히 네모난 상자이기에 텍스트가 동그란 모양에 안 맞을 수도 있다. 이건 

   당연한 것이다.

 

---

 

Box sizing

- box-sizing : box의 size를 잡는 방법을 정하는 속성이다.

- box-sizing의 값: content-box, border-box

- <div>에 480px X 480px로 크기를 줬는데, padding값을 줬더니 크기가 달라졌다.

  → 그 이유는 box-sizing : content-box 이기 때문이다. (저것이 모든 요소에 디폴트로 적용된다.)

  → content-box는 위의 사진에서 본 width X height 부분에만 적용된다는 의미이다.

 

- 이럴 때 전체 크기는 520px X 530px 이다.

 

※ border-box로 설정하면 border까지 포함한 크기를 의미한다.

.box {
  box-sizing: border-box;
  width: 480px;       /* border의 너비: content-width, padding-right와 left를 합친 크기 */
  height: 480px;      /* border의 높이: content-height, padding-top와 bottom을 합친 크기 */
  padding: 40px 50px;
}

 

※ 따라서 대부분 CSS를 작업할 때 처음을 이렇게 시작한다.

* {
  box-sizing: border-box;  /* 모든 요소에 이것을 적용 */
}

 

실습 파일: HTML-CSS/CSS/box-sizing/index.html

 

---

 

Display

- box의 스타일을 지정하는 속성이다.

- display의 값 : block, inline, inline-block

 

1. block

- 한 줄 전체를 차지하는 속성이다. (면[영역]이라고 생각하자.) 따라서 세로 배치만 가능하다.

- 만약 block에 width를 주지 않으면, 부모의 content-width=100%을 차지한다.

- 만약 block에 width를 주면 남은 공간은 margin으로 채워서 다른 요소가 오지 못하도록 막는다.

실습 파일01: CSS/box-modle/block.html

 

2. Inline

- 옆으로 쭈르륵 흐르는 성질을 가졌다. (선[흐름]이라고 생각하자.)

- 자리가 모자르면 밑으로 떨어진다. (글쓰기와 똑같다.)

- Inline은 block 모델에서 사용한 속성들(width, height, margin-top, margin-bottom, padding-top, padding-bottom, boder-top, border-bottom) 사용이 불가능하다.

  → Inline은 흐름을 방해하는 속성들이기 때문이다. (padding-right, padding-left, margin-right, margin-left는 된다.)

  → 자리가 부족하면 줄바꿈을 하면 되기 때문이다.

  → margin-top을 하면 적용되긴 하나 화면에 보여지진 않는다. 그래서 이런 건 하지 않는 것이 좋다.

실습 파일02: CSS/box-model.inline.html

 

3. Inline-block

- block과 inline의 속성을 다 가지고 있다.

- block의 속성을 다 사용할 수 있다.

실습 파일03: CSS/box-model/inline-block.html