UI Code Lab

스크롤을 내리면 메뉴나 헤더가 화면 상단에 고정되어 계속 보이는 경험, 다들 한 번쯤 해보셨죠? 이런 기능은 사용자 탐색 효율을 높이고, 상호작용 요소에 집중도를 높여주는 UI 기법 중 하나예요. 이번 글에서는 position: sticky 와 자바스크립트를 활용해 스크롤 위치에 따라 고정되는 요소(Sticky UI) 를 만드는 방법을 소개합니다. 🎯 구현 목표특정 영역에서 스크롤 시 요소 고정순수 CSS 또는 JS로 구현반응형 웹에서도 유연하게 작동 ✍️ 기본 CSS 방식 – position: sticky 가장 간단한 방식은 CSS의 position: sticky 속성을 사용하는 것입니다. .sticky { position: sticky; top: 0; /* 화면 위에서 얼마나 떨어진 위치에 고정..

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