캐러셀을 키보드로 넘기지 않았는데 Tab 키를 누르는 순간 화면 밖 슬라이드의 버튼이나 링크에 포커스가 사라진 것처럼 보이는 경우가 있습니다. 실제로는 포커스가 없어진 것이 아니라, 현재 보이지 않는 슬라이드 안의 포커스 가능한 요소로 이동한 상태일 수 있습니다. 이 문제는 단순히 overflow: hidden을 적용한다고 해결되지 않습니다. 화면에서 잘라 보이지 않게 만드는 것과 키보드 포커스를 막는 것은 별개의 동작이기 때문입니다. 2026년 9월 기준으로는 CSS interactivity와 HTML inert를 목적에 따라 구분해서 보는 것이 좋습니다. CSS만으로 현재 슬라이드의 상호작용 상태를 제어하고 싶다면 interactivity가 흥미로운 선택지지만, 아직 브라우저 지원 범위를 확인해야 하..

CSS 커스텀 속성으로 숫자나 색상 값을 바꿨는데 애니메이션이 부드럽게 이어지지 않고 시작값에서 끝값으로 갑자기 튀는 경우가 있습니다. 예를 들어 --progress: 0에서 --progress: 100으로 값을 바꾸면서 transition을 걸었는데 중간 과정이 보이지 않는 식입니다. 이때 transition-duration이나 ease를 계속 바꾸기보다 먼저 확인할 것은 해당 CSS 변수를 브라우저가 어떤 타입의 값으로 인식하고 있는지입니다. 등록하지 않은 커스텀 속성은 브라우저가 숫자, 길이, 색상 같은 구체적인 타입을 알지 못하기 때문에 중간값을 계산하지 못하고 이산적으로 바뀔 수 있습니다. @property는 이 변수의 타입과 초기값, 상속 여부를 명시해 브라우저가 값을 보간할 수 있게 만드는 ..

HTML의 data-* 속성에 숫자나 색상 값을 넣어 두고 CSS에서 바로 쓰고 싶을 때가 있습니다. 예를 들어 카드마다 너비나 강조색만 다르게 지정하려고 다음처럼 작성할 수 있습니다. html 카드 내용 하지만 예전 방식의 attr()은 주로 content에서 문자열을 꺼내는 용도로 알려져 있었기 때문에 다음 코드가 기대대로 동작하지 않는 환경이 많았습니다. css .card { width: attr(data-width); color: attr(data-color); } 최근 확장된 attr() 문법은 속성 값을 단순 문자열로 가져오는 데서 끝나지 않고 type()으로 length, number, color 같은 CSS 데이터 타입을 명시할 수 있습니다. Chrome은 133부터 이 확장 문법을 여러 ..

Grid나 Flex 레이아웃에서 카드 사이에 구분선을 넣을 때 흔히 각 자식 요소에 border를 주거나::before,::after를 붙입니다. 문제는 열 수가 바뀌거나 Flex가 여러 줄로 접히기 시작하면 마지막 항목의 선을 지우는 조건까지 함께 관리해야 한다는 점입니다. Chrome과 Edge 149부터 사용할 수 있는 CSS gap decorations는 접근 방식이 다릅니다. 항목에 선을 붙이는 대신 이미 존재하는 gap 공간에 선을 그립니다. 레이아웃 간격과 구분선 장식을 분리할 수 있다는 것이 핵심입니다. 자식 border와 가장 큰 차이는 선의 기준점입니다 예를 들어 3열 카드 Grid가 있다고 해보겠습니다. css .card-list { display: grid; grid-template..

CSS if()를 쓰기 시작하면 조건에 따라 속성 값을 한 줄 안에서 바꿀 수 있어 CSS가 꽤 간결해집니다. 문제는 2026년 9월 22일 기준으로 아직 모든 주요 브라우저에서 동일하게 사용할 수 있는 기능이 아니라는 점입니다. MDN도 if()를 Limited availability와 Experimental로 표시하고 있습니다. 여기서 fallback을 하나만 생각하면 실수가 생깁니다. 실제로는 브라우저가 if() 자체를 이해하지 못하는 경우와 if()는 이해하지만 조건이 하나도 맞지 않는 경우를 따로 처리해야 합니다. CSS if()의 fallback은 두 단계로 생각해야 합니다 가장 안전한 기본 형태는 아래처럼 같은 속성을 두 번 선언하는 방식입니다. css .card { padding: 16px..

페이지 길이가 길어질수록 브라우저는 당장 화면에 보이지 않는 아래쪽 콘텐츠까지 처리해야 할 수 있습니다. 카드 목록, 긴 설명 섹션, 댓글 영역처럼 첫 화면 밖에 콘텐츠가 많이 이어지는 페이지라면 HTML과 이미지 최적화만으로는 처음 열릴 때의 묵직한 느낌이 남을 수 있습니다. 이때 CSS의 content-visibility: auto를 이용하면 화면 밖 콘텐츠의 렌더링 작업을 필요한 시점까지 미룰 수 있습니다. 핵심은 페이지 전체에 무작정 한 번 적용하는 것이 아니라, 브라우저가 건너뛰어도 되는 콘텐츠를 적당한 섹션 단위로 나누는 것입니다. content-visibility가 줄이는 것은 다운로드가 아니라 렌더링 작업입니다 content-visibility: auto는 이미지 파일 크기를 줄이거나 HT..

Flexbox나 Grid로 카드 위치를 바꿨는데 Tab 키를 눌렀을 때 포커스가 화면에서 보이는 순서와 다르게 튄다면, 단순한 z-index나 포커스 스타일 문제가 아닐 수 있습니다. order, flex-direction: row-reverse, grid-template-areas, 명시적 Grid 배치처럼 시각적 위치만 바꾸면 DOM에 적힌 순서와 화면 배치 순서가 서로 달라질 수 있기 때문입니다. CSS Display Level 4의 reading-flow는 이런 경우 block·flex·grid 컨테이너 안에서 음성 출력과 선형 순차 탐색의 순서를 조정하도록 설계된 속성입니다. 다만 이 기능은 DOM 구조를 대신 고쳐주는 만능 도구가 아니라, 논리적인 소스 순서를 유지한 상태에서 반응형 레이아웃처..

CSS를 수정할 때마다 선택자가 길어지고!important가 하나씩 늘어난다면, 문제는 특정 규칙 하나가 약해서가 아니라 스타일의 우선순위를 관리하는 구조 자체에 있을 수 있습니다. 예를 들어 외부 라이브러리 CSS, 공통 스타일, 컴포넌트 스타일, 페이지별 수정 CSS가 한데 섞이면 나중에 작성한 사람이 더 강한 선택자를 만들면서 충돌을 해결하게 됩니다. 처음에는 작동하지만 시간이 지나면.page.content.card.button 같은 선택자와!important가 계속 쌓입니다. CSS의 @layer는 선택자를 더 강하게 만드는 대신 "어떤 종류의 스타일이 우선하는지"를 먼저 정할 수 있게 해줍니다. 이미 주요 브라우저에서 폭넓게 사용할 수 있는 기능이므로 새 프로젝트뿐 아니라 기존 CSS를 단계적으..

캡컷 PC에서 자동 자막이 영상 초반에는 정확한데 뒤로 갈수록 조금씩 밀린다면 자막 문장을 하나씩 옮기기 전에 원본 영상의 프레임레이트와 자막 생성 이후의 편집 여부부터 확인하는 것이 좋습니다. 특히 스마트폰 촬영본, 화면 녹화 영상처럼 가변 프레임레이트인 소스는 편집 과정에서 시간 기준이 달라져 긴 영상일수록 싱크 오차가 눈에 띌 수 있습니다. 이런 경우 원본을 고정 프레임레이트로 변환한 뒤 자막을 다시 생성하는 편이 수십 개의 자막을 손으로 보정하는 것보다 빠르고 안정적입니다. 먼저 자막이 어떻게 밀리는지 확인하세요 같은 자막 싱크 문제처럼 보여도 어긋나는 방식에 따라 원인이 다릅니다. 영상을 처음부터 끝까지 재생하면서 초반, 중간, 후반 세 지점만 확인해도 방향을 잡을 수 있습니다. 증상먼저 의심할..

윈도우 11에서 파일이나 폴더를 마우스 오른쪽 버튼으로 눌렀는데 메뉴가 몇 초 뒤에 뜨거나, ‘더 많은 옵션 표시’를 누르는 순간 탐색기가 멈추는 일이 있습니다. 심하면 작업 표시줄과 바탕화면까지 잠깐 사라졌다가 다시 나타나기도 합니다. 이럴 때 탐색기 자체만 계속 재시작하거나 레지스트리부터 수정하면 원인을 놓치기 쉽습니다. 우클릭 메뉴에는 압축 프로그램, 클라우드 동기화, PDF 프로그램, 그래픽 관련 도구처럼 다른 프로그램이 추가한 기능도 함께 연결되기 때문입니다. 특히 중요한 것은 모든 증상을 같은 방법으로 고치려 하지 않는 것입니다. 어디에서 느려지는지에 따라 먼저 확인할 곳이 달라집니다. 우클릭 메뉴가 뜨기까지 몇 초씩 기다려야 한다면 파일 탐색기 자체는 빠른데 파일이나 폴더를 오른쪽 클릭할 때..