이번에 알아볼 것은 HTML 페이지를 디자인하고 레이아웃을 만들 때 엘리먼트가 화면에서 어떻게 공간을 차지하는지와 엘리먼트의 크기에 대해 알아봅니다. 그리고 추가적으로 자바스크립트에서 엘리먼트의 사이즈를 알아보는 방법과 iFrame을 사용하는 페이지가 로딩될때 iFrame이 포함하고 있는 컨텐츠에 따라 자동으로 크기를 조정하는 방법을 알아보겠습니다.
1. CSS Box Model
화면에 보여지는 모든 HTML 엘리먼트들은 사각형 박스 모양으로 공간을 차지합니다. 이것은 CSS에서는 Box Model(박스 모델)이라고 합니다.
HTML 요소는 실제 컨텐츠를 패딩(Padding), 보더(Border), 마진(Margin)의 세가지 박스가 둘러싸고 있는 모양 입니다.
각각을 알아보면 다음과 같습니다.
* Content - 엘리먼트가 가지는 내용입니다. 텍스트 또는 이미지와 같은 다른 요소일 수 있습니다.
* Padding - 컨텐츠를 둘러싼 사각형 영역 입니다. 패딩은 투명합니다. 그러므로 컨텐츠의 배경색이 보이게 됩니다.
* Border - 패딩 바깥을 둘러싼 사각형 영역입니다. 자신의 색상등 스타일을 가집니다.
* Margin - 보더 바깥쪽을 둘러싼 사각형 영역입니다. 마진도 패딩처럼 투명합니다.
Border는 엘리먼트를 둘러싼 경계를 나타내고, 패딩은 컨텐츠와 보더 사이에 공간을 줄 때 사용합니다. 마진은 엘리먼트들 사이에 공간을 줄 때 사용합니다.
<style>
#bmodel {
width: 300px;
border: 25px solid lightgreen;
padding: 25px;
margin: 25px;
outline: solid 25px orange;
}
</style>
<div id="bmodel">Content</div>
이 예에서는 마진(margin) 영역을 outline 스타일을 사용해서 표시했습니다. 오렌지 색으로 표시된 부분이 마진이 되겠습니다. outline 스타일을 보더(border) 바깥쪽에 모양을 줄 수 있는 스타일이지만 엘리먼트의 크기에는 영향을 주지 않습니다. 즉, outline을 아무리 크게 주어도 다른 요소와의 사이가 벌어지지 않습니다. 크게 주면 다른 요소를 덮게 됩니다.
outline은 엘리먼트의 크기에 영향을 주지 않으므로 엘리먼트가 실제 차지하는 공간을 확인하기 위해 유용하게 사용되어 집니다.
2. Element Size
위의 예에서 <div> 엘리먼트의 전체 너비는 다음과 같습니다.
전체너비 450 = 300(컨텐츠 너비, width)
+ 25 x 2(좌,우 padding)
+ 25 x 2(좌,우 border)
+ 25 x 2(좌,우 margin)
한가지 주의할 점은 IE8 이하 버전에서 width 는 padding과 border를 포함한 값 입니다. 이 문제를 해결하는 방법으로는 문서 타입을 <!DOCTYPE html> 로 설정하는 것이 있습니다.
엘리먼트의 크기는 고정되어 사용될수도 있지만 내부에 포함하는 컨텐츠의 양에 따라 크기가 변하는 경우가 일반적입니다. 이 경우에 엘리먼트의 크기를 알아보기 위해서는 자바스크립트를 사용해서 알 수 있습니다. 엘리먼트의 크기를 알아보는 DOM 객체들의 프로퍼티들을 알아보겠습니다.
* 브라우저 크기 - 툴바와 스크롤바를 포함하지 않음(IE9 이상)
- window.innerWidth;
- window.innerHeight;
* 툴바와 스크롤바를 포함한 윈도우 크기(IE9 이상)
- window.outerWidth;
- window.outerHeight;
* 엘리먼트의 크기 - 패딩 포함(보이는 영역)
- element.clientWidth;
- element.clientHeight;
* 엘리먼트의 크기 - 패딩, 보더, 스크롤바 포함(보이는 영역)
- element.offsetHeight;
- element.offsetWidth;
* 엘리먼트의 전체 너비와 높이 - 패딩 포함(보이지 않는 영역 포함)
- element.scrollWidth;
- element.scrollHeight;
* 마진을 포함한 전체 크기를 알기 위해서는 jQuery를 사용하면 간단히 알 수 있습니다.
- $('#divId').outerHeight(true);
- $('#divId').outerWidth(true);
위에서 보이는 영역과 보이지 않는 영역이라고 하는 것은 엘리먼트의 크기 보다 컨텐츠의 크기가 커서 overflow 가 발생하여 컨텐츠가 스크롤 될때를 말합니다.
3. iframe Auto Resize
iframe의 크기가 src 컨텐츠에 따라 동적으로 변하도록 하는 예입니다. iframe의 onload 이벤트가 발생할때 컨텐츠의 전체크기 (scrollHeight를 사용해서 스크롤되어 보이지 않는 영역의 크기까지)를 구해서 크기를 다시 지정합니다. iframe의 contentWindow 프로퍼티는 iframe요소에 의해 생성된 Window 객체를 반환합니다.
<script>
function resizeIframe(obj) {
obj.style.height = (obj.contentWindow.document.body.scrollHeight + 20)+ 'px';
}
</script>
<iframe src="content.html" name="contentFrame" onload="resizeIframe(this);"></iframe>
예제에서 scrollHeight + 20 해서 임의의값을 더해주고 있는데, 이것은 IE11 이하에서는 크기를 제대로 읽지 못하기 때문입니다. IE Edge와 크롬 같은 브라우저에서는 잘 동작합니다.
이 IE 버그에 대해서는 다음 URL을 참조하세요.
https://support.microsoft.com/en-us/help/2684777/the-scrollheight-property-may-return-incorrect-values-in-internet-expl
'프로그래밍 > HTML, CSS' 카테고리의 다른 글
| CSS - position 프로퍼티 사용하기 (0) | 2018.05.09 |
|---|---|
| CSS - display 와 visibility 프로퍼티 사용하기 (0) | 2018.04.20 |
| IE 6~8 에서 CSS Pseudo class 및 Attribute Selector 지원하기 (0) | 2018.04.09 |
| 반응형 웹에서의 자바스크립트를 반응형으로 사용하기 (0) | 2018.04.09 |
| 반응형 웹을 위한 미디어 쿼리 사용법(CSS media queries) (8) | 2018.04.09 |