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 프로그램, 그래픽 관련 도구처럼 다른 프로그램이 추가한 기능도 함께 연결되기 때문입니다. 특히 중요한 것은 모든 증상을 같은 방법으로 고치려 하지 않는 것입니다. 어디에서 느려지는지에 따라 먼저 확인할 곳이 달라집니다. 우클릭 메뉴가 뜨기까지 몇 초씩 기다려야 한다면 파일 탐색기 자체는 빠른데 파일이나 폴더를 오른쪽 클릭할 때..

버튼에 위아래로 똑같이 10px의 padding을 줬는데도 글자가 미묘하게 위나 아래로 치우쳐 보일 때가 있습니다. 이때 초보자가 가장 먼저 하는 실수는 padding-top과 padding-bottom 값을 1px씩 바꿔가며 눈으로 맞추는 것입니다. 처음에는 해결된 것처럼 보여도 폰트를 바꾸거나 영문과 한글을 섞고, 굵기를 변경하고, 다른 운영체제에서 확인하면 다시 어긋나는 경우가 생깁니다. 이 문제는 버튼 박스의 중앙을 못 찾은 것이 아니라 글꼴이 차지하는 보이지 않는 세로 공간까지 함께 계산되고 있기 때문에 생길 수 있습니다. 최근 CSS에서는 이 부분을 직접 다룰 수 있는 text-box를 사용할 수 있습니다. padding을 비대칭으로 맞추는 방법이 오래가기 어려운 이유 예를 들어 아래처럼 버튼..

높이가 서로 다른 이미지나 카드를 여러 열로 배치하다 보면 CSS Grid만으로는 아래쪽에 빈 공간이 생기는 경우가 있습니다. 흔히 핀터레스트형, Masonry, Waterfall 레이아웃이라고 부르는 형태입니다. 예전에는 JavaScript 라이브러리를 사용하는 방법이 대표적이었지만, 지금은 CSS만으로 비슷한 결과를 만드는 방법도 여러 가지입니다. 특히 2026년에는 CSS Grid Lanes가 실제 브라우저에 들어오기 시작하면서 선택지가 하나 더 늘었습니다. 다만 최신 문법이라고 무조건 Grid Lanes를 쓰는 것은 아직 위험합니다. 2026년 9월 기준 Safari 26.4 이상에서는 Grid Lanes를 사용할 수 있지만 Chrome·Edge·Firefox의 일반 사용자 환경에서는 아직 폭넓게..