css와 박스모델
css 박스 모델이란 웹 문서의 내용을 박스 형태로 정의하는 방법
블록 요소와 인라인 요소
블록레벨요소란
태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것을 가리킨다. 대표적으로 h1,div,p 등이 있다.
인라인레벨요소란
콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다. 따라서 한 줄에 인라인 레벨 요소를 여러 개
표시할 수 있습니다. 대표적으로 span,img,strong 태그가 있다.
박스 모델은 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩,박스의 테두리, 그리고 여러 박스 모델 사이의 여백인
마진등의 요소로 구성된다.
콘텐츠 영역의 크기를 지정하는 width, height 속성
박스모델에서 콘텐츠 영역의 크기를 지정할 때 너비는 width, 높이는 height 속성을 사용한다.
이때 속성값은 직접 지정가능한 px,em나 부모요소를 기준으로 하는 백분율 그리고 자동으로 결정하는 auto로 지정할 수있다.
박스 모델의 크기를 계산하는 box-sizing 속성
박스모델의 너비와 높이를 어떻게 결정할 것인지에 따라 border-box와 content-box중에서 선택할 수있다.
border-box:테두리까지 포함해서 너빗값을 지정
content-box:콘텐츠 영역만 너빗값을 지정.기본값
box-sizing =
content-box
border-box
웹 문서 레이아웃을 만들 때는 CSS에서 박스 모델을 사용하는데, 요소의 크기를 쉽게 계산하려면 box-sizing속성을 border-box로 지정해 놓는 것이 좋다.
-같은 너비값을 지정하더라도 border box는 테두리까지 포함한 너비값이므로 content box보다 작아진다.
그림자 효과를 주는 box-shadow 속성
그림자 효과를 주는 속성
기본형
box-shadow: <수평거리> <수직거리> <흐림정도> <번짐정도> <색상> inset
