HTML + CSS로 헤더 고정 테이블 만들기 | position: sticky 활용법 AI 생성 이미지: HTML + CSS로 헤더 고정 테이블 만들기 | position: sticky 활용법 스크롤 시 헤더가 고정되는 테이블 만들기 (Sticky Table Header) 많은 데이터를 한 화면에 보여줄 때 열 제목이 사라지면 사용성에 큰 불편이 생깁니다. 이 문서에서는 CSS의 position: sticky; 를 활용해 헤더를 항상 보이게 하는 방법을 단계별로 설명합니다. 실제 예제와 함께 따라하면 금방 적용할 수 있으며, 특히 "HTML + CSS로 헤더 고정 테이블 만들기 | position: sticky 활용법"을 적용하면 표 탐색이 훨씬 수월해집니다. 💡 기본 원리 핵심은 <thead> 의 셀에 position: sticky; 와 top: 0; 을 적용하고, 헤더를 감싸는 부모 컨테이너에는 스크롤이 가능하도록 overflow-y: auto; 를 설정하는 것입니다. 한 문장으로 정리하면: 헤더는 sticky로 고정하고, 스크롤 컨테이너가 있어야 정상 동작합니다. 다만 부모 요소에 overflow: hidden; 이나 일부 레이아웃 상황에서는 sticky가 무시될 수 있으니 주의하세요. 이 방식은 "HTML + CSS로 헤더 고정 테이블 만들기 | position: sticky 활용법"을 이해하는 데 핵심 개념입니다. 🧩 CSS 코드 .tableFixHead { overflow-y: auto; /* 세로 스크롤 가능 */ height: 400px; /* 테이블 높이 설정 */ } .tableFixHead thead th { position: sticky; /* 고정 위치 */ top: 0; /* 상단 기준으로 고정 */ background-color: #f8f8f8; /* 헤더 배경색 (가독성 향상) */ ...