╰༼.◕ヮ◕.༽つ¤=[]——— CSS I Position 네 가지 속성 끝장내기

 

 

 

 

CSS ... 그중에서도 Position. 포지셔닝 공부가 부족한 것 같아 공부 겸 블로그에 정리하기로 했다.

부끄럽게도 Flex box로 모든 것이 해결될 줄 알았기에 그것만 공부했는데 ... (나머지는 대강 이런게 있구나~ 하고 넘어가버림) 

며칠 전부터 시작한 css animation challenge 를 하다보니 flex 만으로는 절~대 무리였다.

css animation에는 예전부터 욕심이 있었는데 그걸 이루려면 position 공부가 필수! 라는 생각이 들었다. 

 

1. position 에는 어떤 속성들이 있는지.

2. 각각의 속성은 어떤 차이가 있고 어떻게 사용되는지에 대해 다루려 한다.

 

MDN 출처는 여기

서적은 HTML5+CSS3 웹 표준의 정석을 참고했다.

 

 

---

 

static (기본값)

static ... 말그대로 고정된 기본값이다. 

우리가 아는 '일반적 문서의 흐름'을 따른다. 즉 요소를 나열한 순서대로 배치한다.

top, right, bottom, left 같은 속성은 사용할 수 없다. 그 흐름에 고정되어 있기 때문에 ! 

 

 

 

---

 

relative 와 absolute

내가 이 글을 이 공부를 하게 된 장본인들.

이 둘이 너무너무 헷갈렸다. 내 눈에는 분명 둘 다 top, bottom, left, right 이 네 속성을 가지고 움직이는 걸로 보이는데 둘은 다르단다.

relative와 absolute의 차이는 무엇일까? 어떻게 다른걸까? 어떤 때 relative를 쓰고 어떤 때 absolute를 쓰는걸까?

 

relative 

요소를 일반적인 문서 흐름에 따라 배치한다. 

그리고 바로 그 자리에서 ! top, bottom, left, right 속성을 사용할 수 있다.

기준은 흐름에 따라 배치된 '그 자리'다. 기준에서 저 네 속성을 이용해서 움직일 수 있다. 

 

absolute

문서의 흐름에 상관없이 top bottom left right 네 속성을 사용해 원하는 곳에 배치할 수 있다.

*** 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치한다. *** (MDN)

 

위치 지정 조상 요소란 ?

    position의 속성 값이 static이 아닌 모든 요소를 일컫는다. (기본값X)

    그중에서도 position: relative;인 요소.

 

그럼 만약에 위치 지정 조상 요소가 없다면 ?

    초기 컨테이닝 블록 (= 뷰포트 = 페이지영역 = 브라우저 화면) 을 기준으로 삼는다.

 

즉 absolute는 '자식'으로 언제나 부모를 찾아 기준으로 세워두고 이동한다.그리고 '부모'는 position: relative; 인 요소이다. 

 

 

 

---

 

 

sticky 와 fixed

relative와 absolute를 지나왔다면 다른 건 몰라도 하나는 정확히 알 수 있다.

position 속성을 이해하는 데 가장 중요한 건 '기준' 이다!

어떤 요소가 이 속성을 가진 요소의 기준이 되는 지 안다면 이해하기가 훨씬 수월해진다.

sticky와 fixed도 마찬가지로 어떤 걸 기준으로 삼는가 가 가장 중요한 특징이자 차이점이다.

 

sticky

끈끈함.

말그대로 끈끈한 효과(?)를 내는 신기한 속성이다.

sticky를 사용한 요소는 일반적 문서 흐름을 따라 배치된다. 

sticky의 진면목은 스크롤을 사용할 때 비로소 알 수 있다. 

때문에 sticky의 '기준'은 가장 가까운 스크롤 컨테이너(=스크롤 되는 요소)라고 할 수 있다. 

이 끈끈한 상태는 컨테이닝 블록의 반대편 모서리를 만나면 해제된다. 마치 아무 일도 없었던 것처럼! 정말 멋지다.

*주의사항

sticky를 사용할 때 한 가지 주의사항이 있다.

바로 기준이 되는 부모요소가 overflow: hidden 일 경우 끈끈이 효과는 동작하지 않는다.

 

fixed

fixed는 언뜻 보기에 absolute와 비슷하다.

하지만 absolute는 relative 속성이 있는 부모요소를 기준으로 삼는 반면,

fixed는 무조건 초기 컨테이닝 블록인 브라우저 창을 기준으로 삼는다. 

스크롤이 아~~~~주 길게 생긴다고 해도, fixed로 고정시킨 요소는 계속 고정되어 표시된다.

 

 

sticky로 만든 끈끈이 효과는 해제된다. 블록의 반대편 모서리를 만나면.하지만 fixed는 해제되지 않는다. 계~~~~~~속 고정되어 표시된다. 이 차이를 잘 기억하자.

 

 

 

---

 

 

 

어떤 요소가 기준이 되는가?

이걸 항상 염두에 두고 코딩을 해야겠다.

 

대강 이런게 있구나 ... 하고 넘긴 것들을 한 번 정리해보는 시간을 가졌다.나름 직접 만들어보면서 정리해보았는데 생각보다 더 유의미한 시간이 됐다.

 

실제 웹페이지에 어떻게 적용하고, 어떻게 응용할 것인가를 고민해볼 때이다.animation challenge는 물론이고 개인 프로젝트를 할 때 꼭! 활용해봐야겠다. 나름 효과적으로(?) 사용한 경우는 나중에 정리해서 올리거나 이 게시물에 추가하기로.

 

그럼 안녕!