박스 모델
박스 모델은 블록 요소인지 인라인 요소인지에 따라 나열 방법이 달라진다. 블록 요소의 경우 박스 형태를 가지게 되는데, 이렇게 박스 형태인 요소를 '박스 모델(box model) 요소'라고 부른다. 박스모델은 실제 콘텐츠 영역, padding, border, margin 등으로 구성되어 있다.
인라인 요소와 블록 요소에 대해서 정리하고, 박스 모델의 콘텐츠 영역의 크기를 지정하는 방법, padding, border, margin 등 박스 모델의 주요 속성들에 대해서 정리해볼 것이다.
인라인 요소와 블록 요소
인라인 요소
-
인라인 요소는 화면에 표시되는 콘텐츠만큼만 영역을 차지하고, 포함한 콘텐츠의 크기만큼 자동으로 줄어든다.
-
인라인 요소는 가로, 세로의 크기를 지정할 수 없고, 여백을 줄 때는 좌우 여백만 가능하고, 상하 여백은 안된다.
-
인라인 요소는 수평으로 쌓인다.
-
인라인 요소의 자식으로 블록 요소는 넣을 수 없다. 인라인 요소를 글자를 취급하는 요소라고 볼 수 있는데, 글자 안에 상자를 담을 수 없듯이 인라인 요소 안에 블록요소를 담을 수 없는 것이다.
-
대표적인 인라인 요소는
<span></span>가 있다.<span>태그는 본질적으로 아무것도 나타내지 않고 콘텐츠의 영역을 설정하는 용도로 쓰인다.
블록 요소
- 블록 요소는 혼자 너비 100%를 차지하기 때문에 요소가 수직으로 쌓인다.
- 블록 요소는 부모 요소의 크기만큼 가로 너비가 자동으로 늘어나고, 세로 너비는 포함한 콘텐츠의 크기만큼 자동으로 줄어든다.
- 블록 요소의 자식으로 블록 요소, 인라인 요소를 넣을 수 있다.
- 대표적인 블록 요소는
<div></div>가 있다.<div>태그는 본질적으로 아무것도 나타내지 않고 콘텐츠의 영역을 설정하는 용도로 쓰인다.
박스 모델의 주요 속성
콘텐츠 영역
크기 지정
width: 가로 크기 (px, cm, 백분율)height: 세로 크기 (px, cm, 백분율)
<!-- html -->
<div></div>/* css */
div {
width: 500px;
height: 500px;
background-color: #84DFFF;
}요소의 화면 출력
display
- 인라인 요소를 블록 요소처럼 보여지게 하기 위해서는
display속성을 사용하면 된다. display속성은 해당 요소가 화면에 어떻게 보일지를 지정할 때 사용한다.- 속성 값으로는 block, inline, inline-block, flex, grid, none 등이 있다.
img {
display: block;
} /* 인라인 요소를 블록 요소로 */
ul li {
display: inline;
} /* 블록 요소를 인라인 요소처럼 */
ul li {
display: inline-block;
} /* 인라인 요소로 배치하면서 내용에는 블록 요소 속성 지정 */
div {
display: none;
} /* 화면뿐만 아니라 공간 조차 보이지 않음 */박스모델 속성
margin
- 요소의 외부 여백(공간)을 지정하는 단축 속성이다. margin을 통해서 한 요소와 다른 요소 사이의 간격을 조절할 수 있다.
margin: top,right,bottom,left;margin: top,bottom left,right;margin: top left,right bottom;margin: top right bottom left;
p {
margin: 20px; /*top, right, bottom, left 전부 20px*/
margin: 10px 30px; /*상하는 10px, 좌우는 30px*/
margin: 10px 20px 30px; /*상은 10px, 좌우는 20px, 하는 30px*/
margin: 10px 20px 30px 40px; /*상: 10, 오: 20, 하: 30, 왼: 40*/
}- maring의 값으로 음수를 사용할 수 있고, margin 값을 0으로 줄 경우 외부 여백이 없다.
padding
- 요소의 내부 여백을 지정하는 단축 속성으로 요소의 크기가 그만큼 커진다.
padding: top,right,bottom,left;padding: top,bottom left,right;padding: top left,right bottom;padding: top right bottom left;
border
border: 선-두께 선-종류 선-색상;border-style: solid / dashedborder-color: black이 기본 색상이고, transparent는 투명이다.border-width: 테두리 두께 지정border-radius: 모서리를 둥글게 만들어준다. px 단위로 지정.
p {border: 2px solid gray;}
p {border-style: dashed;}
p {border-color: #84DFFF;}
p {border-width: 10px 20px 15px;}
p {border-radius: 20px 70px;}
/*라운딩- 20px 70px 20px 70px 왼쪽 위부터 시계방향으로 돌아감*/box-sizing
box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성이다. 지정한 width, height 값에 맞추고 싶다면 box-sizing: border-box;로 설정해야 된다.
-
box-sizing: border-box;: 요소의 내용 + padding + border로 크기를 계산한다. -
box-sizing: content-box: 기본값으로 요소의 내용(content)로 크기를 계산한다.
CSS에서 볼 게 너무 많다. 그래도 젤 중요하다고 생각되는 부분이니까 좀만 더 힘내야지~
