|
스타일시트 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>
▼ 다음 예제는 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' 카테고리의 다른 글
| 스타일 시트 CSS display 속성, 태그의 inline 과 block 속성 바꾸기 (0) | 2018.08.09 |
|---|---|
| 스타일 시트 CSS 마우스 모양을 바꾸는 cursor 속성 알아보기 (1) | 2018.07.27 |
| 스타일 시트 CSS 적용 우선 순위 알아 보기 (1) | 2018.07.20 |
| 스타일 시트 CSS z-index 태그 요소 보이는 순서를 결정 (0) | 2018.07.06 |
| 스타일 시트 CSS 안쪽 여백 설정하는 padding 속성 알아보기 (1) | 2018.06.15 |
| 스타일 시트 CSS clear 속성, float 기능을 제거하는 방법 (0) | 2018.05.21 |
| 스타일 시트 CSS float 속성, 이미지와 텍스트를 배치 시키는 속성 (1) | 2018.05.11 |
| 스타일 시트 CSS px(pixel) -> em 단위 변환 표 (0) | 2018.04.30 |
