[CSS] Box Model

-웹 문서에 텍스트, 이미지, 테이블 등의 요소를 배치하기 위해 사용

-웹 문서의 전체 레이아웃을 정의

-각종 요소들을 원하는 위치에 배치

padding

-padding : 박스의 안쪽 여백 설정

-margin : 박스의 바깥쪽 여백 설정

여백은 pixel(px), point(pt), cm같은 수치단위로 지정

auto=여백을 웹브라우저가 자동 으로 지정, 기본값

border

box-shadow

position

정적 위치 설정( position : static )

-텍스트, 이미지, 표 등을 웹 문서의 흐름에 따라 배치하는 방법

-Block요소는 위에서 아래로 쌓이고, Inline요소는 같은 줄에 순서대로 배치

ex) positon : relative

left : 왼쪽 창벽을 기준(윗 블록 기준x)

top : 바로 위 블록 기준

ex) positon : absolute (내가 원하는 위치에 배치)

ex) position : fixed

right : 오른쪽 창에 붙이기

top : 위쪽에 붙이기

float

overflow

div 사이즈를 정해주지 않으면 너비는 블록 다 꽉참

사이즈가 안정해져있을때 overflow를 사용

overflow : auto 텍스트가 길면 스크롤 달림

사진 크기 만큼 블록이 늘어남, 사진 크기에 맞춰짐