[CSS] layout - position

내가 css를 건들 때마다 시간을 잡아먹는 요소는 뭐가 있을까?

 

오타? 모르는 속성? 아니 단언컨데 나같은 코린이는 레이아웃 짜는게 제일 힘들거다

 

왜 얘는 가운데로 안 가지? 왜 얘네는 정렬이 안 맞지?

왜 니네는 붙어있고 니네는 붙질 못하니..

 

방금도 replit 풀면서 아차 싶었던 순간만 몇번인지 셀 수가 없다

레이아웃 관련 속성들을 아주 손바닥에 타투로 넣고 싶을 정도다.

---

position 속성은 html 요소가 위치를 결정하는 방식을 설정한다

결정하는 방식에는 다음과 같이 4가지가 있다.

 

정적 위치(static position) 
상대 위치(relative position)
고정 위치(fixed position)
절대 위치(absolute position)

정적 위치(static position)

HTML 요소의 위치를 결정하는 가장 기본적인 방식

position 속성값이 static으로 설정된 요소는 top, right, bottom, left 등의 속성값에 영향을 받지 않기 떄문에

단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식이다

 

 

상대 위치(relative position)

HTML 요소의 기본 위치를 기준으로 위치를 설정하는 방식

(HTML 요소의 기본 위치란? 해당 요소가 static position일 때 결정되는 위치를 의미한다)

그렇기 떄문에 relative로 설정하기만 해선 당장에는 아무런 변화가 없을 수 있다

따라서, 요소를 이동하기 위해선 반드시 속성값을 지정해줘야한다

 

 

고정 위치(fixed position)

뷰포트(viewport)를 기준으로 위치를 설정하는 방식

웹 페이지가 스크롤 되어도 고정 위치로 지정된 요소는 항상 같은 곳에 위치하게 된다

보통 웹페이지에서 항상 노출되면 좋은 네비게이션 바, 리모콘, 팝업 광고 등에 많이 사용하게 된다

 

여기서 잠깐, 뷰포트가 뭘까?

웹 페이지가 브라우저 화면 상에서 표시되는 영역이다

따라서 우리가 보통 하는 화면이 바뀐다 라는 말은 뷰포트에 표시되는 내용이 달라진다 라는 말과 비슷하다

 

 

절대 위치(absolute position)

고정 위치가 뷰포트를 기준으로 위치를 결정하는 것과 비슷하게 동작한다

단지 뷰포트(viewport)를 기준으로 하는 것이 아닌 위치가 설정된 부모요소를 기준으로 위치를 설정한다

하지만 부모 요소를 가지지 않는다면, HTML 문서의 body 요소를 기준으로 위치를 설정하게 된다

 

말로 설명하면 날로 먹는 느낌이니까 우리 코드를 보도록하자!

 

See the Pen Untitled by jayce_kim (@jayce-kim1123) on CodePen.

 

정적 위치 1 2 3 은 모두 부모요소의 첫번째부터 나열되어있다

모든 영역에 스타일 코드를 적용했지만 정적위치로 지정한 영역만 움직이지 않을 것을 확인할 수 있다

 

상대위치는 여기서 이동만 할 수 있다

안 쪽의 회색 박스에 있는 상대위치가 절대위치와 겹치지 않는 것은

정적위치 2가 끝나는 지점부터 상대위치의 원점이 시작하기 때문이다

그래서 딱 영역 1개만큼만 아래쪽으로 표시된 것이다

 

이와 달리 절대 위치 2는 같은 부모내의 다른 자식요소는 고려하지 않고

오직 부모의 시작점만을 원점으로 잡고 움직인다

 

고정위치의 html 코드는 회색박스의 자식요소이지만

고정위치는 부모요소를 고려하지 않고 무조건 뷰포트를 기준으로 원점을 잡기 떄문에 회색박스 안에 포함되지 않은 것을 확인할 수 있다

스크롤을 하더라도 노란색의 영역은 움직이지 않는 것도 확인할 수 있다

 

현재 뷰포트와 절대위치 1이 속한 부모는 크기가 같다

검은색 실선 박스의 넓이를 100%로 설정했기 때문이다

 

만,

고정위치와 절대위치 1은 서로 완벽하게 겹치지 않는다!

그 이유는 바로 절대위치 1의 부모요소에 3px의 테두리가 적용됐기 때문인다

왼쪽과 위쪽에 3px만큼의 공간이 밀리게 되니 고정위치 1의 시작지점은

뷰포트 기준으로 좌측상단에서 3px씩 이격한 곳이 된다

 

이를 확인하기 위해선 검은색 박스의 보더를 0px로 만들면 된다!

---

사실 포지션 개념에 대해서 알고 있는 것과

그걸 어떻게 사용하고 관련문제가 발생했을 때 어디가 문제일지 짐작해보는 것은 너무 다르다

사실 fixed를 써서 뭔가를 만들어보는데에만 급급했지 시작점을 생각할 때 배경의 마진값이나 보더값을 고려해보진 않았다

왜 내가 짠 화면이 정렬이 안 맞는지 이제는 더 쉽게 찾을 수 있을거 같다!