CSS Box Model이란?
웹 페이지의 레이아웃을 구성하는 핵심 개념 중 하나로, HTML요소가 화면에서 어떻게 위치하고 크기를 가지는 지를 결정한다. Box Model은 HTML 요소를 둘러싸고 있는 상자(Box)를 의미한다. 이 Box는 크게 네가지로 나눠볼 수 있다.
- Content : 요소의 실제 내용이 표기
- Padding : Content 영역과 Border 영역 사이
- Border : Padding 영역과 Margin 영역 사이
- Margin : 요소와 다른 요소 사이, 간격을 설정
CSS Box Model은 block에만 적용 된다. inline box는 일부 동작만 사용된다.
inline 요소는 width, height, 상하 margin 값이 적용되지 않는다.
width
요소의 가로 크기를 지정한다. 기본값은 auto이다. %나 px,rem,em 등의 단위를 사용하여 크기를 지정할 수 있다.
min-width최소 크기max-width최대 크기
body {
width: 100vw;
}height
요소의 세로 크기를 지정한다. width와 마찬가지로 기본값은 auto이다. %나 px,rem,em 등의 단위를 사용하여 크기를 지정할 수 있다.
padding
요소의 내부 여백을 지정한다. 컨텐츠 영역과 border 영역 사이의 간격을 조절하는 데 사용
아래는 padding 작성방법이다. margin도 동일 하다.
div {
padding: 10px; /* 상하좌우 전체 적용 */
padding: 10px 5px; /* 상하, 좌우 적용 */
padding: 5px 2px 3px 4px; /* 상, 우, 하, 좌 시계 방향 순서로 적용 */
/* top,bottom,right,left 로 따로 적용시켜 줄 수 있다 */
padding-top: 5px;
padding-right: 2px;
padding-bottom: 3px;
padding-right: 4px;
}margin
요소의 바깥쪽 여백을 지정한다. 요소와 주변 요소들 사이의 간격을 조정하는 데 사용된다.
- 예시는 padding과 동일하다.
margin 병합 현상
요소와 요소 사이에 margin-top 혹은 margin-bottom의 공간이 있을 경우 더 높은 값의 마진 값이 적용 되는 현상
- 형제 요소 간 상하 마진이 겹칠 때
- 빈 요소의 상하 마진이 겹칠 때
- 부모 박스 바로 밑 자식 박스의 상하 마진이 겹칠 때
해결 방법은
- 부모 요소에
overflow속성 값을 적용 한다. - 부모 요소에
display: inline-block값을 적용한다. - 부모 요소에
border값을 적용한다. - 부모 요소에
display:flow-root를 사용한다.가장 마음편한 방법은 브라우저 랜더링의 규칙이라 생각하고 병합 현상을 인식하고 그대로 사용하는 것.
border
요소의 테두리를 지정한다. 요소의 경계선을 설정하는 데 사용된다. border는 아래의 속성을 합쳐서 쓸 때 사용된다.
- border-width : 테두리의 두께를 정한다. 단위는
px,em등 혹은thin,medium,thick을 사용할 수도 있다. - border-style : 테두리의 스타일을 지정한다.
solid,dotted,dashed,double - border-color: 테두리의 색상을 지정한다. 값으로는 색상 이름, HEX,RGB, RGBA 등의 값이 올 수 있다.
div {
border: 2px solid black;
}- border-radius : 요소의 모서리를 둥글게 만든다.
div {
border-radius: 10px; /* 전체 적용 */
border-radius: 10px 3px 2px 4px /* 왼쪽 상단, 오른쪽 상단, 오른쪽 하단, 왼쪽 하단 */box-sizing
CSS에서 요소의 크기를 계산하는 방법을 지정하는 속성이다.
- content-box : 기본값, 요소의 너비와 높이는 box 크기 기준으로 고정, padding과 border 미포함
- border-box : 요소의 너비와 높이는 box+padding+border 크기를 기준으로 계산, 크기를 미리 예측할 수 있어서 레이아웃 설계할 때 용이하다.
.box {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid black;
box-sizing: border-box;
}overflow
요소의 컨텐츠가 요소 자체의 크기를 벗어날 때 어떻게 처리할지 지정하는 속성이다.
- visible : 기본값, 요소가 경계를 벗어나도 잘리지 않는다.
- hidden : 컨텐츠가 요소의 경계를 벗어날 때 잘리고, 그 이상은 표시하지 않는다.
- scroll : 컨텐츠가 요소의 경계를 벗어날 때 스크롤바를 사용한다.
- auto : 컨텐츠가 요소의 경계를 벗어날 때 필요한 경우에만 스크롤바를 표시한다.
div {
width: 200px;
height: 100px;
overflow: scroll;
}background
요소의 배경을 스타일링하는데 사용된다.
- background-color : 배경색
- background-image : 배경 이미지
- background-repeat : 배경 이미지의 반복 여부
- background-position : 배경 이미지의 위치 지정
- bakcground-size : 배경 이미지의 크기를 지정
- background-attachment : 배경 이미지의 스크롤 여부
- background : 위의 속성들을 줄여서 사용
div {
background: #fff url('img.png') no-repeat center/cover fixed;
}
div {
background-color: #fff;
background-image: url('img.png')
background-repeat: no-repeat;
backgrond-position: center;
background-size: cover;
background-attachment: fixed;
}이미지를 넣는 방법으론 HTML의
<img>와 CSS 방법이 있다. HTML의<img>태그 사용을 권장한다. 이미지가 별다른 정보 제공의 역할 없이 시각적인 스타일의 기능만을 하거나 최적화를 고려할 정도의 크기가 아니라면 배경을 넣는 것을 권장한다.
box-shadow
box에 그림자 효과를 추가한다.
- offset-x | offset-y | blur-radius | spread-radius | color
div {
box-shadow: 2px 2px 0px 0px #efefef;
}