코드 땜장이

 지난 번글로 position sticky를 소개 해보았다. 하지만 어떻게 써야 할지 감이 안잡하는 분들도 있을 것이다. 뭐 물로 사용 해분 본들도 있겠지...  그래서 이번에 scroll-snap-type과 같이 이용하여 재밌는 스크롤 액션을 만든것을 소개해 보겠다. 위의 코드를 간단하게 확인해보면 확인해야 할 키워드는  scroll-snap-type : y mandatory ; scroll-snap-align : start ; position : sticky ; 위 세 가지의 css속성이다. position: sticky만 사용 하는 경우 title의 위치를 스크롤되는 도중 어디에 위치 시킬지 결정 할 수 있는 것은 지난 포스트에서 안내를 하였다. scroll-snap-* scroll-snap 속성은 스크롤하는 행위를 멈추었을 때, 스크롤의 오프셋을 조정 할 수 있는 속성이다. 따라서 scroll에 영향을 받는 position: sticky속성과 케미가 좋다. scroll-snap-type scroll-snap-type은 어느 축에 맞출지와 엄격도를 지정 할 수 있다. 위의 속성정의에 따르면 y축에 scroll-snap을 맞추고 항상 snap효과를 주라는 요청이 되어있다. scroll-snap-align scroll-snap-align은 스냅 되는 대상의 영역(snap area)의 어디 기준으로 맞출지에 대해 결정을 해준다. 위의 속성으로 보면 article 클래스의 상단 영역에 맞추고자 하는 것이다. 조금만 더 깊에 들어가자면 snap area, snap position, scroll container와 같은 단어의 뜻을 알면 좋긴 하다만, 일단은 사용예제를 한번 보고 어떻게 써볼지에 대해 고민해보는것이 좋을 듯 하다.

  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 어떠한 요소도 사용이 불가능 하다. relative  static에서 결정된 위치 기반으로 top,

 요즘이 아닌 최소 5년전에 개발을 하던 분들은 아래의 코드들이 꽤나 익숙 할 것이다.  <a href ="javascript:" onclick =" foo () " > javascript: </a> <a href ="#" onclick =" foo () ;return false; " > # </a> <a href ="javascript:void(0)" onclick =" foo () " > javascript:void(0) </a>  요즘에는 함수를 실행하기 위해서 a태그를 이용하는 사람들은 거의 없을 것이다. 그러다 보니 위의 코드가 어색해 보인다. 당연하게도 요즘에서는 권장 되지 않는 방법이기도 하다. 하필 예전에는 왜 함수를 실행하기 위하여 a태그를 사용 하였을까?  생각해볼 만한 것은 button태그가 정상적으로 작동 안했다면? 이라고 생각이 들 뿐이다. 브라우저 버전에 따라서 버튼 모양이 달라졌다던가? 아니면 button의 기본 동작이 브라우저 별로 달랐다던가 하는 말이다.    위의 이미지만 확인해도 javascript: <- 이 것이 무엇을 뜻하는지는 감이 올 것이다. 당연하게도 위와 같은 행위는 잘 하지 않을 것이지만, 이런것이 가능하다. <a href ="javascript:void(0)" onclick =" foo () " > javascript:void(0) </a>  a태그를 이용하여 함수를 실행하기 위해서 사용 하기 위해서는 a태그 클릭시 기본적인 기능인 페이지이동을 막아야만 하였다. 따라서 위와 같이 javascript: pseudo protocol의 이용하되 평가값을 undefined를 이용 하여 페이지 이동을 막았다.  또한 예전에 href를 정의 안하는 꼼수는 사용 하지 못했다. 정의 안하면 현재

가끔 퍼블리싱을 하다보면 vue.js의 root엘리먼트가 항상 있어야 하는 것은 거슬리는 일이기도 하다. 혹은 관련이있어서 같은 부모를 가져야 하는 태그들이 있을 수 있다. 물론 아직도 display: block, inline만을 사용 하고 있다면, 딱히 불편함은 없을 수 있겠지만... grid와 flex없이는 이제 퍼블리싱 못하는 몸이 되어버렸다... < div style =" display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); " > < div style =" background: red; " > test1 </ div > < div style =" background: green; " > test2 </ div > < ul > < li style =" background: blue; " > 1 </ li > < li style =" background: purple; " > 2 </ li > </ ul > </ div > 위 코드의 결과를 보자. 딱 보아도 잘못 된것만 같은 무언가가 만들어졌다. < div style =" display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); " > < div style =" background: red; " > test1 </ div > < div style =" background: green; " > te