Css :) position

 웹 페이지에서 공간을 분할해서 사용하는 것은 매우 중요하다.

여기서 말하는 공간이란, 페이지상의 전체 공간 혹은 그 안에서의 세부적으로 나뉘어져 있는 공간들을 말한다.

 웹 페이지의 공간분할의 예

 - 제목이 보이는 공간, 

 - 글의 리스트들을 보여주는 공간

 - 글의 내용을 보여주는 공간 등등

 위처럼 전체페이지에서 세부적으로 나누어 놓으면 깔끔하게 보일것이다. 이러한 것에 있어서 Css에서는 position 속성을 사용한다.

 position이란 Markup에서 페이지의 공간들을 나누어 놓았으면(레이아웃들을 작성했을경우) 웹 페이지 상에서 이 공간이 위치하는 곳을 정해줄 수 있는 역할을 한다.

  1. position:static 

 static은 position속성의 기본 값이다. 전체 페이지를 기준으로 먼저 작성된 엘리먼트들부터 차례대로 쌓인다. 그다음 엘리먼트부터는 이전 엘리먼트들이 있는 공간 다음 공간을 차지하며 쌓인다. 

 [ 예제 - position:static ] 

[Markup]

1. <div>div1</div>
2. <div>div2</div>
3. <li>li1</li>
4. <li>li2</li>
5. <span>span1</span>
6. <span>span2</span>

 [Css]

1. div{
2.     border:3px solid gray;
3. }
4. li{
5.     border:3px solid blue;
6. }
7. span{
8.     border:3px solid yellowgreen;
9. }

 [ 실행결과 ]

 - 엘리먼트 div와 li는 줄바꿈 기능이 있으므로(block속성 값) 행의 전체부분을 차지했다.

 - 엘리먼트 span은 줄바꿈 기능이 없으므로(inline속성 값) 하나의 행에서 텍스트의 최소한의 공간을 차지한다.

 2. position:absolute

 position:absolute는 절대적인 위치를 갖을 수 있는 즉, 엘리먼트들의 위치를 지정하는데 있어서 제약이 없다. 하지만, 부모가 있는 엘리먼트가 있다면, 부모의 공간 안에서 위치를 지정하며, 그 안에서는 제약이 없다. "제약이 없다"라는 말은

 더 쉽게 이해해보면,
보통의 경우 엘리먼트는 자신이 어느 위치(공간)에 존재하려면 형제들의 눈치를 봐야한다.
즉 A라는 엘리먼트가 먼저 쓰였다면(자리에 위치해 있다면), B라는 엘리먼트는 A라는 엘리먼트 밑이든 옆이든 A라는 공간을 침해해서는 안된다. 하지만, position:absolute는 다르다.

 위에서 말했듯이 "제약이 없다"라는 말은 "형제들이 있든 없든 눈치를 안보고 아무곳에나 위치할 수 있다"라는 절대적인 위치를 갖는 특징이있다.

 [ 예제1 - position:absolute ] 

[Markup]

1. <div>absolute-1</div>
2. <div>absolute-2</div>
3. <div>absolute-3</div>
4. <div>absolute-4</div>

[Css]

1. div{
2.     position:absolute;
3.     width:150px;
4.     height:150px;
5. }
6. div:nth-child(1){
7.     border:3px solid blue;
8. }
9. div:nth-child(2){
10.     border:3px solid magenta;
11. }
12. div:nth-child(3){
13.     border:3px solid green;
14. }
15. div:nth-child(4){
16.     border:3px solid #afdfdf;
17. }

[ 실행결과 ]

: 실행결과를 보고 "어 문제가 생겼는데, 출력이 잘못된거 아닌가요?"라고 생각할 수 도
있지만, 아주 잘 실행된것이다. 절대적인 위치를 갖는다는건, 형제들의 엘리먼트에 제약을 안받는다는 말이라했다. 그러므로 처음 생기는 위치는 부모(부모가 존재하지 않으면, 화면 전체를 기준으로 위치함)를 기준으로 생기는데, 위치를 임의로 지정하지 않으면 겹쳐서 보이는게 당연한 결과이다.

 그러므로 position:absolute의 위치를 지정해보자!

 [ 예제2 - position:absolute ] 

 [Css]

1. div{
2.     position:absolute;
3.     width:150px;
4.     height:150px;
5. }
6. div:nth-child(1){
7.     border:3px solid blue;
8.     top:10%;
9. }
10. div:nth-child(2){
11.     border:3px solid magenta;
12.     top:15%;
13. }
14. div:nth-child(3){
15.     border:3px solid green;
16.     top:5%;
17.     left:15%;
18. }
19. div:nth-child(4){
20.     border:3px solid #afdfdf;
21.     top:10%;
22.     right:10%;
23. }

 [ 실행결과 ]

: 정말로 형제들의 눈치를 안보고 위치를 지정할 수 있는 자유로운 위치 지정이 가능해졌다.
그렇다면, 부모가 존재하는 경우는 어떻게 변하는지 한번 알아보자.

 [ 예제3 - position:absolute ] 

 [Markup]

1. <div>
2.     <div>absolute-1</div>
3.     <div>absolute-2</div>
4.     <div>absolute-3</div>
5.     <div>absolute-4</div>
6. </div>

 [Css]

1. div{
2.    position:absolute;
3.    border:5px solid black;
4.    width:400px;
5.     height:400px;
6. }
7. div > div{
8.     position:absolute;
9.     width:150px;
10.     height:150px;
11. }
12. div:nth-child(1){
13.     border:3px solid blue;
14.     top:10%;
15. }
16. div:nth-child(2){
17.     border:3px solid magenta;
18.     top:15%;
19. }
20. div:nth-child(3){
21.     border:3px solid green;
22.     top:5%;
23.     left:15%;
24. }
25. div:nth-child(4){
26.     border:3px solid #afdfdf;
27.     top:10%;
28.     right:10%;
29. }

 [ 실행결과 ]

: 부모(파란색 보드박스)의 공간안에 속해 있지만, 그 안에서도 형제들의 제약을 받지 않고 자유롭다는 것을 파악했다. 이처럼 aboslute속성 값은 절대적인 위치를 부여 할 때, 사용이 된다.


 3. position:relative
 이전에 살펴본 absolute와는 다르게, 형제들의 눈치를 자주보는 특징을 가진 녀석이다. aboslute는 부모아래에서 제약을 받지 않고 자유롭게 위치(공간)를 부여해줄 수 있었다. 하지만 relative는 본인이 해당위치에 놓이기전에 주변에 자식들과 겹치지 않게 서로의 공간을 침해하지 않는다. 즉 position:relative가 설정된 레이아웃에서 엘리먼트 A라는 녀석이 먼저 놓여있다면, 그 다음 놓일 B녀석은 A라는 녀석 밑에나 옆에 위치 하게된다.
 부모가 있다면 부모의 위치에서 없다면 전체 화면의 첫번째 놓일곳에서 시작이 된다.

 [ 예제1 - position:relative ] 

: 테두리로 둘러져있는 곳은 부모의 영역(공간)이며, 그안에서 있는 div녀석들은 div는 block특성이므로 한줄전체를 자신의 공간으로 차지한다. 그러므로 형제들은 아! 저기는 이미 사용중인 공간이구나 하고 빈공간인 밑으로 향한다. 그러면서 자식들은 부모의 공간안에서 벗어나는 모습을 보인 형태이다. 

 [ 예제2 - position:relative ] 

: position:absolute와 비교를 해보니까 확연하게 차이가 난다. aboslute는 부모안에서 자식들 끼리 겹치게 되어 마지막에 소환된 absolute-4가 전부 가린것이다. 나머지 1,2,3은 뒤에 숨겨져있으며, 나중에 배우게될 z-index에 설정해주면서 맨 앞에 보여줄 우선순위를 정할 수 도있다.

 
 4. position:fixed
 fixed은 우리주변에서 쉽게 검색만해도 우리가 자주접하는 속성값인데, 바로 광고의 배너를 페이지상에 띄어줄때 많이 사용한다. 바로 "뷰포트(view port)에 상대적으로 고정시킨다" 라는 의미이다.

 [ 예제1 - position:fixed ] 

 마무리 정리해보면, position의 값은 4가지의 다음과 같이 특성을 갖는다는걸 알게되었다.

  1) static

 자신의 위치 값을 스스로 결정하지 못한다. 주변 요소에 의하여 밀리면서 자기 자신의 위치를 잡는다.

 

  2) relative

 static과 absolute의 특성을 반반씩 취하고 있다. 주변 요소에 의하여 자신의 위치값이 결정되지만, offset(left, right, top, bottom)속성과 함께 사용되면 스스로도 자신의 위치 값을 결정할 수 있다.

 

  3) absolute

 흔히 레이어라고 부르는 녀석이 갖는 값으로서 다른 요소의 방해를 받지 않고 자기 자신의 위치를 스스로 결정한다.

오직 offset(left, right, top, bottom)값에 의하여 자신의 위치 값이 결정되기 때문에, 다른 요소들과 겹쳐 보일수도 있다.

 하지만, 이 녀석도 offset값의 기준이 offset값을 가지고 있는 부모로부터 시작되기 때문에, offset속성이 포함된 부모요소의 위치가 변경될 때 함께 따라서 움직인다. 완전히 절대적이지는 않다는 의미이다. 단, 부모태그가 body일때는 완전히 절대적인 위치를 갖고 다른 요소의 움직임에 영향을 받지 않는다.

  쉽게 말하면 부모를 기준(공간 안에서)으로 절대적 위치 좌표를 설정함.

4) fix
  화면에 상대적으로 고정시킨다.
주로 광고, 배너에 이용이 많이되므로 우리는 쉽게 접했던 속성값중 하나이다.