CSS - border-box, content-box 실무에서는 어떤걸 적용하는가

CSS

 

#1 html 태그의 구성

 

실무에서 사용하는 css는 활용하기에 따라 다르겠지만 기본은 border를 기준으로 한다고 한다.

 

Html 태그들은 모두 “박스” 모델로 이루어져 있다.

 

margin - 박스의 바깥 여백

border - 박스의 기준이 되는 바깥 테두리

padding - 박스의 안쪽 여백

content - 박스의 내용

 

가장 안쪽이 content이고, 가장 바깥이 margin 까지의 순서라고 생각하면 된다.

이것은 모두 박스모양, 네모모양이다.

---

#2 실무에서의 디자이너와의 협업을 위한 팁

 

1)정석 (border-box)

 

디자이너가 디자인 시안을 주면, 디자이너에게 받은 화면의 크기와 일치시켜야 하기때문에

border-box를 사용한다.

border-box는 border가 “고정”이 되고, content의 크기가 변하는 것이다.

왜? 중간에 있는 padding 의 사이즈를 조절해주기 때문이다.

그러면 총 결과물의 크기는 그대로이지만, 그 안에서 content의 크기가 줄어든다.

쉽게 생각했을때, 컴퓨터의 모니터 사이즈는 그대로 있지만, 내용물이

모니터 사이즈에 맞게 맞춰지는 이미지를 생각하면 되겠다.

---

2)content-box 사용시

content는 그대로 머물러 있고

border와 content 사이에 있는 padding을 조절해주게 된다.

그렇기 때문에 총 결과물은 더욱 커진다.

쉽게 생각했을때 모니터의 크기에 해당하는 border가 더욱 커져야 한다.

즉, 정제되어있는 사이즈를 넘어 서야지 된다는 것이다.