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; /* 헤더 배경색 (가독성 향상) */ ...

레이어 팝업 센터 정렬, 이 코드만 알면 끝 (CSS 예제 포함) 이벤트 배너나 공지사항을 띄울 때 레이어 팝업(center 정렬) 을 깔끔하게 잡는 게 생각보다 어렵습니다. 화면 크기가 변해도 가운데에 고정되고, 모바일에서도 자연스럽게 보이게 하려면 position , top , left , transform 을 정확하게 이해해야 합니다. 이 글에서는 아래 내용을 예제로 정리합니다. 레이어 팝업(center 정렬)의 기본 개념 자주 사용하는 position: absolute / fixed 정렬 방식 질문에서 주신 스타일 top: 3.25%; left: 50%; transform: translateX(-50%) 의 의미 실무에서 바로 쓰는 반응형 레이어 팝업 HTML/CSS 예제 1. 레이어 팝업(center 정렬)이란? 레이어 팝업(레이어 팝업창) 은 새 창을 띄우는 것이 아니라, 현재 페이지 위에 div 레이어를 띄워서 공지사항, 광고, 이벤트 등을 보여주는 방식을 말합니다. 검색엔진(SEO) 입장에서도 같은 페이지 안에 HTML이 존재 하기 때문에 팝업 안의 텍스트도 정상적으로 인덱싱될 수 있습니다. 즉, “레이어 팝업 센터 정렬”, “레이어 팝업 만드는 방법”과 같이 관련 키워드를 적절히 넣어주면 검색 노출에 도움이 됩니다. 2. 질문에서 주신 레이어 팝업 스타일 분석 질문에서 주신 스타일은 다음과 같습니다. <div class="layer-popup" style="width:1210px; z-index:9001; position:absolute; top:3.25%; left:50%; transform:translateX(-50%);"> 레이어 팝업 내용 <...

JAVASCRIPT / ASYNC 자바스크립트 비동기 처리 정복: 콜백 지옥에서 Async/Await까지 싱글 스레드 언어인 JavaScript가 서버 통신과 같은 무거운 작업을 멈춤 없이 처리하는 비결을 알아봅니다. Callback, Promise, 그리고 Async/Await로 이어지는 비동기 처리 패턴의 진화 과정을 실무 코드로 정리했습니다. 📑 목차 1. 싱글 스레드와 비동기(Asynchronous)의 필요성 2. 과거의 유산: 콜백(Callback)과 콜백 지옥 3. 모던 JS의 표준: 프로미스(Promise)의 등장 4. 궁극의 가독성: Async / Await 패턴 5. [실전] Fetch API로 사용자 데이터 조회하기 1. 싱글 스레드와 비동기(Asynchronous)의 필요성 자바스크립트는 기본적으로 싱글 스레드(Single Thread) 언어입니다. 즉, 한 번에 하나의 작업만 처리할 수 있습니다. 만약 서버에서 1GB짜리 데이터를 받아오는 작업을 동기(Synchronous)로 처리한다면, 다운로드가 끝날 때까지 브라우저는 멈춰버리고(Freezing) 사용자는 아무것도 할 수 없게 됩니다. 이러한 문제를 해결하기 위해 자바스크립트는 비동기(Asynchronous) 모델 을 채택했습니다. 무거운 작업(서버 요청, 타이머 등)은 브라우저의 Web API에게 위임하고, 다음 코드를 즉시 실행합니다. 작업이 끝나면 이벤트 루프(Event Loop) 가 결과를 다시 메인 스레드로 가져와 실행하는 방식입니다. 2. 과거의 유산: 콜백(Callback)과 콜백 지옥 ...