- CSS 박스 모델
- 크기 단위 : %,em(배수 단위),px, 1배=1em=100%
- em이나 %를 중복해서 사용하게 된다면 부모태그의 값 * 자식태그의 값을 해야 한다.
예를 들어 div에는 200%, 안의 p에 100%를 했다면 p의 크기는 100%가 아닌 2*1=2인 200%가 된다. - rem : root(html/body-사실상 제일 위)를 기준으로 글자크기를 작성한다. 그래서 부모태그와 자식태그의 개별적용이다.
- 크기(demension) : 가로(width),세로(height), min-(최솟값), max-(최댓값)
height의 경우 max 크기를 넘게 컨텐츠가 작성되면 튀어나온다 - 박스 모델 : 모든 HTML(컨텐츠/padding/border/margin)
모델이름-방향(상하좌우)-특정스타일(굵기,선종류 등) 처럼 안으로 들어가면 갈수록 세부설정이 가능하다- padding : 내용(컨텐츠)과 테두리(border) 사이의 간격. background-color 속성으로 설정하는 배경색의 영향을 받음
축약표현은 top,right,bottom,left 순으로 설정 - border : 내용과 padding을 감싸는 테두리
groove,ridge,inset,outset,none,hidden
transparent : hidden 부분에 한쪽으로 깎은듯한 모양으로 남긴다 - margin : 테두리(border)와 이웃하는 요소 사이의 간격
배경색의 영향을 받지 않음. 축약도 동일
inherit : margin 값들을 부모로부터 받음(예로 a태그에서 입력했다면 body가 부모)
auto : p 태그의 경우 수평 중앙에 맞춰준다. - 태그의 크기 = 컨텐츠 크기+padding 크기+border 크기+margin 크기
- box-size:border-size인 경우
width,height 값 = 컨텐츠 값+padding 값+border 값 이다.
크기값이 중요한 경우 채택한다. - box-size:content-size인 경우
width,height 값 = 컨텐츠 값 이다.
- box-size:border-size인 경우
- padding : 내용(컨텐츠)과 테두리(border) 사이의 간격. background-color 속성으로 설정하는 배경색의 영향을 받음