박스모델
박스모델 개념 잡기
HTML문서는 여러 개의 태그로 이루어져 있습니다.
HTML문서에서 사용되는 모든 요소는 각각 하나의 박스라고 생각하면 이해하기 쉽습니다.
<div>도 박스고, <span>도 박스입니다. <p>도 박스고 <img>도 박스입니다.
각 요소들이 저마다 하나의 박스인 셈입니다.
<CSS의 HTML 태그의 박스모델 구조도>
박스모델을 가장 쉽게 이해하는 방법은 콘텐츠 부분과 보더 부분, 즉 요소의 경계선 부분을 보는 것입니다.
실제로 패딩과 마진은 여백이 생기는 것 외에는 눈에 띄지 않지만 콘텐츠와 보더는 눈에 보이는 부분이고
색을 주거나 꾸밀 수도 있습니다. 콘텐츠와 보더 사이에 여백을 주고 싶다면 패딩을 주면 됩니다.
CSS로 웹페이지의 디자인을 만들어 가는 작업의 대부분은 이 박스모델을 어떻게 다루느냐에 따라 달렸습니다.
패딩과 마진을 조정하면서 페이지의 전체적인 레이아웃과 세부적인 레이아웃을 잡아 나갑니다.
<p>안녕하세요. p태그를 이용해서 박스모델 하나를 만들었습니다.</p>
<p> 태그의 박스모델 생성
{border : 1px solid #000; ; width : 300px; ; padding : 10px;}
<p> 태그에 검정색 테두리 , 너비를 300px , 양쪽에 10px씩 패딩 적용
자 그럼 둥근 모서리를 갖도록 고쳐볼까요?
{border : 1px solid #000; ; width : 300px; ; padding : 10px; , border-radius : 20px;}
사방에 20px의 값을 준 border-radius 속성이 적용된 모습
'0x01 Programming > 0x013 HTML5&CSS3' 카테고리의 다른 글
# 가상 클래스 (0) | 2012.09.26 |
---|---|
# CSS의 특수 선택자 (0) | 2012.09.19 |
# HTML문서에 CSS를 적용하는 세가지 방법 (0) | 2012.09.18 |
#콘텐츠의 흐름, 블록레벨 요소와 인라인 요소 (0) | 2012.08.27 |
#HTML5의 새로운 요소(hgroup,article,section) (0) | 2012.08.27 |