본문 바로가기
홈

Chrome

Chrome 154: 새로운 기능

원문: New in Chrome 154
 — Chrome Developers 원문은 CC-BY-4.0
 라이선스로 제공되며, 이 글은 한국어로 번역한 2차 저작물입니다.
  • 반응형 
    <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
을 참조하십시오.
scroll-marker-group
 속성은 스크롤 컨테이너가 콘텐츠 앞이나 뒤에 
::scroll-marker-group
유사 요소를 생성할지 여부를 제어합니다. Chrome 154는 
scroll-marker-group
을 
::scroll-marker-group
및 
::scroll-marker
의 포커스 순서와 WAI-ARIA 접근성 의미론을 설정하는 두 가지 모드로 향상시켰습니다.
/* Links 모드 (기본값) */
scroll-marker-group: after links;

/* Tabs 모드 */
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 Developers YouTube 채널
을 구독하면 새 동영상이 출시될 때마다 이메일 알림을 받을 수 있습니다. 또는 X 또는 LinkedIn에서 새 기사 및 블로그 게시물을 팔로우하십시오.
Chrome 155가 출시되는 즉시 Chrome의 새로운 기능에 대해 알려드리겠습니다!
목록으로