코드 땜장이

  fixed fixed의 경우 컨테이닝 블록을 따져보아야 한다.  1. 뷰포트 * 뷰포트라는 말을 처음들어본 분이 있을지 모르니 간단하게 기기 해상도에 따른 화면 사이즈라고 보면 된다. 2. 특이상황에서의 조상      1) transform이나 perspective (en-US) 속성이 none이 아님.      2) will-change 속성이 transform이나 perspective임.      3) filter 속성이 none임. (Firefox에선 will-change가 filter일 때도 적용)      => filter가 none일 때에는 특정 조건이 뭔지 파악이 애매함.      4) contain 속성이 paint임. 위의 조건에 따라 생긴 컨테이닝 블록을 기준으로 top, right, bottom, left 요소를 사용 할 수 있다. position absolute의 컨테이닝 블록이 될 수 있다. 새로운 쌓임 맥락을 생성한다. sticky  가장 난해한 규칙과 행동을 보여주는 position 속성일 수 있다. sticky속성인 경우에는 스크롤이 가장 중요하다. 뭐 물론 테이블에도 이용이 가능하지만, 웬만해서는 요즘에는 테이블을 쓰지 않으니 설명은 생략 하겠다. sticky는 위의 예제를 보는 것이 좀 더 해당 속성에 잘 설명이 될 수 있다. 위의 예제 처럼 스크롤이 해당 영역을 지나가기 전에는 relative처럼 행동을 하지만 스크롤로 지나간 후 부터는 스크롤영역을 따라가는 것을 확인 할 수 있다. 이걸로 다음 포스팅에서는 재미있는 예제를 보여주도록하겠다.

 position을 주제로 하는 것은 꽤나 까다로운 내용이다. position을 바꿔 주는 것만으로 해당 엘리먼트의 특성이 매우 변하기 때문이다.  간단하게만 나열하면, 가장 큰 변경은 컨테이닝 블록이 변경 된다. top, left, botton, right 속성을 정의 할 수 있다. 새로운 쌓임맥락이 생성 된다.  꽤나 내용이 많고 응용 또한 많고 조심해서 써야 하는 주제이기 때문에 천천히 진행하고자 한다.  모든 태그들의 기본적인 position은 static이라고 보면 된다. 아직까지 필자는 다른 포지션을 갖는 태그는 본적이 없다. 뭐 물론 셀렉트 박스의 열린 옵션들 스크롤이나 파일 오픈시의 시스템 다이얼로그는 예외로 하자 그것들은 DOM으로써 제어가 불가능 하니....  위의 언급 중 컨테이닝 블록, 쌓임맥락을 처음 들어보는 분들도 있을 것이다. 간단하게만 설명 하겠다. 뭐 자세한 내용은 추후에 내용을 담을 수 있도록 노력해보겠다.  특정 요소의 크기나 위치에 관여 하는 것은 무엇인가? 아주 추상적이기 때문에 다시 예를 들겠다. 특정 태그 A태그의 height: 100%를 지정하였을 때, 어떠한 요소 기준으로 100%로라는 것일까? 바로 상위 부모 일수도 있고 더 위의 부모 일수도 있고, 뷰포트일 가능성도 있다. 즉, 특정 태그 A의 크기 위치에 관여 하는 것이 컨테이닝 블록이다.  쌓임 맥락은 무엇인가? A태그와 B태그가 겹치는 공간이 생기면 어떻게 할 것인가? 다들 z-index는 들어보았을 것이다. A태그와 B태그가 z-index가 같고 같은 부모를 공유 하고 있을때, 어떤 태그를 상위에 노출 시킬지에 결정 할 수 있다. 쌓임 맥락은 그 Z축을 개념화 한 것이다. static  위의 설명은 조금 새긴 했다. 가장 간단한 static을 설명 하자면, 그냥 컨텐츠의 일반 속성에 따라서 엘리먼트가 위치 한다. top, right, bottom, left 어떠한 요소도 사용이 불가능 하...