스타일 시트 CSS 강좌 - left, right, top, bottom 속성

 

환경: Eclipse Mars, CSS3

 

left, right, top, bottom 은 태그의 위치를 원하는 곳에 위치 시킬 수 있습니다. 주로 position 속성과 함께 사용하며 position 속성의 값이 static 일 때는 위치 정보가 적용되지 않습니다.

 

각 위치 속성에 들어가는 값의 단위는 px, cm, % 이며 상수로 auto 가 있습니다. auto 는 기본값으로 브라우저 왼쪽 끝 위치로 셋팅 됩니다. 4가지 속성 중 반대되는 left, right top, bottom 을 동시에 적용하면 나중에 선언한 값이 적용됩니다.

 

¤ left : 문서 좌측에서 태그 좌측 좌표 거리

¤ right : 문서 우측에서 태그 우측 좌표 거리

¤ top : 문서 상단에서 태그 상단 좌표 거리

¤ bottom : 문서 하단에서 태그 하단 좌표 거리

 

그럼 position static 일 때 샘플을 보겠습니다. top left 로 값을 지정했는데도 위치 이동이 없죠. top left 속성에 입력한 값만큼 이동을 하지 않고 있습니다. 위에서 설명했듯이 static 일 때는 위치를 이동시킬 수가 없습니다. 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS 속성 </title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	div {
		background-color: #4fcbe5;
		width: 300px; height: 60px;
		border: 1px solid; padding: 5px;
	}
	#pos1{
		position: static; 
		top: 20px; left: 50px;
		width: 300px; height: 150px;
	}
</style>
</head>
<body>
	<div id="pos1">
		position: static example 
	</div>
</body>
</html>

 

스타일 시트 CSS 브라우저 내 위치를 지정하는 left, right, top, bottom 속성

 

아래 샘플은 위치 속성값에 들어가는 다양한 형태를 각각 표현한 것입니다. auto 는 위에서 이야기 했듯이 자신을 포함한 컨테이너의 왼쪽 끝으로 이동시킬 수 있습니다. 속성을 right 로 해도 동일합니다. 그리고 마이너스(-) 를 이용하면 역 방향으로 이동시킬 수 있으며 % 로 지정하는 것도 가능합니다. % 는 브라우저의 전체 길이에서 % 값 만큼 이동합니다. 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS 속성 </title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	div {
		background-color: #4fcbe5;
		width: 300px; height: 30px;
		border: 1px solid; 
		margin: 10px;
		padding: 5px
	}
	#pos1{position: relative; left: auto;}
	#pos2{position: relative; left: 10px;}
	#pos3{position: relative; left: -10px;}
	#pos4{position: relative; left: 10%;}
</style>
</head>
<body>
	<div id="pos1">
		position: relative left: auto 
	</div>
	<div id="pos2">
		position: relative left: 10px  
	</div>
	<div id="pos3">
		position: relative left: -10px  
	</div>
	<div id="pos4">
		position: relative left: 10%  
	</div>
</body>
</html>

스타일 시트 CSS 브라우저 내 위치를 지정하는 left, right, top, bottom 속성

 

Posted by 녹두장군