본문 바로가기

리팩토링2

[Prolog 시즌3] SelectBox (dropdown) 리팩토링 2 지난 글에 이어서, select(dropdown menu) 리팩토링 2편입니다. [Prolog 시즌3] SelectBox (dropdown) 리팩토링 - 접근성 UP 🌸 프로젝트를 하면서 정리한 글입니다. 피드백은 언제나 격한 환영 🌸 전에 UX 공부하다가 '드롭다운과 스크롤 디자인'이라는 주제의 글을 본 적이 있다. 기억에 남는 이야기로 드롭다운의 경 dev-hyun.tistory.com 피드백은 언제나 환영입니다. 🌸 🛠 Custom Select Tag(dropdown menu) 리팩토링 디토랑 나랑 한 작업 (이 포스팅부터 select, select box, dropdown을 모두 드롭다운이라고 쓰겠다)은 다음 4가지이고, 여기서 조금씩 코드만 수정했다. 그래서 사실상 리팩토링이 기능적으로 들어간 .. 2021. 8. 23.
[Prolog 시즌3] SelectBox (dropdown) 리팩토링 - 접근성 UP 🌸 프로젝트를 하면서 정리한 글입니다. 피드백은 언제나 격한 환영 🌸 전에 UX 공부하다가 '드롭다운과 스크롤 디자인'이라는 주제의 글을 본 적이 있다. 기억에 남는 이야기로 드롭다운의 경우 활성화되었을 때, 화살표의 방향에 대해서 어떻게 보아야하는지 고찰한 내용과, 요즘에는 화살표를 가리고 모달 느낌으로 만들어버리는 트렌드로 자리잡고 있다는 내용이 있다. 시즌 1에서 드롭다운 메뉴를 직접 구현해보고 싶다는 의지로 페어와 함께 유튜브를 참고해서 커스텀한 dropdown 메뉴를 만들었다. 태그와 태그를 커스텀하면 되지 않냐는 의견도 있지만, 모든 브라우저에서 동일한 모습을 보여주고 싶어서 ul 태그와 li태그를 통해서 모달처럼 위에 떠있는 형태로 만들었다. 🛠 Custom Select Tag(dropdow.. 2021. 8. 22.