한 개발자의 노트패드

오랜만입니다. 최근 글을 쓸 시간이 없어서, 글을 잘 못썼습니다. 각설하고, 오늘은 최근 css에서 자주 사용되고 있는 가상 선택자인 where, has, not이라는 3가지의 선택자에 대해 알아보겠습니다. where()where()은 인자로 여러 개의 선택자를 쉼표(,)로 구분하여 넘길 수 있게 합니다.예를 들자면.:where(a1, a2, a3) { color : black;}위와 같은 where()을  풀어 해치면a1,a2,a3{ color:black;}이런식으로 우리가 보았던 익숙한 css를 볼 수가 있죠.겉으로 보기엔 힘들게 이런 걸 사용하나 쉽지만, 생각보다 이점이 많습니다. See the Pen Untitled by 이규한 (@chmqedde) on CodePen.    반복문 처럼 사용 ..

position : fixed 속성이 깨지는 이슈는 여러가지가 있습니다. 보통 fixed 스타일을 탑에 컴포넌트를 고정시키기 위해 사용하는데, 대게 이 경우 부모 요소에 css가 적응이 안되어 있다거나, z-index가 겹쳐서 스타일이 깨질 수도 있습니다. 물론 위에 두개가 아닌 다른 이유도 많습니다. 오늘은 그 중 부모요소에 transform을 설정해서 깨지는 이슈에 대해 알아보겠습니다. 우선 fixed 속성은 요소의 위치를 뷰포트에 상대적으로 지정합니다. 그 덕분에 페이지의 스크롤을 움직여도, 고정된 위치에 출력이 되는 것이죠. 하지만 부모 요소에 transform 속성을 적용하면 이야기가 달라지게 됩니다. transform이 적용된 컴포넌트는 새로운 뷰포트로 설정이 되는데, 이 때 자식요소의 스타일..