CSS 박스 모델 1

CSS와 박스 모델

 

블록 레벨 요소

 

• 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소
• 요소의 너비가 100%

        예) <div>, <p> 등

 

 

 

인라인 레벨 요소

 

• 줄을 차지하지 않는 요소
• 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머 지 공간에는 다른 요소가 올 수 있음

       예) <img>, <strong> 등

 

 

박스 모델

실제 콘텐츠 영역, 패딩(padding), 박스의 테두리(border), 그리고 마진(margin) 등의 요소로 구성됨.

 

개발자 도구 창에서 박스 모델 확인 가능!!

 

 

width, height 속성

 

CSS와 박스 모델(display 속성)