| 개요
position 속성은 태그의 위치를 잡는 속성이며 5가지의 값을 갖습니다.
CSS를 공부하면서 가장 어려웠던 부분이고 실무에 있어서도 많이 사용되는 속성으로 꼭 정확하게 공부할 필요가 있는 속성입니다.
기본적인 html로 레이아웃을 잡는다면 그 안에 요소들은 이전 margin, padding속성과 더불어 position속성으로 위치를 잡게 되는 경우가 많으며, 이 속성을 잘 이용하면 다양한 화면 구성을 할 수 있습니다.
- static : 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임으로 설정해 줄 수 없습니다.
- absolute : 절대 좌표와 함께 위치를 지정해 줄 수 있습니다.
- relative : 원래 있던 위치를 기준으로 좌표르르 지정합니다.
- fixed : 스크롤과 상관없이 항상 문서(브라우져 창) 최 좌측상단을 기준으로 좌표를 고정합니다.
- inherit : 부모 태그의 속성값을 상속 받습니다.
좌표를 지정해주기 위해서는 left, right, top, bottom 속성과 함께 사용됩니다.
position을 absolute나 fixed로 설정시 가로 크기와 100%가 되는 block 태그의 특징이 사라지게 됩니다.
| 예제
<html>
<head>
<style>
.box-container{
width: 350px;
border: 2px solid #e91bf5;
}
.box-container div{
padding: 10px;
border: 1px solid green;
background-color: #e3ffe0;
}
#box1 { position: static; top: 20px; left: 30px; }
#box2 { position: relative; top: 20px; left: 30px; }
#box3 { position: absolute; top: 20px; right: 30px; }
#box4 { position: fixed; top: 20px; right: 30px; }
</style>
</head>
<body>
<div class="box-container">
<div id="box1">static 박스</div>
<div id="box2">relative 박스</div>
<div id="box3">absolute 박스</div>
<div id="box4">fixed 박스</div> <!-- '출력 결과' 란이 아닌, 전체 페이지에서 고정되어 보여짐 -->
</div>
</body>
</html>| 결과값
| absolute와 relative
relative 인 부모객체 안에 absolute인 자식객체가 있으면 절대 좌표를 계산할 때, relative인 부모객체를 기준으로 absolute인 자식객체는 움직이게 됩니다. 만약 부모 객체 중 relative인 객체가 없다면 전체문서가 기준이 됩니다.
부모객체에 relative를 잡아서 그 위에 자유롭게 left, right, top, bottom을 이용해 위치를 잡으며 다양한 단위를 사용할 수 있습니다.
이때 부모객체의 크기 값을 상대값 %등으로 잡아주고 자식객체의 크기와 위치값을 동일하게 상대값인 %로 잡아준다면 브라우져의 크기에 따라 사이즈와 위치값이 같이 변하게 됩니다. (브라우져에 대한 반응형 작업 시)
| fixed
다른 온라인 사이트를 보다보면 광고 또는 팝업창, 사이드 바 등 같은 경우 브라우저에 고정되어 쫓아다니는 것들을 자주 볼 수 있게 됩니다. 이런부분들이 물론 나중의 jquery나 javascript를 이용해서 위치값을 잡아 움직이기도 하지만 CSS의 position 값을 이용해 간단하게 표현하는 경우도 많이 있습니다.
fixed의 부모객체는 문서전체 즉 브라우져에 기준이 되며, left, right, top, bottom을 이용해 다양한 단위로 위치 시킬 수 있습니다.
'즐거움 넘치는 IT 세계 > 코드로 만드는 디자인' 카테고리의 다른 글
| [ CSS 응용 ] 유투브,비메오 영상을 반응형으로 만들기 (iframe, embed 반응형) (0) | 2018.10.01 |
|---|---|
| [ CSS 입문 ] cursor 속성 (0) | 2018.09.19 |
| [ CSS 입문 ] clear속성 (0) | 2018.09.17 |
| [ CSS 입문 ] float 속성 (0) | 2018.09.16 |
| [ CSS 입문 ] display 속성 (0) | 2018.09.15 |
