스타일 시트 CSS position 속성, 태그의 위치를 설정하는 방법

스타일시트 CSS

스타일시트 CSS 강좌 - position 속성

 

환경: Eclipse Mars, CSS5

 

position 속성은 태그를 화면에서 원하는 위치로 지정할 때 주로 사용합니다. 5가지 속성이 있는데 다양하게 표현할 수 있습니다. 스트롤을 따라 다닐 수 있는 이미지를 만들거나 탑다운 메뉴를 만들 때 많이 사용하죠. 다양한 예제를 통해 사용법을 알아 보겠습니다. 

 

먼저 position 속성인 5가지에 대해 알아 봅니다. static, absolute, relative, fixed, inherit 가 있습니다. 그리고 position 은 위치를 지정하는 속성이기 때문에 left, right, top, bottom 속성과 같이 사용합니다. 당연히 위치를 지정하려면 방위와 픽셀 값이 있어야겠죠.

 

¤ static : 태그의 위치 값을 지정할 수 없습니다. left, right 값을 넣어도 반영안됨

¤ absolute : 문서의 좌측상단을 기존으로 절대위치를 나타내며 스크롤을 따라감

¤ relative : static 인 태그를 기준으로 위치를 지정

¤ fixed : 문서의 좌측상단을 기준으로 위치가 고정되며 스크롤과 상관없습니다.

¤ inherit : 부모 태그의 속성값을 상속

 

샘플에서 선택자 #pos1 static 으로 값을 설정했습니다. top, right 로 위치를 지정해도 반영이 되지 않습니다. 화면에서도 그대로 있죠. #pos2 absolute 로 화면 오른쪽에 위치시켰습니다. 스크롤이 생겨 아래로 내리면 박스는 따라가게 됩니다. #pos2 relative 로 바로 위에 있는 static 으로 지정된 태그를 기준으로 위치를 정하게 됩니다. position 속성의 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; right: 30px;}
	#pos2{position: absolute; top: 50px; right: 30px;}
	#pos3{position: relative; top: 70px; left: 30px;}
</style>
</head>
<body>
	<div id="pos1">
		position: static example 
	</div>
	<div id="pos2">
		position: absolute example
	</div>
	<div id="pos3">
		position: relative example
	</div>
</body>
</html>

 

스타일 시트 CSS position 속성, 태그의 위치를 설정하는 방법

 

다음 예제는 position 속성의 값 중 absolute 가 컨테이너에 포함되어 있는 경우입니다. absolute 는 상위 컨테이너를 기준으로 하기 때문에 #pos1 이 적용된 div 태그를 기준으로 위치가 지정되게 됩니다.

<!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: fixed; top: 20px; left: 30px;
		width: 300px; height: 150px;
	}
	#pos2{
		position: absolute; top: 50px; left: 30px;
		width: 200px; height: 30px;
	}
</style>
</head>
<body>
	<div id="pos1">
		position: fixed example 
		<div id="pos2">
			position: absolute example
		</div>
	</div>
</body>
</html>

스타일 시트 CSS position 속성, 태그의 위치를 설정하는 방법

 

Posted by 녹두장군