CSS와 박스 모델

블록 레벨 요소

혼자 한 줄을 차지하는 것이다.
한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 뜻이다.
따라서 블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다.
ex) div, span, p

 

 

인라인 레벨 요소

콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다.
즉 한 줄에 인라인 레벨 요소를 어러 개 표시할 수 있다.
ex) span, img, strong

 

 

박스 모델의 기본 구성

• 콘텐츠 영역(contend) 
• 패팅 영역(padding) : 콘텍츠 영역과 테두리 영역 사이의 여백
• 테두리(border) : 박스의 테두리
• 마진(margin) : 박스 모델 사이의 여백
• * 마진과 패팅은 상하좌우 여백을 조정할 수 있다.

사진 첨부

 

padding

테두리와 콘텐츠 영역간의 여백을 뜻한다.

 

box1에 패딩 값을 설정하므로 테두리와 콘텐츠 영역에 20px의 여백이 생긴 것을 볼 수 있다.

 

 

margin 속성을 사용하여 웹 문서를 가운데 정렬하기

auto : display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정한다.
margin left와 right의 속성값을 auto로 지정하면 가운데 정렬을 할 수 있다.

위아래 마진 20px, 좌우 마진은 자동 계산
margin : 20px auto; 

위아래 마진을 주지 않고, 좌우 마진을 자동 계산시켜줌
margin : 0 auto;