수업 외 내용 추가 정리

box-sizing

종류	설명
border-box	테두리까지 포함해서 너비값을 지정합니다
content-box	콘텐츠 영역만 너비값을 지정합니다

콘텐츠 너비를 정확하게 계산시
- contentb-box로 지정
- box-sizing 속성을 사용하지 않기

box-shadow : <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset

inset : 안쪽 그림자로 그림

border-style

종류	설명
none	기본값(테두리X)
hidden	테두리 감춤
solid	실선
dotted	점선
dashed	짧은 직선
double	이중선 두 선 사이의 간격은 border-width
groove	테두리를 창에 조각한것 처럼 -> 홈이 파인 듯한 입체 느낌
inset	border-collapse : seperate : 창에 박힌것 처럼 border-collapse : collapse : ridge와 동일
outset	border-collapse : seperate : 전체 박스 테두리가 창에서 튀어나온 것처럼 border-collapse : collapse : ridge와 동일
ridge	테두리를 창에서 튀어나온 것처럼 표현

border-width : <크기> | thin | medium | thick

diplay:inline-block vs float : left

- float 사용시 기본 마진과 패딩이 없음. 따라서 요소마다 지정해줘야 함
- float사용이후 clear속성으로 플로팅을 해제해야 함

background-clip : 배경색의 적용 범위를 조절
background-origin : 배경 이미지의 적용 범위를 조절

종류	설명
border-box	박스 모델의 가장 외곽인 테두리까지 (기본값)
padding-box	박스 모델에서 테두리를 뺀 패딩 범위까지
content-box	내용(콘텐츠) 부분에만 적용