본문 바로가기

0x01 Programming/0x013 HTML5&CSS3

# 박스모델

박스모델




박스모델 개념 잡기


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 속성이 적용된 모습