[HTML & CSS] CSS 박스모델 관련 속성

728x90

이전글 CSS 박스모델의 연장입니다.

1. 경계선 바깥 여백 margin

2. 경계선 안쪽 여백 padding

3. content의 폭과 높이 : width & height

4. 폭과 높이

1. 경계선 바깥 여백 margin

경계선 바깥 위쪽 여백 (margin) 지정 : margin-top
경계선 바깥 오른쪽 여백 (margin) 지정 : margin-right
경계선 바깥 아래쪽 여백 (margin) 지정 : margin-bottom
경계선 바깥 왼쪽 여백 (margin) 지정 : margin-left
경계선 한꺼번에 바깥 여백 (margin) 지정 : margin

예시-각각의 여백에 대해 세세히 지정)

<!DOCTYPE HTML>
<html>
<head>
<title>css box</title>
<meta charset="UTF-8">
<style>
.one {
	width: 300px;
	border: 3px solid res;
	margin-top: 4opx;
	margin-right: 40px;
	margin-bottom: 40px;
	margin-left: 40px;
}
</style>
</head>
<h2>경계선 바깥여백 (margin)</h2>
<div class="one">
	CSS3란? <br>웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다. 문서 전체의 일관성을 유지할 수 있고,
	세세한 스타일 지정의 필요를 줄어들게 하였다.. 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이
	따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS이다. 간단히 스타일 시트라고도
	한다. HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹
	페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에
	변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다.
</div><br><br>
</body>
</html>

예시-한꺼번에 하나의 속성 지정)

<!DOCTYPE HTML>
<html>
<head>
<title>css box</title>
<meta charset="UTF-8">
<style>
.one {
	width: 300px;
	border: 3px solid res;
	margin : 40px;
}
</style>
</head>
<h2>경계선 바깥여백 (margin)</h2>
<div class="one">
	CSS3란? <br>웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다. 문서 전체의 일관성을 유지할 수 있고,
	세세한 스타일 지정의 필요를 줄어들게 하였다.. 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이
	따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS이다. 간단히 스타일 시트라고도
	한다. HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹
	페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에
	변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다.
</div><br><br>
</body>
</html>

margin : 40px;로 한번에 일괄 지정해 주었습니다.

결과)

예시-한꺼번에 여러개의 속성 지정)

한꺼번에 여러개의 속성을 지정할 수 있습니다.

기본적인 형식은 다음과 같습니다.

margin : (바깥 위쪽 여백) (바깥 오른쪽 여백) (바깥 아래쪽 여백) (바깥 왼쪽 여백); /* 시계방향으로 속성을 설정한다. */
margin : (바깥 위쪽/아래족 여백) (바깥 왼쪽/오른쪽 여백);
margin : (바깥 위쪽 여백) (바깥 왼쪽/오른쪽 여백) (바깥 아래쪽 여백);

<!DOCTYPE HTML>
<html>
<head>
<title>css box</title>
<meta charset="UTF-8">
<style>
.one {
	width: 300px;
	border: 3px solid res;
	margin : 25px 50px 75px 100px;
}
</style>
</head>
<h2>경계선 바깥여백 (margin)</h2>
<div class="one">
	CSS3란? <br>웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다. 문서 전체의 일관성을 유지할 수 있고,
	세세한 스타일 지정의 필요를 줄어들게 하였다.. 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이
	따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS이다. 간단히 스타일 시트라고도
	한다. HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹
	페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에
	변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다.
</div><br><br>
</body>
</html>

결과)

2. 경계선 안쪽 여백 padding

경계선 안 위쪽 여백 (padding) 지정 : padding-top
경계선 안 오른쪽 여백 (padding) 지정 : padding-right
경계선 안 아래쪽 여백 (padding) 지정 : padding-bottom
경계선 안 왼쪽 여백 (padding) 지정 : padding-left
경계선 한꺼번에 안쪽 여백(padding) 지정 : padding

예시-각각의 여백을 세세히 지정)

<!DOCTYPE HTML>
<html>
<head>
<title>css box</title>
<meta charset="UTF-8">
<style>
.one {
	width: 300px;
	border: 3px solid res;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
}
</style>
</head>
<h2>경계선 바깥여백 (margin)</h2>
<div class="one">
	CSS3란? <br>웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다. 문서 전체의 일관성을 유지할 수 있고,
	세세한 스타일 지정의 필요를 줄어들게 하였다.. 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이
	따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS이다. 간단히 스타일 시트라고도
	한다. HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹
	페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에
	변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다.
</div>
<br>
<br>
</body>
</html>

예시-한꺼번에 하나의 속성 지정)

<!DOCTYPE HTML>
<html>
<head>
<title>css box</title>
<meta charset="UTF-8">
<style>
.one {
	width: 300px;
	border: 3px solid res;
	padding : 20px;
}
</style>
</head>
<h2>경계선 안쪽여백 (padding)</h2>
<div class="one">
	CSS3란? <br>웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다. 문서 전체의 일관성을 유지할 수 있고,
	세세한 스타일 지정의 필요를 줄어들게 하였다.. 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이
	따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS이다. 간단히 스타일 시트라고도
	한다. HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹
	페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에
	변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다.
</div><br><br>
</body>
</html>

결과)

예시-한꺼번에 여러개의 속성 지정)

한꺼번에 여러개의 속성을 지정해 줄 수 있습니다.

기본적인 형식은 다음과 같습니다.

padding: (경계선안 위 여백) (경계선안 오른쪽 여백) (경계선안 아래쪽 여백) (경계선안 왼쪽 여백);
/* 시게방향으로 속성을 설정합니다. */
padding: (경계선안 위쪽/아래쪽 여백) (경계선안 왼쪽/오른쪽 여백);
padding: (경계선안 위쪽 여백) (경계선안 왼쪽/오른쪽 여백) (경계선안 아래쪽 여백);

<!DOCTYPE HTML>
<html>
<head>
<title>css box</title>
<meta charset="UTF-8">
<style>
.one {
	width: 300px;
	border: 3px solid res;
	padding : 25px 50px 75px 100px;
</style>
</head>
<h2>경계선 안쪽여백 (padding)</h2>
<div class="one">
	CSS3란? <br>웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다. 문서 전체의 일관성을 유지할 수 있고,
	세세한 스타일 지정의 필요를 줄어들게 하였다.. 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이
	따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS이다. 간단히 스타일 시트라고도
	한다. HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹
	페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에
	변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다.
</div>
<br>
<br>
</body>
</html>

결과)

3. content의 폭과 높이 : width & height

CSS의 클래스 접근자를 이용하여 width와 height속성으로 content의 너비와 높이를 지정할 수 있습니다.

예시)

<!DOCTYPE HTML>
<html>
<head>
<title>css box</title>
<meta charset="UTF-8">
<style>
.small {
	width:30px;
	height:10px;
}
.big {
	width:80px;
	height:30px;
}
</style>
</head>
<body>
	<h2>content와 width와 height</h2>
	<input type="text" class="small"><br>
	<input type="text" class="big">
</body>
</html>

결과)

4. 폭과 높이

content의 폭과 높이 값이 width와 height에 해당합니다.

예시)

<!DOCTYPE HTML>
<html>
<head>
<title>css box</title>
<meta charset="UTF-8">
<style>
.div {
	width : 50px;
	padding : 10px;
	border : 5px solid red;
	margin : 0;
}
</style>
</head>
<body>
	<h2>content와 width와 height</h2>
	<input type="text" class="div"><br>
</body>
</html>

결과)

위의 그림에서 div가 가지는 너비(width)는 content의 너비(50px) + 왼쪽/오른쪽 padding(각 10px) + 왼쪽/오른쪽 경계선 두께(각 5px)로 80px을 가지게 됩니다.

px : pixel, 표시장치(모니터)에 따라서 상대적인 크기를 가집니다.
% : 브라우저 폭에 대한 상대적인 크기를 가집니다.

위키독스

728x90

저작자표시 동일조건

'[WEB] > [HTML & CSS]' 카테고리의 다른 글

[HTML & CSS] viewport (0)	2022.10.11
[HTML & CSS] CSS 박스모델 (0)	2022.09.19
[HTML & CSS] 경계선(border) 다루기 (0)	2022.09.18
[HTML & CSS] CSS 배경(background) 다루기 (0)	2022.09.18
[HTML & CSS] CSS 색상(color) 다루기 (0)	2022.09.18

1. 경계선 바깥 여백 margin

2. 경계선 안쪽 여백 padding

3. content의 폭과 높이 : width & height

4. 폭과 높이

'[WEB] > [HTML & CSS]' 카테고리의 다른 글

티스토리툴바