hgk0404
hgk0404.tistory
hgk0404

공지사항

전체 방문자
오늘
어제
  • 전체 카테고리 N
    • [컴퓨터비전] N
    • [Computer Science]
      • [컴퓨터네트워크]
      • [알고리즘]
      • [자료구조 in C]
      • [C & C++]
      • [이산수학]
      • [Math]
    • [머신러닝]
      • [Numpy, Pandas]
    • [Cloud]
      • [AWS]
      • [NCP]
      • [Kubernetes]
      • [Terraform]
    • [Dev]
      • [가상환경]
      • [Linux]
      • [Docker]
    • [Python]
    • [Coding Test]
      • [백준]
      • [프로그래머스]
      • [SQL]
    • [WEB]
    • [자격증, 일상]
    • [엑셀]
    • [금융]

인기 글

최근 글

최근 댓글

250x250
hELLO · Designed By 정상우.
hgk0404

hgk0404.tistory

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

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

2022. 9. 19. 03:06
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]' 카테고리의 다른 글

[Java] Object 클래스  (0) 2022.09.23
[Java] 인터페이스와 추상 클래스  (0) 2022.09.23
[HTML & CSS] CSS 박스모델  (0) 2022.09.19
[HTML & CSS] 경계선(border) 다루기  (0) 2022.09.18
[HTML & CSS] CSS 배경(background) 다루기  (0) 2022.09.18
'[WEB]' 카테고리의 다른 글
  • [Java] Object 클래스
  • [Java] 인터페이스와 추상 클래스
  • [HTML & CSS] CSS 박스모델
  • [HTML & CSS] 경계선(border) 다루기
hgk0404
hgk0404
공부기록

티스토리툴바