DOM구조는 그대로에 Pure CSS + SVG임.


아주 간단한 애니메이션부터 시작해서


필터, 숨기기


반응형


레이아웃 마개조라던가


이건 탭 background-image가 잘리게 하기 위해 clip-path 사용했음.

svg stroke 안티얼라이싱이 제대로 안되서 drop-shadow로 바꿀려고 시도중


일정 크기 이하의 탭일때는 텍스트 삭제 및 가운데 정렬을 구현하기 위해 컨테이너 쿼리를 사용


포커스된 탭에서 문제가 있어서 안썼지만(정확히 말하자면 새탭 만들때 문제가 생김),

북마크 쪽에서는 엘리먼트 단위의 스크롤을 위해 scroll-snap 사용


counter 사용


문제는 이걸 하나로 우겨넣고 DOM 구조 안건드는 동시에 레이아웃 충돌이 안나게 만들기가 굉장히 힘들다는것.

겨울에 자바 스크립트쪽도 패키지도 하나 해야겠다.

CSS 빡세게 건들기는 정신건강에 나쁜듯..