UI Code Lab

웹사이트를 읽다 보면 상단에 얇은 바가 스르륵 차오르는 걸 본 적 있으신가요? 이건 바로 스크롤 퍼센트 기반 프로그레스 바(progress bar)입니다. 사용자가 페이지를 얼마나 읽었는지 직관적으로 보여주는 UI로, 사용자 경험(UX)을 높이는 데 효과적이에요. 이번 글에서는 라이브러리 없이 바닐라 JavaScript만으로 이 기능을 구현하는 방법을 소개합니다. 🎯 구현 목표사용자가 스크롤한 비율에 따라 상단 바의 너비가 실시간으로 변함HTML, CSS, JavaScript만 사용반응형 웹에서도 자연스럽게 작동 🧩 HTML 구조 progress-container: 전체 프로그레스 바 영역progress-bar: 실제 너비가 변하는 바 요소 🎨 CSS 스타일링 .progress-container..

웹에서 데이터를 표(table) 형태로 보여주는 건 흔한 일이지만, 모바일 환경에서는 표가 잘려 보이거나 가독성이 떨어지는 경우가 많습니다. 이럴 때 유용한 방법이 바로 table을 ul, li 구조로 바꿔 반응형으로 구현하는 것입니다. 이번 글에서는 실제 예제를 통해 table을 ul/li로 바꾸는 방법과, 접근성(Accessibility)까지 고려한 마크업 전략을 소개합니다. ✅ 왜 table 대신 ul, li를 사용할까? 항목tableul, li반응형 구현어려움유연함스타일 커스터마이징제한적자유로움접근성명확한 구조 제공추가 속성 필요모바일 가독성낮음높음table은 의미론적으로는 좋지만, 작은 화면에서 스크롤 없이 보기 어렵고 스타일링도 제한적입니다. ul, li 구조는 더 유연하게 레이아웃을 구성할 ..