박스 모델이란?
박스 모델
- content : 콘텐츠가 표시되는 영역
- padding : 콘텐츠와 테두리 사이의 여백
- border : padding과 margin 사이의 테두리
- margin : 가장 바깥족 레이어로 콘텐츠, 패딩, 테두리를 둘러싸면서 해당 박스와 다른 요소 사이 공백 역할
width
- 속성의 너비를 설정, 기본값 auto, 상속 x, block 요소에만 적용 가능
height
- 속성의 높이를 설정, 기본값 auto, 상속 x, block 요소에만 적용 가능
max-width / min width
- 너비의 최소 / 최대 값 지정, 반응형 화면 구성에 이용
max-height / min height
- 높이의 최소 / 최대 값 지정
margin
- margin : top right bottom left 의 시계방향 순 적용
- % 사용시 부모의 width의 백분율을 가짐
margin collapsing
마진 상쇄, 마진 겹침, 마진 중복 등으로 불린다.
- 여러 블록 요소들의 위/아래 margin이 경우에 따라 가장 큰 크기를 가진 margin으로 결합되는 현상
1. 인접 형제
- 두 형제 요소의 위/아래 여백이 만나 상쇄된다.
2. 부모-자식요소 간
- 부모 블록에 border, padding, inline content가 없어서 부모와 자식의 margin-top이 만나는 경우
- 자식 부모 요소 중 큰 마진 값을 값으로 가짐
빈 블록
- border, padding, content가 없고, height가 존재하지 않으면 해당 블록의 마진 top,bottom이 상쇄된다.
padding
- CSS 요소의 안쪽 여백을 생성하는 속성
- padding : top right bottom left 시계방향 적용
- % 퍼센트는 margin과 마찬가지로 부모 블록 너비( width )의 백분율 사용
border
- 마진과 패딩의 사이에 존재, 기본값 = 0 보이지 않는다.
- border-style : none, solid, dash, dotted 시계방향 적용
- border-width : 값 또는 thin, medium, thick 시계방향 적용
- border-color : 테두리의 색상 시계방향 적용
- border : width style color 세 속성을 한번에 작성하여 적용 style을 생략할 경우 none이라 적용 x
- border-radius : <length> 시계방향 테두리의 꼭짓점을 둥글게 만들어주는 속성, %로 사용시 타원형 적용 가능
box-sizing
- 요소의 너비와 높이를 계산하는 바업을 지정하는 속성
- 기본값 : content-box -> content 값의 너비 높이만을 의미
- border-box -> content + border + padding의 전체 크기를 의미, 사람이 인지하고 사용하기 편리
