CSS 레이아웃 box-sizing 브라우저 크기 계산 안 해도 되는 법

진짜 졸리 자고 싶은데.......

 

울집 고양이가 야리고 있어서 

어절 수 없이 집중해서 정리를 해보겠읍니다.. ^.^

 

 

했다가 쿨쿨자고 아침에 정리하는 클라쓰!

 

이거 알아두면 브라우저 크기 계산 안 해도 됨~~!!~!~  

 

*Box Width (box sizing : content-box - 기본값) 

- widht:800px; padding:100px; border:100px
  real box width : 800(w) + 200(pL:100, pR:100) + 200(bL:100, bR:100) = 1200px

전체 화면에서 그냥 1200px를 차지하는 것 

 

 

* Box Width : 100% 
- width:100% + padding:100px + border:100px = 100%+400px 
이미 100%이기 때문에 400px의 여백이 생기고 스크롤바가 생긴다. 
100% padding, border가 더해지고 contentarea 고정 

 

 

 

* Box Width : auto
- width: auto + padding + border = 100%
padding과 border까지 합쳐서 100%인 것!! 
contentarea 변화 (콘텐트 영역을 줄여서 100%를 맞추는 것)

창의 크기를 늘리든 줄이든 padding과 border는 100px 유지하면서

contentarea의 변화에 맞춤.

 

 

전체 박스가 100%가 아닐 때 사용 

* box-sizing : border-box
- width + padding + border = width
- 기본적으로 이렇다면~

width:80%; padding:100px;  border:100px = 80%+400px
- box-sizing:border-box를 적용 시,

width:80%; padding:100px;  border:100px; box-sizing:border-box = 80%

전체 길이는 80%를 유지하면서 그 안에 padding과 border가 

100px를 유지하는 것!!!!!

 

 

개발자도구 꺼내놓고 브라우저 조절하면 브라우저 크기도 나옴.  

빨간색 표시 참고


box-sizing : content area인 거고
box-sizing : border 하면 width에 border, padding을 더하는 것
※ 브라우저가 박스를 인식하는 방법을 알고 있어야 한다.


* 박스 안의 텍스트 중앙, 가운데 정렬하는 방법 

vertical align은 td, img에만 사용 가능 
박스 안의 글자를 가운데 정렬하고 싶다면
line height를 박스의 크기만큼 주면 됨.
하지만 글씨 위에 여백이 조금 있기 때문에
살짝씩 조정이 필요할 수는 있다. 

* margin 위 아래 여백이 필요하면 
아랫쪽으로 주는 것이 좋다.
(위는 인터넷 익스플로러에서 안 먹히는 버그가 생김)