요즘 자바스크립도 열심히하지만
CSS도 관심이 생겨서 이것 저것 찾아보던중
box-sizing 이라는걸 보게되었는데
레이아웃 잡을때 매우 유용할꺼같다.
box-sizing의 값은 총 4가지다.
- content-box : 콘텐트 영역을 기준으로 크기를 정함
- border-box : 테두리를 기준으로 크기를 정함
- initial : 기본값
- inherit : 부모 요소의 속성값을 상속
위에는 좀 딱딱하게 설명했지만
쉽게 설명하면
1번은 보통 우리가 설정을 안하고 했을때랑 똑같다
2번이 중요한데 padding과 border의 크기를 width와 height 설정한 값에 포함한다?
백번 설명보다 그냥 눈으로 보는게 빠르다.
3,4번은 다른 요소에서도 볼 수 있는거기 때문에 설명은 생략하겠다.
1번 박스는 100px크기 안에 padding 과 border의 크기 값이 포함되서 100px이 된거고
2번 박스는 100px크기 외에 padding 과 border의 크기 값이 추가 되어 118px이 된거다.
IE 6, 7 버전에서는 안돌아 가는게 아쉽지만
이제 IE 하위버전이 점점 사라지는 시점에서는
사용하기 괜찬을꺼 같다.
