스타일 시트 CSS 안쪽 여백 설정하는 padding 속성 알아보기

스타일시트 CSS

스타일 시트 CSS 안쪽 여백 설정하는 padding 속성 알아보기

 

환경: Eclipse Mars, CSS5

 

HTML 디자인을 적용할 때 여백은 종류와 사용법을 제대로 이해하고 있어야 합니다. 그래야 제대로 된 디자인을 할 수 있습니다. 모두 padding, margin, border 속성으로 나눌 수 있습니다. border 는 태그 영역의 테두리를 말합니다. 이 테두리를 기준으로 바깥쪽의 여백이 margin 이며, 안쪽이 border 입니다. margin 은 요소들 간의 거리를 둘 때 사용하며, border 는 태그 내부에 들어가 있는 텍스트나 요소들의 가독성을 높이기 위해 적용합니다.

 

margin 은 바깥쪽 여백이며, padding 은 안쪽 여백을 나타냅니다. 값은 width, height 속성과 같이 숫자 뒤에 px , %, pt, cm 단위로 적용할 수 있습니다. 아래 그림을 참고하시면 좀더 쉽게 이해가 가실 겁니다. 참고로 태그의 순수 길이인 width height 는 요소의 전체 길이에서 margin, border, padding 뺀 것입니다.  

스타일 시트 CSS 안쪽 여백 설정하는 padding 속성 알아보기

 

아래 샘플 소스에서 두 개의 div padding 속성을 적용한 것과 하지 않은 것의 나누어서 구현했습니다. 두 번째 div 에 적용한 padding : 10px 4개의 방향에 모두 동일한 크기를 적용합니다. padding 을 적용하지 않은 것 보다 가독성을 높일 수 있습니다. 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
		margin: 0;
	}
	#box1 {
		width: 200px;
		height: 60px;
		margin: 10px;
		padding: 0px;
		border: 2px solid;
		background-color: yellow
	}
	#box2 {
		width: 200px;
		height: 60px;
		margin: 10px;
		padding: 10px;
		border: 2px solid;
		background-color: yellow
	}
</style>
</head>
<body>
	<div id="box1">padding 0 적용</div>
	<div id="box2">padding 10px 적용</div>
</body>
</html>

스타일 시트 CSS 안쪽 여백 설정하는 padding 속성 알아보기

 

다음은 한번에 4 방향 모두 동일하게 적용하는 것이 아니라 각각 별도로 적용하는 방법은 없을까? padding 에서 padding: 0px 10px 20px 50px; 값의 순서는 padding-top, padding-right, padding-bottom, padding-left 입니다. 그러니까 상단에서 시계 방향으로 돌아가는 것입니다. padding: 0px 10px 20px 50px;  아래와 같이 다시 표현할 수 있습니다. 이제 다음에 padding 값으로 줄여서 표현된 것도 이해되시겠죠.

 

¤ padding-top : 0px;

¤ padding-right : 10px;

¤ padding-bottom : 20px;

¤ padding-left : 50px;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
		margin: 0;
	}
	#box1 {
		width: 200px;
		margin: 10px;
		padding: 0px 10px 20px 50px;
		border: 2px solid;
		background-color: yellow
	}
</style>
</head>
<body>
	<div id="box1">#box1 padding 0 적용한 상태,
	군대 시절 어느 말년 병장이 아침마다 눈뜨면 졸병에게 
	물어보곤 했다. "내 제대까지 며칠 남았지?" 졸병이 큰 
	소리로 대답했다. 
	</div>	
</body>
</html>

스타일 시트 CSS 안쪽 여백 설정하는 padding 속성 알아보기

 

Posted by 녹두장군