iframe 안쪽 콘텐츠 높이에 맞춰 부모 페이지의 iframe 높이를 자동으로 바꾸려면 지금까지는 자식 문서에서 높이를 측정하고 postMessage()로 부모에게 전달한 뒤, 부모가 다시 style.height를 수정하는 방식이 흔했습니다. Chrome 154부터는 이 작업을 브라우저가 직접 처리할 수 있습니다. 부모 페이지의 iframe에 frame-sizing: content-height를 지정하고, iframe 안의 문서가 responsive-embedded-sizing 메타 태그로 크기 공유를 허용하면 됩니다. 다만 기존 JavaScript를 바로 지워도 된다는 뜻은 아닙니다. 현재 frame-sizing은 모든 주요 브라우저에서 널리 지원되는 기능이 아니므로, 실서비스에서는 새 방식을 지원하..

카드 목록에 순차 애니메이션을 넣을 때 흔히:nth-child(1),:nth-child(2),:nth-child(3)을 계속 추가합니다. 카드가 4개에서 12개로 늘어나면 CSS도 함께 길어지고, 중간에 항목이 삽입되면 지연값을 다시 맞춰야 합니다. 2026년에는 이 작업을 CSS 자체에서 계산할 수 있는 sibling-index()와 sibling-count()가 주요 최신 브라우저에 도입됐습니다. sibling-index()는 현재 요소가 부모의 자식 중 몇 번째인지 1부터 시작하는 정수로 돌려주고, sibling-count()는 같은 부모 아래의 전체 자식 요소 수를 반환합니다. nth-child를 반복하지 않고 카드 순서를 바로 값으로 쓰기 기존 방식은 카드 수에 맞춰 규칙을 계속 늘리는 형태입니..

아코디언, 더보기 영역, 설명 패널처럼 내용 길이를 미리 알 수 없는 요소는 닫힌 상태에서 height: 0을 쓰고 열린 상태에서 height: auto로 바꾸는 경우가 많습니다. 문제는 transition: height까지 넣었는데도 높이가 자연스럽게 늘어나지 않고 한순간에 펼쳐지는 경우입니다. 이 현상은 단순히 transition 시간을 잘못 지정해서 생기는 문제가 아닙니다. 기존 CSS에서는 0px 같은 숫자 크기와 auto, max-content 같은 고유 크기 값을 자연스럽게 보간하기 어려웠기 때문입니다. 최근 CSS에서는 interpolate-size: allow-keywords를 사용해 이런 전환을 직접 허용할 수 있습니다. height 0에서 auto로 바로 바꾸면 왜 애니메이션이 끊길까 ..

캐러셀을 키보드로 넘기지 않았는데 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 구조를 대신 고쳐주는 만능 도구가 아니라, 논리적인 소스 순서를 유지한 상태에서 반응형 레이아웃처..