Box Model [ contents / padding / border / margin ]
Box Model에 대해 알아보자.
Box Model은 모든 요소가 갖는 구조이다.
HTML의 기본 구조를 알아야 코드를 볼 때 편하다.
2022.07.21 - [HTML,CSS/개념 정리] - HTML 기본 코드
HTML 기본 코드
[ HTML의 기초 ] HTML은 코드를 작성한 파일이다. 브라우저에서 실행하여 결과를 볼 수 있는 마크업 코드이다. 표준 브라우저는 크롬, 익스플로러, 에지.. 등이 있다. 파일 확장자는. html이다. (인코
start-1199.tistory.com
border는 '테두리 선'이라고 생각하자.
padding과 margin을 설명할때 구간을 보여주기 때문이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BoxModel</title>
<style>
h1 {
border: 1px solid rgb(255, 0, 0);
}
</style>
</head>
<body>
<h1>BoxModel</h1>
</body>
</html>
1px이고 색이 빨간( rgb(255,0,0) )인 테두리 선(border)이 들어간다.
아래는 위 코드의 결과이다.
h1은 블랙라인 요소 이기 때문에 해당 줄 모두가 선택된다.
[ padding ] ; 내부 여백
padding은 콘텐츠와의 여유 공간을 주는 것이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BoxModel</title>
<style>
h1 {
border: 1px solid rgb(255, 0, 0);
}
span {
border: 1px solid rgb(0, 0, 255);
}
</style>
</head>
<body>
<h1>BoxModel</h1>
<span> box model을 알아보자! </span>
</body>
</html>
여기서 알 수 있는 것은 span 요소는 인라인 요소라는 것을 알 수 있다.
자신의 자리만 차지하는 것이다.
Mangin과 Padding을 잘 확인하기 위해서 span을 사용하기로 하자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BoxModel</title>
<style>
span {
border: 1px solid rgb(0, 0, 255);
padding: 20px;
}
</style>
</head>
<body>
<span> box model을 알아보자! </span>
</body>
</html>
위와 같이 padding은 콘텐츠를 둘러싼 공간을 말한다.
여백의 크기는 위, 오른쪽, 아래, 왼쪽 순서로 지정한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BoxModel</title>
<style>
span {
border: 1px solid rgb(255, 0, 0);
padding: 20px 10px 30px 50px;
}
</style>
</head>
<body>
<span> 여백의 크기는 위, 오른쪽, 아래, 왼쪽 순서로 지정한다. </span>
</body>
</html>
@charset "UTF-8";
span{
/* 각 위치마다 나눠서 지정 */
padding-top: 20px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
/* 만약 여백이 위/아래 20px 오른쪽/왼쪽 30px 일 경우 */
padding : 20px 30px;
/* 여백이 위 20px 오른쪽/왼쪽 10px 아래 30px일 경우 */
pading : 20px 10px 30px;
}
[margin] ; 외부 여백
전체를 div요소로 묶은 후 실행한다.
**위와 같이 span요소를 사용할 수 없다. 왜냐하면 span 요소는 margin이 먹히지 않는다.**
margin은 테두리(border)를 둘러싼 공간을 의미한다.
다른 요소와의 여유공간을 주는 것이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BoxModel</title>
<style>
div#wrap {
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="wrap">
<span>
margin의 여백 설정은 padding과 동일하다. <br />
여백의 크기는 위, 오른쪽, 아래, 왼쪽 순서로 지정한다.
</span>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BoxModel</title>
<style>
div#wrap {
border: 1px solid #000;
margin: 40px;
}
</style>
</head>
<body>
<div id="wrap">
<span>
margin의 여백 설정은 padding과 동일하다. <br />
여백의 크기는 위, 오른쪽, 아래, 왼쪽 순서로 지정한다.
</span>
</div>
</body>
</html>
여백의 크기 지정 방법은 padding과 동일하다.
div{
border : 2px solid #000;
margin : auto;
}
margin : auto는 브라우저에서 수평 방향 마진 값을 자동으로 설정한다.
html요소의 왼쪽과 오른쪽 마진을 자동으로 설정하는 것이다.
*** 그 요소를 포함하고 있는 부모 요소의 정중앙에 위치하게 된다.***
모든 요소를 웹브라우저 창 화면 크기와 상관없이 가운데 위치시키려면
전체를 담고 있는 div요소에 margin : 0 auto; 를 선언하면 된다.
[ 정 리 ]
