[css] width, height의 이해
간혹 CSS에서 처리하는 width, height를 이해해놓고도 종종 까먹기도 합니다. 때로는 이러한 CSS 처리방식이 곤혹스럽기도 합니다. 그러나 그러한 것은 자연스러운 것입니다. 왜냐하면 CSS에서 사용하는 height,width는 보통 인지적인 측면에서 인간의 사고와 좀 거리가 멉니다.
우리가 어떠한 내용을 꾸미고 꺼낼때 대충 크기를 정하고 채우는 것에 border, padding, margin이 포함되어 있지.. 내용을 다 만들어 놓고 border, padding, margin을 바꾸는 것은 다시 도화지나 인쇄 프린터 용지나 모니터 화면을 바꾸듯 자연스럽지 않은 것입니다.
위의 그림과 같이 CSS에서 처리하는 width, height는 단지 content 영역이며 border외에 다른 것들이 포함되지 않으며, 레이아웃을 꾸미는 경우, border 및 padding의 조절은 다시 width 및 height를 조절해야하는 만큼 꽤나 번잡합니다. 레이아웃을 테이블로 짜는 이유는 이러한 번잡함을 떠나 확실히 자리 위치를 외곽에서 결정하기 때문에 간편하겠지만 본래 테이블은 이러한 용도로 제시된 것이 아닙니다. address 요소를 단순히 italic 글꼴 용도로 이용하는 것처럼 기괴한 것입니다.
이러한 지적은 본래 마크업 언어의 이해에서 출발합니다. SGML은 전산처리가 발전함에 따라 대량의 처리가 요구되면서 이때 교정기호 사용하듯 마크업을 이용하면 보다 용이해졌기 때문입니다. 그래서 마크업 언어의 본질은 목적에 맞게 정의된 요소의 기능대로 사용하는 것이며 그것이 검색엔진 같은 다른 처리에 도움이 되는 것입니다.
여기에 또다른 처리방식이 있는데 IE 방식이라고 하지만 사실 IE에서 대부분 DTD를 표준모드로 처리하기에 엄밀히 말하여 IE에서 쿼크모드 처리방식입니다. IE의 쿼크모드 처리방식은 border 및 padding 까지 포함됩니다. 오히려 IE의 처리 방식이 인간의 측면에서 이해하기 편합니다. 그러나 웹표준을 염두해야하겠고 더불어 다른 모든 브라우저가 동일하게 처리한다는 아주 큰 장점에 IE 쿼크모드로 문서를 작성한다면 모험이며 말리고 싶습니다.
이러한 width, height 처리에 곤혹스럽고 일단 margin을 포함한 영역을 구별하는 레이아웃을 짠다면, 한개의 팁을 드린 다면 다음과 같이 작성하면 됩니다. 쿼크모드나 표준모드 염두할 필요도 없이 모두 작동됩니다. div 레이아웃을 짜지 못하고 테이블을 사용하는 이유는 제대로 width나 height 계산을 하기 어렵고 앞서 말한 마진 병합 같은 것을 이해하지 못하기에 곤혹스러운 것입니다.
<div>
<div>
<div>
</div>
</div>
</div>
위와 같은 3개의 div가 필요합니다. 이것을 하나의 div 처럼 생각하면 됩니다. width는 가장 밖의 div에 적용시킵니다. 본래 margin으로 예상했던 것은 2번째인 가운데 div의 padding으로 적용시킵니다. border는 가장 내부의 div에 적용시킵니다. 또한 padding도 가장 내부의 div에 적용시킵니다.
이렇게 3개의 div를 이용하면 width 부분에서 복잡하게 계산할 문제가 발생하지 않습니다. 1개의 div내에 3개의 div로 넣을 경우 테두리,패딩, 마진을 계산할 필요도 없으며 3개의 width만 합산해보면 됩니다. 또한 표준모드가 아닌 쿼크모드에서도 브라우저 차이 없이 작동되나 어디까지나 DTD를 적고 표준모드로 작성하는 것이 좋을 것입니다.
사실 width 및 height 계산은 제대로 계산하기 그리 어려운 것도 아니며 제대로 알았다면 문제가 생기지도 않습니다. 그러나...% 단위는 좀 조심이 필요합니다. 요소의 속성이나 display 내지 position 및 float에 따라 content 영역이 아닌 padding을 포함할 수도 있으며, 대상으로 하는 부모 요소가 변경될 수도 있습니다.
첨부파일
|
댓글을 작성하시려면 로그인이 필요합니다.
프로그램
태그 필터 (최대 3개)
전체
개발자
소스
기타
mysql
팁자료실
javascript
php
linux
flash
정규표현식
jquery
node.js
mobile
웹서버
os
프로그램
강좌
썸네일
이미지관련
도로명주소
그누보드5
기획자
견적서
계약서
기획서
마케팅
제안서
seo
통계
서식
통계자료
퍼블리셔
html
css
반응형
웹접근성
퍼블리싱
표준화
반응형웹
홈페이지기초
부트스트랩
angularjs
포럼
스크린리더
센스리더
개발자톡
개발자팁
퍼블리셔톡
퍼블리셔팁
기획자톡
기획자팁
프로그램강좌
퍼블리싱강좌