![[CSS] 레이아웃과 박스 모델](/_next/image?url=https%3A%2F%2Fblog.huns.site%2Fimgs%2Fthumbnails%2Fblog%2Fposts%2Ffrontend%2Fstyle%2Fcss.png&w=1200&q=75)
TOC
박스 모델
- HTML 태그가 겹쳐져 여러 박스를 구성한다.
*html 파일
<!DOCTYPE html>
<html lang="ko">
<head>
<title>box model</title>
<link ref="stylesheet" href="CSS문서명.css" />
</head>
<body>
<div id="box_model">
<span>Hello World</span>
</div>
</body>
</html>
* css 파일 #box_model {
width: 300px;
height: 300px;
background-color: yellow;
border: solid 20px red;
margin-left: 50px;
padding-left: 50px;
}
- width/height : content 영역의 크기를 의미
- border : 테두리를 의미
- padding : 테두리와 content 영역 사이의 공간
- margin : 테두리 외부의 공간
- 이 각각의 요소들에 대한 자세한 설명은 아래에서 하도록 한다.
박스 모델의 4가지 요소
- 박스 모델에는 박스의 크기와 간격을 정의하는 요소로 margin, border, padding, content 속성이 있다.
가. margin 속성
- 테두리(border) 속성을 기준으로 바깥쪽 영역
- 배치 작업에서 좌표를 설정할 때 사용
margin - top/right/bottom/left 설정 한 줄로 정리할 수도 있다.
* css 파일 #box_model {
/* 12시를 기준으로 시계 방향으로 top, right, bottom, left 속성 의미 */
margin: 40px 30px 20px 10px;
}
그리고 위의 코드의 출력은 아래 코드의 출력과 같다.
* css 파일 #box_model {
margin-top: 40px;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 10px;
}
즉, 시계방향으로 좌표 설정
나. border 속성
- 공간의 테두리
solid 속성값 : 실선
dotted 속성값 : 점선
- 색상, 두께, 종류 등 여러 속성값의 순서는 상관이 없다.
* css 파일 #box_model {
border: solid 20px red;
}
다. padding 속성
- border 속성(테두리)과 content 속성(내용)의 간격
- margin 속성과 같이 좌표를 설정할 때 사용
#box_model {
/* 12시를 기준으로 시계 방향으로
top, right, bottom, left 속성 의미 */
padding: 40px 30px 20px 10px;
}
그리고 위의 코드의 출력은 아래 코드의 출력과 같다.
* css 파일 #box_model {
padding-top: 40px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 10px;
}
라. content 요소
- 태그에 포함되어 있는 내용물
마. margin/padding 기본설정 바꾸기!
<html>과<body>태그는 기본적으로 margin/padding 속성을 가지고 있다.- 때문에 원치 않는 공백이 생길 수 있다!
이 공백을 없애려면 어떻게 해야할까.
* css 파일 html,
body {
margin: 0;
padding: 0;
}
- 쉼표(,)는 and의 의미를 담고 있으며,
<html>과<body>태그에 margin: 0 속성과 padding: 0 속성을 함께 적용하겠다는 뜻
