1 CSS와 박스 모델

블록 레벨 요소와 인라인 레벨 요소

• 블록 레벨 요소 : 태그를 사용해 요소를 삽입했을 때 혼자 한줄을 차지하는 것
• 인라인 레벨 요소 : 한줄을 차지하지않음, 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음.

박스 모델의 기본 구성

• 박스모델 요소 : 웹 문서의 블록 레벨 요소
• 콘텐츠 영역, 패딩(박스와 콘텐츠 영역 사이의 여백), 테두리, 마진(여러박스 모델 사이의 여백)

콘텐츠 영역의 크기를 지정하는 width, height 속성

• <크기> : 너비나 높이의 값을 px이나 em단위로 지정함.
• <백분율> : 박스모델을 포함하는 부모요소를 기준으로 너빗값이나 높잇값을 백분율(%)로 지정함.
• auto : 박스모델의 너빗값과 높잇값이 콘텐츠 양에 따라 자동으로 결정됨. 기본값

박스모델의 크기를 계산하는 box-sizing 속성

• border-box : 테두리까지 포함해서 너빗값을 지정
  • content-box : 콘텐츠 영역만 너비값을 지정함.기본값

박스모델에 그림자 효과를 주는 box-shadow 속성