본문 바로가기

CSS Box Model2

CSS box-sizing 프로퍼티 사용법 HTML 요소들의 크기는 Box Model을 따릅니다. 모든 요소들은 사각형 박스 형태로 페이지내에서 자리를 차지하게 됩니다. 이때 상자(Box)는 컨텐츠 영역, 패딩, 보더, 마진의 영역으로 이루어지고 CSS 에서 width 는 컨텐츠 영역 만을 말합니다. 그러므로 실제로 요소가 차지하는 width는 컨텐츠 너비 + (패딩 x 2) + (보더 x 2) + (마진 x 2) 가 됩니다.(x2 는 좌, 우를 모두 포함하기 때문입니다.) Box Model에 대한 자세한 설명은 "CSS Box Model, Element Size, iframe Auto Resize"을 참고 하세요. CSS에서 요소의 너비(width)가 결정되는 방식을 변경할 수 있는 프로퍼티가 box-sizing 입니다. box-sizing 에.. 2018. 9. 30.
CSS Box Model, Element Size, iframe Auto Resize 이번에 알아볼 것은 HTML 페이지를 디자인하고 레이아웃을 만들 때 엘리먼트가 화면에서 어떻게 공간을 차지하는지와 엘리먼트의 크기에 대해 알아봅니다. 그리고 추가적으로 자바스크립트에서 엘리먼트의 사이즈를 알아보는 방법과 iFrame을 사용하는 페이지가 로딩될때 iFrame이 포함하고 있는 컨텐츠에 따라 자동으로 크기를 조정하는 방법을 알아보겠습니다. 1. CSS Box Model 화면에 보여지는 모든 HTML 엘리먼트들은 사각형 박스 모양으로 공간을 차지합니다. 이것은 CSS에서는 Box Model(박스 모델)이라고 합니다. HTML 요소는 실제 컨텐츠를 패딩(Padding), 보더(Border), 마진(Margin)의 세가지 박스가 둘러싸고 있는 모양 입니다. 각각을 알아보면 다음과 같습니다. * Co.. 2018. 4. 17.