Please Enable JavaScript!
Gon[ Enable JavaScript ]

스타일 시트 CSS width 와 height 속성 사용법

웹 프로그래밍/스타일시트 CSS
반응형

스타일 시트 CSS width height 속성 사용법

 

환경: Eclipse Mars, CSS3

 

width height 속성은 단어 의미 그대로 가로 길이, 세로 길이를 의미합니다. 값을 정의하는 방법은 숫자 뒤에 단위를 적으면 됩니다. 단위는 % px 가 있습니다. px 는 픽셀 값을 말하며 % 는 상위 컨테이너에서 차지하는 비율을 말합니다.

 

width, height 속성은 padding, borders, margins 가 포함된 길이가 아닙니다. padding, borders, margins 과 별개의 넓이와 높이 값입니다. 샘플에는 div 태그에 넓이와 높이를 지정했습니다. 넓이는 100% 이므로 브라우저 끝까지 div 가 넓어집니다. 그리고 높이는 100px 로 셋팅 했으며 border 2px 은 별도의 길이 값입니다.

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	div { 
	    width: 100%;
	    height: 100px;
	    background-color: yellow;
	    border: 2px solid;
	}
</style>
</head>
<body>
	<div>width height 적용 </div>
</body>
</html>

 

스타일 시트 CSS width 와 height 속성 사용법

 

그런데 100% 로 넓이를 적용했는데도 양쪽에 공간이 남죠. 이것은 body 에 기본적인 margin 값이 들어가 있어서 입니다. 그럼 빈 공간을 없애 보도록 하겠습니다. body CSS 속성 값 중에서 margin 0 으로 주면 됩니다. 그리고 각 방향 별로 조절할 수 있는 속성은 margin-top:0; margin-left:0; margin-right:0; margin-bottom:0; 입니다. 이 중에서 원하는 방향의 margin 속성을 적용할 수 있습니다.

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

스타일 시트 CSS width 와 height 속성 사용법

 

반응형
Posted by 녹두장군

댓글을 달아 주세요