CSS _ Position 3대장 을 만나보자.
HTML로 웹페이지를 만들다 보면 내가 넣은 요소들이 내 맘대로 위치하지 않는다. (아주 자기들 멋대로다!)
그렇기 때문에 우리는 CSS 스타일로 내가 원하는 위치에 요소들이 위치할 수 있도록 position 속성을 조절해 주어야 한다.
자 그럼 이제부터 position 3 대장을 만나보자!
1 대장 relative
-> 사전적 의미 : 상대적인
2 대장 absolute
-> 사전적 의미 : 절대적인
3 대장 fixed
-> 사전적 의미 : 고정된
사실 사전적 의미만으로 벌써 감이 잡힐 것이다.
relative는 상대적으로 위치시키는 것이고
absolute는 절대적으로 위치시키는 것이고
fixed는 기냥 붙박이처럼 박제시키는 것이다!
설마 아직 감이 안 잡혔다고? 그럼 아래 예제 코드를 살펴보자!
<style>
div {
}
</style>
</head>
<body>
<div class="one">1대장</div>
<div class="two">2대장</div>
<div class="three">3대장</div>
</body>
우선 div 3개를 만들었고 아직 스타일은 적용하지 않았다
당연히 결과도 뭐 없다. div 니까 옆이 아닌 아래로 차곡차곡 쌓이는 정도?
<style>
div.three {
top:50px;
}
</style>
3번째 div를 떨어뜨리기 위해 top:50px; 을 줬건만..! 왜 떨어지지 못하는 거니?
이때 필요한 것이 relative!!!!!!
다음처럼 스타일 position 속성에 relative를 넣어보자!
<style>
div.three {
position:relative;
top:50px;
}
</style>
놀랍게도 3대장이라는 문구가 2대장으로부터 상대적으로 50px 만큼 떨어졌다!!!
자, 하지만 나는 2대장이 아닌 맨 위 천장으로부터 50px 만큼 떨어뜨리고 싶다.
이때 필요한 것이 absolute!!!!!!
<style>
div.three {
position:absolute;
top:50px;
}
</style>
언뜻 보면 다시 맨 처음으로 돌아온 것처럼 보이겠지만, 잘 보면 2대장과 3대장 사이에 약간의 여백이 생긴 걸 볼 수 있다. 이것은 3대장이 천장으로부터 절대적인 거리 50px 만큼 떨어져 있기 때문에 top:50px; 임에도 불구하고 2대장과 가깝게 있는 것이다.
그럼 마지막으로 fixed 도 알아봐야겠지?
<style>
body{
height:200vh;
} /*화면 세로 사이즈를 늘리기 위해 body에 높이 값을 추가함*/
div.three {
position:fixed;
top:50px;
}
</style>
오잉? 이거 absolute 랑 같은 거 아냐? 이렇게 생각할 수 있겠지만 no no!
영상을 보면 알겠지만 웹페이지의 화면을 이동해도 3대장의 위치는 천장에서부터 50px 위치에 고정된 것을 볼 수 있다.
이것이 바로 fixed이다!
이렇듯 CSS position 속성을 통해 요소들의 위치를 자유자재로 위치시키고 심지어는 고정시킬 수도 있다. 물론 더 쉽고 예쁘게 위치시키려면 flex를 함께 사용해야 한다. flex는 다음에 기회가 되면 포스팅해보겠다.