0Pricing
CSS Academy · 강의

CSS Layout API 및 범위

CSS Layout API로 사용자 지정 레이아웃 알고리즘을 만들고 Houdini의 범위와 한계를 이해합니다.

CSS Layout API 및 범위은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

CSS 후디니 개요

CSS 후디니는 CSS 렌더링 엔진의 일부를 JavaScript에 공개하는 저수준 API 모음입니다. 여기에는 타입 지정 OM, 속성 및 값 API, 페인트 API, 레이아웃 API, 애니메이션 워크릿이 포함됩니다. 이들을 함께 사용하면 사용자 지정 CSS 확장 기능을 만들 수 있습니다.

CSS 레이아웃 API란 무엇입니까

CSS 레이아웃 API를 사용하면 개발자가 JavaScript로 사용자 지정 레이아웃 알고리즘을 정의하고 CSS display 속성의 값으로 사용할 수 있습니다. 그리드나 플렉스박스만큼 강력한 레이아웃을 만들 수 있습니다.

레이아웃 워크릿 구조

레이아웃 워크릿은 intrinsicSizes() 및 layout() 메서드를 구현하고 registerLayout()으로 등록합니다:

<div class="masonry-container">
  <div class="item" style="height: 60px;">1</div>
  <div class="item" style="height: 100px;">2</div>
  <div class="item" style="height: 40px;">3</div>
  <div class="item" style="height: 80px;">4</div>
  <div class="item" style="height: 120px;">5</div>
  <div class="item" style="height: 50px;">6</div>
</div>

사용자 지정 레이아웃 사용

CSS에서 등록한 레이아웃을 참조하십시오:

<div class="masonry-container">
  <div class="item" style="height: 60px;">1</div>
  <div class="item" style="height: 100px;">2</div>
  <div class="item" style="height: 40px;">3</div>
  <div class="item" style="height: 80px;">4</div>
  <div class="item" style="height: 120px;">5</div>
  <div class="item" style="height: 50px;">6</div>
</div>

레이아웃 API 상태

CSS 레이아웃 API는 브라우저 지원이 제한적이며 대부분 실험 단계입니다(크롬에서는 플래그를 활성화해야 합니다). 현재는 실서비스 도구라기보다 연구 및 미래를 위한 API에 가깝습니다. 특히 메이슨리 레이아웃은 브라우저에 기본으로 구현될 수도 있습니다.

@scope 앳 규칙

@scope는 CSS 범위 지정 사양에 포함된 새로운 CSS 기능으로, 어디에나 클래스를 추가하지 않고도 CSS 규칙의 적용 범위를 특정 DOM 하위 트리로 제한합니다.

@scope 구문

범위 루트와 선택적인 범위 제한을 정의하십시오:

<div class="card">
  <p class="title">Scoped Title</p>
  <p>Body text inside the card.</p>
</div>

제한이 있는 @scope

범위 제한을 사용하면 중첩된 구성 요소 내부와 일치하는 규칙을 차단할 수 있습니다:

<div class="article">
  <p>Article paragraph styled with 1.7 line-height by the scoped rule.</p>
  <div class="advertisement">
    <p>Ad paragraph is outside the scope limit, so it keeps the default line-height.</p>
  </div>
</div>

:scope 의사 클래스

@scope 내부에서 :scope는 범위 루트 요소를 가리킵니다:

<div class="card is-hovered">
  <p>Hover state applied statically for preview</p>
</div>

@scope 브라우저 지원

@scope는 크롬 118 이상과 사파리 17.4 이상에서 지원됩니다. 파이어폭스 지원도 추가될 예정입니다. 안전하게 배포하려면 @supports와 함께 사용하십시오.

후디니의 더 넓은 비전

CSS 후디니의 목표는 웹 플랫폼을 확장 가능하게 만드는 것입니다. 즉, 브라우저 공급업체가 구현하기를 기다리는 대신 개발자가 CSS 자체에 기능을 추가할 수 있도록 하는 것입니다. 현재 사용할 수 있는 API 중 이 비전에서 실서비스에 가장 적합한 부분은 타입 지정 OM, @property, 페인트입니다.

빠른 확인

@scope (.card)는 CSS에서 어떤 효과를 냅니까?

복습

CSS 후디니는 렌더링 엔진을 공개하는 API 집합입니다. 레이아웃 API를 사용하면 사용자 지정 표시 알고리즘을 만들 수 있지만 대부분 실험 단계입니다. @scope는 CSS 규칙의 적용 범위를 특정 DOM 하위 트리로 제한하여 엄격한 BEM 이름 지정 없이도 스타일 누출을 방지합니다. 후디니 기능 중 실서비스에 가장 적합한 것은 타입 지정 OM, @property, 페인트 API입니다.

자주 묻는 질문

“CSS Layout API 및 범위” 강의는 무료인가요?

네 — “CSS Layout API 및 범위” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“CSS Layout API 및 범위”에서 뭘 배우나요?

CSS Layout API로 사용자 지정 레이아웃 알고리즘을 만들고 Houdini의 범위와 한계를 이해합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“CSS Layout API 및 범위” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. CSS 타입 객체 모델(OM)
  2. CSS 속성 및 값 API(@property)
  3. CSS Paint API: 워크릿
  4. CSS Layout API 및 범위
← CSS Academy(으)로 돌아가기