JS없이 좀 특이한.. 브레드크럼 만들기

BSK·2024년 6월 17일
0
post-thumbnail

지라 티켓을 쳐내다 다음과 같이 특수한 경우의 브레드크럼 UI를 만들 일이 있었다. 요구조건은 다음과 같다.

  1. 브레드크럼 자체는 리프 노드가 보여야 한다.(브레드크럼의 스크롤 앵커는 우측 정렬)
  2. 그러나 브레드크럼의 너비가 화면 폭을 채우지 않는 경우, 브레드크럼은 좌측에 정렬되어야 한다.

js를 이용해서 조작하게 되면 빠르고 쉽게 할 수 있겠으나, 초기에 js가 실행되기 전 브레드크럼의 스크롤 위치가 원하는 위치에 없다가, js 가 실행되면서 스크롤 위치가 바뀌게 될 여지가 있었다. 그래서 css로만 어떻게 이 요구조건을 맞출 수 없을까 싶어서 고민을 했는데..

(wip)

TL;DR : ltr, rtl 잘 쓰면 할 수 있다.

profile
Biscuit Basket

0개의 댓글