[생활코딩] CSS Box model

 

 

<h1> 태그와 같이 제목으로 지정된 태그는 화면 전체(좌에서 우 끝까지)를 차지하고,

<a> 태그와 같이 화면 전체를 차지하지 않아 줄바꿈이 되지 않는 태그도 있다.
왜 이렇게 각 태그가 차지하는 공간이 다를까?
그 이유는 각 태그마다 차지하는 공간의 크기가 다르게 기본값이 설정되어있기 때문이다.

 

block level element & inline element 

 

화면 전체를 쓰는 태그를 block level element 라고 한다.
하지만 display: inline 속성을 추가하여 컨텐츠 크기만큼으로 변환할수도 있다.

자신의 컨텐츠 크기 만큼 화면의 부분만을 쓰는 태그를 inline element  라고 한다.
하지만 display: block 속성을 추가하면 화면 전체크기만큼으로 변환할 수 있다.

콤마를 활용하면 중복을 줄이면서 같은 코드를 같은 곳에 적용할 수 있다. 
예시) 
h1{ border-width:5px; border-color:red; border-style:solid; } 
▶ h1, a{ border: 5px solid red;} 

 

태그가 차지하는 공간 수정하기 

"display: inline, block, none"  태그가 차지하는 크기를 조절
"padding: --px"  태그와 문자 사이 여백을 조절
"margin:--px"  태그와 다른 태그 사이의 간격을 조절 
"width:--px"  너비를 조절
"height:--px"  높이를 조절. 

이처럼 CSS 속성을 통해 태그가 차지하는 공간을 자유롭게 수정할수 있다. 
예시) 
h1{ padding: 20px; margin:0px; width100px; } 

**개발자도구를 보면 모든 웹의 박스모델을 확인해볼 수 있다.