게시일: 2026년 9월 22일
Chrome 154가 출시됩니다. 이 게시물에서는 이번 출시의 주요 기능을 소개합니다. 전체 Chrome 154 출시 노트를 읽어 보세요.
이번 출시의 주요 내용은 다음과 같습니다.
- 반응형 크기의
<iframe>을 사용하면<iframe>이 내장된 문서의 고유 크기에 따라 자체 크기를 조정할 수 있습니다. - CSS
scroll-marker-group모드는 스크롤 마커의 포커스 순서와 접근성 의미 체계를 구성하는links및tabs모드를 추가합니다. - CSS
text-decoration-inset를 사용하면 텍스트 장식의 시작점과 끝점을 조정할 수 있습니다.
반응형 크기 <iframe>
Chrome 154에서는 반응형 크기의 iframe을 지원하여 상위 문서의 <iframe> 요소가 삽입된 문서의 레이아웃 오버플로 크기에 맞게 크기를 조정하여 하위 문서의 스크롤을 방지할 수 있습니다. 이렇게 하면 iframe 콘텐츠를 수동으로 측정하고 postMessage()로 측정기준을 전송하고 삽입 페이지에서 iframe 크기를 업데이트하는 패턴이 대체됩니다.
iframe을 콘텐츠 높이에 맞게 크기를 조정하려면 삽입 페이지의 <iframe> 요소에 frame-sizing CSS 속성을 사용합니다.
.embed {
width: 100%;
frame-sizing: content-height;
}
삽입된 문서도 <head>에 <meta name="responsive-embedded-sizing"> 요소를 포함하여 선택해야 합니다.
<meta name="responsive-embedded-sizing" content="allow-origins=*">
자세한 내용과 데모는 Chrome 154의 반응형 iframe을 참고하세요.
CSS scroll-marker-group 모드
scroll-marker-group 속성은 스크롤 컨테이너가 콘텐츠 전후에 ::scroll-marker-group 의사 요소를 생성하는지 여부를 제어합니다. Chrome 154에서는 ::scroll-marker-group 및 ::scroll-marker의 포커스 순서와 WAI-ARIA 접근성 시맨틱을 설정하는 두 가지 모드로 scroll-marker-group를 개선합니다.
/* Links mode (default) */
scroll-marker-group: after links;
/* Tabs mode */
scroll-marker-group: before tabs;
CSS text-decoration-inset
기본적으로 요소의 텍스트 장식 (예: 밑줄, 윗줄, 취소선)은 렌더링된 텍스트와 길이가 같습니다. text-decoration-inset CSS 속성을 사용하면 텍스트 실행 가장자리에서 안쪽으로 들어가거나, 텍스트 실행 가장자리를 넘어 확장되거나, 텍스트 실행 가장자리에 상대적으로 이동되도록 요소의 텍스트 장식 시작점과 끝점을 조정할 수 있습니다.
text-decoration-inset는 단일 값 또는 이중 값 구문을 사용하여 auto, 길이, 백분율 값을 허용합니다. 예를 들어 양쪽 끝을 10px만큼 삽입하려면 다음을 사용합니다.
text-decoration-inset: 10px;
양수 값은 장식을 인셋 (짧게)하고 음수 값은 장식을 아웃셋 (길게)합니다. 이를 통해 장식 간격을 미세 조정하고 배경 그라데이션이나 추가 요소 대신 CSS 텍스트 장식으로 애니메이션 밑줄 표시 효과를 만들 수 있습니다.
자세한 내용은 MDN의 text-decoration-inset 문서를 참고하세요.
추가 자료
여기서는 몇 가지 주요 사항만 다룹니다. Chrome 154의 추가 변경사항은 다음 링크를 참고하세요.
구독
최신 소식을 받아보려면 Chrome 개발자 YouTube 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받으실 수 있습니다. 또는 X나 LinkedIn에서 팔로우하여 새로운 도움말과 블로그 게시물을 확인하세요.
Chrome 155가 출시되는 대로 Chrome의 새로운 기능을 알려드리겠습니다.