CSS의 박스모델과 여백 사용법을 알아봅니다.
🖍️ 박스모델
(개발자도구의 computed에서 계산이 완료된 css내용들을 상세히 확인 가능)
- width : 가로너비 / height : 세로너비
- 기본값 : auto (브라우저가 너비를 계산)
- 단위 : px em, vw등
span: 대표적인 인라인요소.
- 특별한 의미 없이 콘텐츠 영역을 설정하는 용도로 사용
- 인라인 요소는 width, height 값을 따로 설정할 수 없음
- 기본값(auto, 포함한 콘텐츠 크기만큼 줄어듦)만 반영됨
div: 대표적인 블록요소.
- 특별한 의미 없이 콘텐츠 영역을 설정하는 용도로 사용
- width, height 값 설정 가능
- 인라인요소와 달리, width의 auto는 부모요소의 크기만큼 자동으로 늘어남
- 세로너비 auto는 포함한 콘텐츠 크기만큼 자동으로 줄어듦
max-width,max-height: 요소가 커질 수 있는 최대 가로/세로 너비
- 기본값 : none (최대너비 제한 없음)
- 단위 : px, em, vw등 단위로 지정 (px로 값을 지정했다면, 요소는 그 이상 커질 수 없음)
min-width,min-height: 요소가 작아질 수 있는 최소 가로/세로 너비
- 기본값 : 0 (최소 너비 제한 없음). 양수에서 제일 작은 단위인 0까지 줄어들 수 있다.
- 단위 :
px,em,w등 단위로 지정 - 자식요소의 min-width가 부모요소의 width 크기를 넘을 때는, 부모요소보다 커질 수 있다.
🖍️ 외부여백 margin
요소의 외부여백(공간)을 지정하는 단축 속성.
-
0: 외부 여백 없음 (기본값) -
auto: 브라우저가 여백을 자동으로 계산 (가로/세로 너비가 있는 요소의 가운데정렬에 활용) -
단위 :
px,em,vw등 단위로 지정
%: 부모요소의 가로너비에 대한 비율로 지정(거의 사용하지 않음) -
개별속성 : 방향을 명시해 지정한 곳에만 외부 여백을 추가 가능.
margin-top / -bottom / -right / -left: 20px ; -
음수 사용 가능 : 아이템이 겹쳐짐
🖍️ 내부여백 padding
요소의 내부여백을 지정하는 단축속성
요소의 content와 테두리 사이에 여백이 생기기 때문에 요소의 크기가 커짐
-
0: 내부여백 없음 (기본값) -
단위 :
px,em,vw등 단위로 지정
%: 부모요소의 가로 너비에 대한 비율로 지정 -
개별속성 : 방향을 명시해 지정한 곳에만 내부 여백을 추가 가능.
padding-top / -bottom / -right / -left: 20px ;
🖍️ 단축속성 사용법
margin, padding 외에도 적용되는 단축속성 사용법
- 전체지정 : 10px; (한번만 입력)
- 각각지정 : 10px 20px 30px 20px; (시계방향 순서로 띄어쓰기 구분해 입력)
- 상하 / 좌우로 나누기 : 10px 20px; (두번 입력)
- 상 / 중(좌우) / 하 로 나누기 : 10px 20px 30px; (세번 입력)
