윈도우에서 다크모드를 켰는데 웹사이트는 여전히 흰색이거나, 화면 배경은 어두워졌는데 입력창만 밝게 남아 있는 경우가 있습니다. 반대로 사이트에서 다크모드를 구현하지 않았는데 Chrome에서는 색상이 자동으로 바뀌기도 합니다. 이 문제는 모두 같은 설정으로 해결되지 않습니다. 사용자의 테마 선호를 감지하는 CSS, 웹페이지 요소의 색상을 지정하는 CSS, 브라우저가 직접 그리는 기본 UI의 색상 처리가 서로 다르기 때문입니다. 이번 글에서는 Chrome 개발자 도구로 문제가 발생하는 위치를 확인하고, prefers-color-scheme과 color-scheme을 어떤 상황에서 수정해야 하는지 구분합니다. 실제 사이트를 수정하기 전에 사용할 수 있는 독립적인 HTML 테스트 코드도 제공합니다.화면 증상에 ..

웹사이트에서 팝업이나 모달 창을 만들었는데 상단 메뉴, 고정 헤더, 사이드바 뒤로 숨어버리는 경우가 있습니다. CSS의 z-index를 100에서 9999로, 다시 999999로 높여도 달라지지 않는다면 숫자보다 요소가 속한 겹침 구조를 살펴봐야 합니다. 핵심은 두 가지입니다. 일반 HTML 요소는 부모의 stacking context(쌓임 맥락)에 영향을 받지만, 브라우저의 top layer에 올라간 모달은 일반 문서의 z-index 계층과 다른 규칙으로 표시됩니다. 문제를 해결하려면 현재 팝업이 어느 쪽에 해당하는지부터 구분해야 합니다. z-index가 999999인데도 팝업이 뒤에 표시되는 이유 z-index는 요소가 겹쳐지는 순서를 조절하는 CSS 속성입니다. 그러나 모든 요소의 z-index를 ..

PC에서는 정상인 웹사이트가 스마트폰에서는 하단 버튼이 잘리거나 화면 아래에 불필요한 스크롤이 생길 때가 있습니다. 특히 CSS에서 height: 100vh를 사용하는 로그인 화면, 첫 화면, 전체 화면 메뉴에서 나타나기 쉬운 문제입니다. 하지만 모든 하단 잘림 현상을 100dvh로 바꾸는 것만으로 해결할 수는 없습니다. 브라우저 주소창이 차지하는 공간인지, 콘텐츠가 화면보다 긴 것인지, 입력창을 눌렀을 때 나타나는 가상 키보드 때문인지에 따라 수정할 부분이 다릅니다. 이번 글에서는 세 상황을 구별하고, CSS 수정 예제와 Chrome 개발자 도구의 검증 절차를 함께 살펴봅니다. 마지막에는 직접 파일로 저장해 비교할 수 있는 최소 재현 예제도 제공합니다. 하단이 언제 잘리는지에 따라 수정할 코드가 달라집..

웹사이트의 메뉴나 사이드바에 position: sticky를 적용했는데, 페이지를 내려도 화면에 고정되지 않는 경우가 있습니다. CSS에 sticky를 선언했는데도 요소가 그대로 사라지거나, 잠깐 고정되다가 예상보다 일찍 움직이기도 합니다. 이때 top 값만 계속 조정하면 해결되지 않을 수 있습니다. sticky는 브라우저 화면에 무조건 붙는 기능이 아니라, 상위 요소의 스크롤 설정과 자신이 속한 영역의 경계에 따라 움직이기 때문입니다. 문제를 좁히려면 세 가지를 구분해야 합니다. 고정을 시작할 위치가 지정됐는지, 어떤 요소를 기준으로 스크롤하는지, 그리고 고정된 상태로 이동할 공간이 남아 있는지입니다. 페이지에 붙일까, 스크롤 박스 안에 붙일까? 수정할 CSS를 결정하기 전에 고정하려는 위치부터 생각해..

웹페이지를 아래로 스크롤하면 요소가 나타나거나 상단 진행 표시줄이 늘어나도록 CSS 애니메이션을 설정했는데, 아무 반응이 없을 때가 있습니다. 반대로 스크롤하기도 전에 애니메이션이 끝나거나, 특정 브라우저에서만 콘텐츠가 보이지 않는 경우도 있습니다. 이때 animation-timeline 속성 하나만 바꾸는 것으로는 해결되지 않을 수 있습니다. 애니메이션의 진행 기준, CSS 선언 순서, 실제 스크롤 영역, 브라우저 지원 여부가 서로 연결되어 있기 때문입니다. 이번 글에서는 CSS의 scroll()과 view()가 각각 어떤 움직임을 추적하는지 구분하고, 오류가 발생하는 조건을 재현용 코드와 함께 살펴봅니다. 브라우저가 기능을 지원하지 않을 때에도 중요한 콘텐츠가 정상적으로 표시되도록 대체 스타일을 구성..

웹사이트에서 Tab 키를 눌렀는데 버튼이나 링크 주변에 아무 표시도 나타나지 않는다면 두 가지를 구분해야 합니다. 키보드 포커스가 실제로 이동하지 않는 문제일 수도 있고, 포커스는 정상적으로 이동하지만 CSS 때문에 테두리만 보이지 않는 문제일 수도 있습니다. 두 상황은 해결 방법이 다릅니다. 무작정 CSS를 추가하기보다 Chrome 개발자 도구로 포커스 이동 여부를 확인하면 수정해야 할 위치를 훨씬 정확하게 찾을 수 있습니다. 이 글에서는 CSS의 outline과:focus-visible을 이용한 표시 복구, document.activeElement를 이용한 포커스 추적, tabindex 순서 확인까지 실제 적용 가능한 순서로 설명합니다. 포커스가 없는 것과 보이지 않는 것은 다릅니다 포커스는 현재 키..

웹사이트 상단 메뉴나 사이드바를 스크롤할 때 고정하려고 position: sticky를 적용했는데, 일반 요소처럼 위로 사라지는 경우가 있습니다. CSS 문법은 맞는데도 작동하지 않는다면 sticky 요소 자체보다 부모 요소의 overflow, 실제 스크롤 영역, 이동할 수 있는 공간을 확인해야 합니다. 특히 페이지 전체를 스크롤하는 구조와 특정 박스 내부를 스크롤하는 구조는 해결 방법이 다릅니다. 무조건 overflow: hidden을 삭제하거나 position: fixed로 바꾸면 다른 레이아웃 문제가 생길 수 있습니다. 이번 글에서는 크롬 개발자 도구를 사용해 어느 요소가 문제인지 찾고, HTML과 CSS 수정 전후를 비교하면서 적절한 해결 방법을 선택하는 과정을 설명합니다. sticky가 고정되는..

웹사이트를 열었을 때 글자는 빠르게 나타나는데 대표 이미지가 한참 뒤에 표시되거나, 아래로 스크롤할 때 사진이 뒤늦게 나타나는 경우가 있습니다. 이미지를 불러오는 도중 본문이나 버튼이 아래로 밀리는 현상까지 발생하기도 합니다. 이런 문제를 해결하려고 모든 이미지에 loading="lazy"를 추가하면 오히려 첫 화면의 로딩 속도가 느려질 수 있습니다. 이미지마다 화면에 나타나는 위치와 중요도가 다르기 때문입니다. 이번 글에서는 HTML 이미지 속성 세 가지인 loading, fetchpriority, width·height를 중심으로 이미지 표시 속도와 화면 밀림을 구분해 개선하는 방법을 살펴봅니다. 일반 웹사이트뿐 아니라 티스토리처럼 스킨과 본문 이미지가 함께 사용되는 블로그에도 적용할 수 있는 기준입..

PC에서는 정상적으로 표시되던 웹사이트가 모바일에서 갑자기 옆으로 밀리는 경우가 있습니다. 화면 오른쪽에 빈 공간이 생기거나, 페이지를 좌우로 스크롤해야 본문 전체를 볼 수 있는 현상입니다. CSS Grid로 만든 레이아웃이라면 화면 너비보다 커진 그리드 열이나 그 안의 콘텐츠를 의심해 볼 수 있습니다. 특히 grid-template-columns에 1fr을 사용했는데도 열이 줄어들지 않는 문제가 자주 혼동을 일으킵니다. 이 문제는 단순히 가로 스크롤을 숨기는 것보다 어떤 요소가 실제 너비를 늘리는지 확인한 뒤 수정해야 합니다. CSS Grid의 열 크기 계산, Grid 항목의 최소 너비, 반응형 열 설정을 구분해 적용하는 방법을 살펴보겠습니다. 1fr을 사용했는데 왜 모바일 화면을 넘어갈까? 1fr은 ..

웹사이트 화면은 빠르게 나타나는데 메뉴를 누르면 한참 뒤에 열리거나, 검색창에 글자를 입력했는데 화면 반영이 늦어지는 경우가 있습니다. 이때 이미지 용량이나 서버 응답 시간만 줄여서는 문제가 해결되지 않을 수 있습니다. 페이지가 보이는 속도와 사용자의 행동에 반응하는 속도는 서로 다른 성능 문제이기 때문입니다. 이러한 반응성을 살펴보는 대표적인 지표가 INP(Interaction to Next Paint)입니다. 이번 글에서는 사이트 운영자가 무료 도구로 INP를 확인하고, 실제로 느린 버튼이나 메뉴를 재현한 뒤, 지연이 발생한 부분에 맞춰 수정하는 방법을 설명합니다. HTML·CSS를 다루는 초보 제작자도 진단 순서를 따라갈 수 있도록 구성했습니다. 페이지 로딩이 빠른데 클릭이 느리다면 INP를 살펴볼..