css position 속성
이번 글에서는 제 포스팅에서도 화면상 위치를 잡을 때 많이 썼었던 css position에 대해 알아보는
시간을 갖도록 하겠습니다.
- position이란?
position은 이름 그대로 태그들의 위치를 결정하는 css로써, 속성값의 종류에는
static, relative, absolute, fixed가 있습니다.
position 자체는 태그들의 위치를 지정하는 css라고만 기억하시고, 속성값마다 다 다르기 때문에
속성값에서 자세하게 설명해 드리겠습니다.
- static
모든 태그들은 따로 position값을 지정하지 않아도 기본 position값으로 static이 지정이 됩니다.
static의 특징은 순서대로 왼쪽 > 오른쪽, 위 > 아래 순으로 쌓이게 됩니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>HELLO</title>
<style>
span, div {
border: 1px solid black;
}
</style>
</head>
<body>
<span>1</span>
<span>2</span>
<span>3</span>
<div>4</div>
</body>
</html>
지금은 아무에게도 position값을 주지 않은 기본 상태인데 실행을 시켜보면 왼쪽 > 오른쪽, 위 > 아래
순으로 되어 있는 것을 볼 수 있습니다.
- relative
태그의 위치를 바꾸고 싶을 때 쓰이는 속성값으로, 각각 top, right, left, bottom값을 따로 줘서
위치값 조정이 가능합니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>HELLO</title>
<style>
span, div {
border: 1px solid black;
background: #BBDEFB;
position: relative;
}
#one {
top: 10px;
}
#two {
right: 10px;
}
#three {
bottom: 10px;
}
#four {
left: 10px;
}
</style>
</head>
<body>
<span id="one">1</span>
<span id="two">2</span>
<span id="three">3</span>
<div id="four">4</div>
</body>
</html>
지금 보면 각각 값을 넣어준 대로 위에서 10px, 오른쪽에서 10px 등 위치값이 조정된 것을 볼 수 있습니다.
이렇게 position을 relative로 넣어 주게 되면 위치값 조정이 가능해집니다.
- absolute
다음은 absolute입니다.
저도 블로그 포스팅 글을 올릴 때 코드에 absolute, relative를 많이 활용해서 화면상에서 위치값을
조정하는데 많이 썼었는데, 한 번 보도록 하겠습니다.
위의 relative가 위치값이 바뀔 때 static을 기준으로 움직였었다면, 이 absolute는 다른 점이 자신의
부모 태그 중 position 값이 static이 아닌 태그를 기준으로 움직이게 됩니다.
이 말은 예제 코드로 봐야 더 이해가 빠를 것 같습니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>HELLO</title>
<style>
.top {
border: 1px solid black;
position: relative;
display: inline-block;
top: 20px;
}
.top span {
border: 1px solid black;
position: absolute;
bottom: 5px;
}
</style>
</head>
<body>
<div class="top">
안녕하세요.
<span>안녕</span>
</div>
</body>
</html>
span에게 absolute를 주고 bottom 5px을 주었습니다.
그럼 span의 부모 태그 중 static이 아닌 태그가 있나 찾아보니 윗 태그인 div 태그의 position이
static이 아닌 relative인 것을 발견했습니다.
그럼 span 태그는 이 div 태그의 기준이 되어 움직이기 때문에 실행을 시켜 보면 div 태그의 아래에서
5px 올라간(bottom 5px) 자리에 위치해 있는 것을 볼 수 있습니다.
+
참고로 부모 태그 중 static이 아닌 태그가 없을 시 body를 기준으로 움직이며, 해당 태그에 absolute나
뒤에 나올 fixed 값을 줄 시 그 태그는 display가 inline-block으로 바뀌게 됩니다.
- fixed
가끔 페이지를 돌아다니다 보면 화면 스크롤은 계속 내리는데 옆에 고정된 듯 계속 따라오는 영역이
있는 것을 볼 수 있습니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>HELLO</title>
<style>
#fixed {
position: fixed;
}
</style>
</head>
<body>
<div id="fixed">fixed</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
br 태그를 많이 쓴 이유는 페이지에서 스크롤을 만들기 위해서이고, 실행을 시켰을 때 스크롤을 내려도
우리가 만들어 놓은 fixed가 고정이 될지 보겠습니다.
이렇게 스크롤을 내려도 화면의 똑같은 자리에 fixed라는 텍스트가 보이게 됩니다.
오늘은 position에 대해 좀 상세하게 다뤄 봤습니다.
각 값들이 어떻게 작동하는지 잘 기억하시고, 위치값을 조정할 때 유용하게 사용하시길 바랍니다.