CSS의 box-sizing : content-box와 border-box - padding과 border와 width
조영규의 블로그
2014. 3. 2. 01:51 from Develop
이전 세대, 즉 box-sizing이라는 프로퍼티가 있기 전까지의 제 고통을 먼저 느껴보죠.
이 프로퍼티가 얼마나 큰 행복을 가져다 주었고, 삶의 질의 향상(ㅋㅋㅋ)에 기여 하였는지!
1 2 3 4 5 6 7 | <div style="width: 200px; margin: 10px auto;border:1px solid black;"> 1번 박스입니다. </div> <div style="width: 200px; margin: 20px auto; padding: 50px; border-width: 10px;border:solid black;"> 2번 박스입니다. </div> |
이 코드를 실행해보게 되면,
이런 박스가 나오게 됩니다.
이럴 때! 엄청난 멘붕이 찾아옵니다.
분명히 나는 width를 200px로 했는데 말입니다! 왜 이게 이렇지?
그 이유는 바로 다들 아시겠지만.. width외의 프로퍼티들이 실제의 width값을 만드는데 기여하기 때문이지요.
이것을 해결 하기 위해 IE8+ 이후 브라우저들은 box-sizing : border-box를 만들어내게 되요.
CSS를 사용하는 개발자 혹은 디자이너 입장에서 width는 매우 자연스럽게도 실제로 랜더링되는 width를 의미한다고 생각하고 사용하는 경우가 많은데, 이 자연스러움을 지켜주는 방법이죠.
원래는 매우 오랜 기간 동안, 너비값을 정하기 위해 padding과 border등을 고려하여 계산하곤 했어요.
그러나 이젠 그렇게 안해도 된다는 것이죠.
이전 예제와 같은 상자지만 크기가 같죠?
아래 코드를 보세요.
1 2 3 4 5 6 7 | <div style="width: 200px; margin: 10px auto;border:1px solid black;box-sizing: border-box;"> 1번 박스입니다. </div> <div style="width: 200px; margin: 20px auto; padding: 50px; border-width: 10px;border:solid black;box-sizing: border-box;"> 2번 박스입니다. </div> |
다른건 이전 예제와 똑같지만, box-sizing: border-box라는 프로퍼티가 추가되었습니다.
box-sizing에는 border-box외에 content-box도 존재합니다.
이는 기존의 box-sizing과 동일한 방식으로 랜더링을 합니다.
CSS선택자 중 *를 사용해 모든 앨리먼트에 box-sizing을 border-box로 하신다면, 조금 더 직관적인 코딩이 가능해집니다.
'Develop' 카테고리의 다른 글
| nodejs로 Azure(애저) 클라우드 알림 허브 푸시알림 보내기 (0) | 2015.05.20 |
|---|---|
| 우분투 시작시 자동으로 특정 명령 실행하기. (0) | 2015.03.17 |
| 도커란 무엇인가 / Docker 컨테이너 / Docker 이미지 / LXC / 가상화 (0) | 2015.03.09 |
| 브라우저 위치 정보 받아오기 / HTML5 Geolocation API (0) | 2015.01.03 |
| 워드프레스 설치 준비하기 - 우분투와 MariaDB, Apache, PHP와 함께. (0) | 2014.12.31 |
| Pymongo tutorial (파이몽고 사용하기) / pymongo 번역 (0) | 2014.10.29 |
| MongoDB(몽고 디비) 특징 공부하기 / 몽고 DB란 무엇인가? (0) | 2014.10.20 |
| Python MAC에 pypy 설치하기. (0) | 2014.07.18 |
| CSS GENERATOR들 모음 / CSS Maker들 모음(border-radius,text-shadow,font-face,box-sizing,transition,transform,filter,960 grid system) (1) | 2014.03.18 |
| 웹 디자인, 웹 개발시에 유용한 툴(useful tools) 모음 (색 배합,번역글 모음,무료 벡터 소스,무료 이미지,ICON,favicon,png to icon,랜덤 유저 생성) (0) | 2014.03.17 |