웹 퍼블리싱웹 퍼블리싱 · 중급

CSS Baseline 보는 법: 지원 범위와 폴백을 직접 확인하기

2026.03.27·수정 2026.09.14·약 23분·작성: 해비·블로그 소개
작성자:

CSS Baseline 보는 법: 지원 범위와 폴백을 직접 확인하기 대표 일러스트

이 글에서 익히는 것

새 CSS 기능을 발견했을 때 배지 하나로 결정하지 않고, 지원할 브라우저와 기본 화면을 함께 살펴보는 연습입니다. 컨테이너 쿼리가 없어도 읽을 수 있는 카드를 먼저 만들고, 지원되는 환경에서만 배치를 개선합니다.

완성 화면: 넓은 카드만 가로로 바뀝니다

같은 내용의 카드를 넓은 영역과 320px 영역에 놓습니다. 기능을 지원하는 브라우저에서 카드의 부모 폭이 520px 이상이면 설명과 링크가 나란히 놓입니다. 좁은 영역은 세로 배치를 유지합니다. 향상 기능을 제외한 비교 파일에서도 모든 문장과 링크는 그대로 읽을 수 있습니다.

CSS Baseline 보는 법: 지원 범위와 폴백을 직접 확인하기 핵심 개념 도식
Baseline 정보와 실제 사용자 브라우저의 지원 범위를 확인하고, 미지원 환경의 대체 스타일을 준비합니다.

시작·완성 예제 ZIP 내려받기 — 압축을 푼 뒤 starter/index.html을 열어 시작하세요. 설치 없이 실행하며 README.md에 과제와 확인 순서가 들어 있습니다.

1. 먼저 사용할 기능을 정확히 적습니다

“최신 CSS를 쓰겠다”보다 “카드가 놓인 영역의 폭에 따라 배치를 바꾸겠다”가 판단하기 쉽습니다. 여기서는 CSS 크기 컨테이너 쿼리와 container-type: inline-size가 대상입니다. 스타일 쿼리나 다른 컨테이너 관련 기능까지 같은 지원 상태라고 생각하지 마세요. 속성 이름과 사용하는 문법을 공식 문서의 호환성 표에서 확인합니다.

2. Baseline 상태와 내 지원 대상을 구분합니다

Baseline은 주요 브라우저 사이에서 웹 기능이 얼마나 널리 제공되는지 요약합니다. 세 가지 상태는 아래와 같습니다. 배지는 시간이 지나면 바뀔 수 있으므로, 현재 상태와 확인 날짜를 함께 기록하세요.

상태 의미 읽을 때 주의할 점
Limited availability Baseline 핵심 브라우저 모두에 제공되지 않습니다. 지원하지 않는 환경의 기본 화면을 확인합니다.
Newly available 핵심 브라우저의 최신 안정 버전 모두에서 제공됩니다. 오래된 버전의 지원까지 뜻하지 않습니다.
Widely available Newly available 시점에서 30개월이 지났습니다. 모든 사용 환경에서의 동작 보증은 아닙니다.

핵심 집합에는 데스크톱 Chrome·Edge·Firefox·Safari와 Android Chrome·Firefox, iOS Safari가 포함됩니다. 운영체제 웹뷰, 오래된 기기, 보조 기술의 동작까지 배지 하나로 판정하지는 않습니다. 접근성·성능·사용성 검사는 따로 필요합니다.

이제 프로젝트가 지원해야 할 브라우저와 버전을 적어 보세요. 수업 실습이라면 지금 확인 가능한 브라우저부터 기록해도 됩니다. 실제 서비스라면 사용자 환경이나 계약상 지원 범위를 먼저 정합니다. 목표 환경의 호환성 표를 읽고 “기본 배치는 유지하고 선택적으로 향상한다”는 결정을 내려 보세요. 이 글은 특정 최신 버전 번호를 안전선으로 고정하지 않습니다.

3. 기능이 없어도 읽히는 기본 배치를 만듭니다

폴백은 오류 메시지가 아니라 기능이 없을 때 남는 정상 화면입니다. 이번 기본 화면은 문서 흐름을 따르는 세로 배치입니다. 제목, 설명, 이동 링크를 HTML 순서대로 적어 두면 컨테이너 쿼리를 해석하지 못해도 내용을 이용할 수 있습니다. 기본 규칙을 @supports 안으로 모두 옮기면 이 장점이 사라집니다.

아래 HTML 전체를 index.html로 저장하세요. starter와 complete는 같은 HTML을 사용합니다. 같은 이름의 클래스를 두 번 쓴 이유는 카드의 위치가 달라도 동일한 부품으로 동작하게 만들기 위해서입니다.

실습 파일

파일 경로를 확인하고 같은 프로젝트 안에 저장하세요. 이미지 등 소스 목록에 없는 파일과 실행 안내는 실습 ZIP에 포함되어 있습니다.

기본 스타일을 먼저 제공하고 지원되는 환경에서만 추가 기능을 적용합니다. 수정 전은 시작 상태, 수정 후는 비교할 완성 상태입니다.

수정 전

index.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>컨테이너 쿼리와 기본 배치 비교</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main>
      <h1>같은 카드, 다른 공간</h1>
      <p>좁은 공간에서는 세로로, 넓은 공간에서는 가로로 읽습니다.</p>
      <section aria-labelledby="wide-heading">
        <h2 id="wide-heading">넓은 영역</h2>
        <div class="card-host">
          <article class="card">
            <div>
              <h3>주말 독서 모임</h3>
              <p>토요일 오전에 책 한 권을 함께 읽습니다.</p>
            </div>
            <a href="#details">모임 안내 읽기</a>
          </article>
        </div>
      </section>
      <section class="narrow" aria-labelledby="narrow-heading">
        <h2 id="narrow-heading">좁은 영역</h2>
        <div class="card-host">
          <article class="card">
            <div>
              <h3>주말 독서 모임</h3>
              <p>토요일 오전에 책 한 권을 함께 읽습니다.</p>
            </div>
            <a href="#details">모임 안내 읽기</a>
          </article>
        </div>
      </section>
      <section id="details">
        <h2>모임 안내</h2>
        <p>책과 필기구를 준비해 주세요. 이 페이지는 배치 확인용 예제입니다.</p>
      </section>
    </main>
  </body>
</html>

style.css

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  color: #222;
  background: #fff;
  font-family: sans-serif;
  line-height: 1.7;
}
main {
  width: min(100% - 32px, 960px);
  margin: 40px auto;
}
h1 {
  font-size: 2rem;
  line-height: 1.3;
}
h2 {
  font-size: 1.3rem;
}
a {
  color: #222;
  text-underline-offset: 3px;
}
a:focus-visible {
  outline: 3px solid #555;
  outline-offset: 4px;
}
p {
  overflow-wrap: anywhere;
}
.narrow {
  max-width: 320px;
}
.card {
  border: 1px solid #888;
  padding: 20px;
}
.card h3 {
  margin: 0;
}
.card p {
  margin: 8px 0 16px;
}
.card a {
  display: inline-block;
}

/* 위 기본 배치는 유지하고, 이 아래에 조건부 향상을 추가하세요. */

수정 방법

fallback-only.html

fallback-only.html 경로에 새 파일을 만드세요. 수정 후 탭에서 전체 코드를 복사할 수 있습니다.

기본 스타일을 먼저 제공하고 지원되는 환경에서만 추가 기능을 적용합니다.

fallback.css

fallback.css 경로에 새 파일을 만드세요. 수정 후 탭에서 전체 코드를 복사할 수 있습니다.

기본 스타일을 먼저 제공하고 지원되는 환경에서만 추가 기능을 적용합니다.

index.html

이 파일은 변경하지 않습니다. 다른 파일을 수정하는 동안 기존 내용을 유지하세요.

style.css

style.css에서 아래 차이가 있는 위치를 수정하세요. -는 삭제할 줄, +는 추가할 줄이며 표시는 실제 코드에 넣지 않습니다.

기본 스타일을 먼저 제공하고 지원되는 환경에서만 추가 기능을 적용합니다.

--- 수정 전/style.css
+++ 수정 후/style.css
@@ -47,4 +47,25 @@
   display: inline-block;
 }
 
-/* 위 기본 배치는 유지하고, 이 아래에 조건부 향상을 추가하세요. */
+@supports (container-type: inline-size) {
+  .card-host {
+    container-type: inline-size;
+  }
+  @container (min-width: 520px) {
+    .card {
+      display: flex;
+      align-items: center;
+      gap: 24px;
+    }
+    .card > div {
+      flex: 1;
+      min-width: 0;
+    }
+    .card p {
+      margin-bottom: 0;
+    }
+    .card a {
+      flex-shrink: 0;
+    }
+  }
+}

수정 후 탭의 전체 파일과 비교한 뒤 본문의 확인 절차를 실행하세요.

수정 후

fallback-only.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>컨테이너 쿼리와 기본 배치 비교</title>
    <link rel="stylesheet" href="fallback.css" />
  </head>
  <body>
    <main>
      <h1>기본 배치만 확인하기</h1>
      <p>좁은 공간에서는 세로로, 넓은 공간에서는 가로로 읽습니다.</p>
      <section aria-labelledby="wide-heading">
        <h2 id="wide-heading">넓은 영역</h2>
        <div class="card-host">
          <article class="card">
            <div>
              <h3>주말 독서 모임</h3>
              <p>토요일 오전에 책 한 권을 함께 읽습니다.</p>
            </div>
            <a href="#details">모임 안내 읽기</a>
          </article>
        </div>
      </section>
      <section class="narrow" aria-labelledby="narrow-heading">
        <h2 id="narrow-heading">좁은 영역</h2>
        <div class="card-host">
          <article class="card">
            <div>
              <h3>주말 독서 모임</h3>
              <p>토요일 오전에 책 한 권을 함께 읽습니다.</p>
            </div>
            <a href="#details">모임 안내 읽기</a>
          </article>
        </div>
      </section>
      <section id="details">
        <h2>모임 안내</h2>
        <p>책과 필기구를 준비해 주세요. 이 페이지는 배치 확인용 예제입니다.</p>
      </section>
    </main>
  </body>
</html>

fallback.css

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  color: #222;
  background: #fff;
  font-family: sans-serif;
  line-height: 1.7;
}
main {
  width: min(100% - 32px, 960px);
  margin: 40px auto;
}
h1 {
  font-size: 2rem;
  line-height: 1.3;
}
h2 {
  font-size: 1.3rem;
}
a {
  color: #222;
  text-underline-offset: 3px;
}
a:focus-visible {
  outline: 3px solid #555;
  outline-offset: 4px;
}
p {
  overflow-wrap: anywhere;
}
.narrow {
  max-width: 320px;
}
.card {
  border: 1px solid #888;
  padding: 20px;
}
.card h3 {
  margin: 0;
}
.card p {
  margin: 8px 0 16px;
}
.card a {
  display: inline-block;
}

index.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>컨테이너 쿼리와 기본 배치 비교</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main>
      <h1>같은 카드, 다른 공간</h1>
      <p>좁은 공간에서는 세로로, 넓은 공간에서는 가로로 읽습니다.</p>
      <section aria-labelledby="wide-heading">
        <h2 id="wide-heading">넓은 영역</h2>
        <div class="card-host">
          <article class="card">
            <div>
              <h3>주말 독서 모임</h3>
              <p>토요일 오전에 책 한 권을 함께 읽습니다.</p>
            </div>
            <a href="#details">모임 안내 읽기</a>
          </article>
        </div>
      </section>
      <section class="narrow" aria-labelledby="narrow-heading">
        <h2 id="narrow-heading">좁은 영역</h2>
        <div class="card-host">
          <article class="card">
            <div>
              <h3>주말 독서 모임</h3>
              <p>토요일 오전에 책 한 권을 함께 읽습니다.</p>
            </div>
            <a href="#details">모임 안내 읽기</a>
          </article>
        </div>
      </section>
      <section id="details">
        <h2>모임 안내</h2>
        <p>책과 필기구를 준비해 주세요. 이 페이지는 배치 확인용 예제입니다.</p>
      </section>
    </main>
  </body>
</html>

style.css

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  color: #222;
  background: #fff;
  font-family: sans-serif;
  line-height: 1.7;
}
main {
  width: min(100% - 32px, 960px);
  margin: 40px auto;
}
h1 {
  font-size: 2rem;
  line-height: 1.3;
}
h2 {
  font-size: 1.3rem;
}
a {
  color: #222;
  text-underline-offset: 3px;
}
a:focus-visible {
  outline: 3px solid #555;
  outline-offset: 4px;
}
p {
  overflow-wrap: anywhere;
}
.narrow {
  max-width: 320px;
}
.card {
  border: 1px solid #888;
  padding: 20px;
}
.card h3 {
  margin: 0;
}
.card p {
  margin: 8px 0 16px;
}
.card a {
  display: inline-block;
}

@supports (container-type: inline-size) {
  .card-host {
    container-type: inline-size;
  }
  @container (min-width: 520px) {
    .card {
      display: flex;
      align-items: center;
      gap: 24px;
    }
    .card > div {
      flex: 1;
      min-width: 0;
    }
    .card p {
      margin-bottom: 0;
    }
    .card a {
      flex-shrink: 0;
    }
  }
}

index.html 전체 코드 보기

4. 지원될 때만 컨테이너 쿼리를 더합니다

다음은 complete/style.css 전체입니다. 첫 부분이 기본 화면이고 마지막 @supports 블록이 향상 부분입니다. .card-host는 폭을 살펴볼 부모, .card는 배치를 바꿀 자식입니다. 자기 자신의 폭을 같은 규칙으로 조회하려고 하지 않는 점에 주목하세요.

style.css 전체 코드 보기

@supports는 브라우저가 지정한 속성·값 조합을 지원하는지 확인합니다. 참이라고 해서 모든 렌더링 문제가 없다는 뜻은 아닙니다. 그 안의 @container는 화면 전체가 아닌 가장 가까운 해당 쿼리 컨테이너의 폭을 살펴봅니다. 그래서 같은 창 안에서도 넓은 카드만 가로로 변합니다.

5. 화면 세 가지를 직접 비교합니다

  • complete/index.html을 약 1000px 창에서 엽니다. 넓은 영역의 링크는 설명 옆에, 좁은 영역의 링크는 설명 아래에 있어야 합니다.
  • 창을 375px 정도로 줄입니다. 두 카드가 세로로 읽히고 문장이 화면 밖으로 잘리지 않는지 확인합니다.
  • complete/fallback-only.html을 엽니다. 이 파일은 fallback.css만 읽으므로 넓은 창에서도 두 카드가 세로입니다. 현대 브라우저에서 기본 규칙만 비교하기 위한 파일이며 구형 브라우저를 재현하는 도구는 아닙니다.
  • Tab 키로 두 링크에 차례로 이동하고 Enter로 모임 안내에 도달하는지 확인합니다. 기본 화면과 향상 화면 모두에서 같은 내용을 이용할 수 있어야 합니다.
  • 실제 지원 대상 브라우저에서도 다시 엽니다. 창 폭 변경은 브라우저 버전 차이의 검사를 대신하지 못합니다.

가로 배치가 되지 않으면 우선 부모 폭이 520px을 넘는지 확인하세요. 그다음 container-type이 부모에 선언되었는지, CSS 파일 경로와 중괄호가 맞는지 살펴봅니다. 지원하지 않는 브라우저에서 세로 배치가 유지되는 것은 이 예제의 의도된 결과입니다.

선택 학습: 팀의 지원 정책과 Browserslist

HTML과 CSS만 여는 이번 실습에는 Browserslist가 필요 없습니다. 빌드 도구를 사용하는 팀에서는 지원 범위를 설정으로 공유할 수 있습니다. 다만 Browserslist 자체가 누락된 CSS 기능을 구현해 주지는 않습니다. 설정을 읽는 변환 도구의 역할과 한계도 함께 확인해야 합니다. 기본 화면을 만든 뒤 팀의 대상 환경을 설정으로 연결하는 순서로 확장하세요.

완료 기준은 배지 이름을 외우는 것이 아닙니다. 사용한 기능, 지원 대상, 기능이 없을 때 남는 화면, 직접 확인한 환경을 각각 한 문장으로 설명할 수 있으면 됩니다.

공식 문서로 다시 확인하기

이 글이 도움이 되었나요?

조회 중

웹 퍼블리싱 학습 순서

학습 시작 · 첫 글부터 읽기전체 학습 경로

필수 13개 · 전체 15개

읽음 기록 관리

전체 과정 목차 (15개)
  1. 필수 학습 · HTML 입문: 시맨틱 문서와 접근 가능한 폼 만들기
  2. 필수 학습 · CSS 입문: 박스 모델·선택자·캐스케이드 직접 확인하기
  3. 필수 학습 · CSS Flex와 미디어 쿼리 입문: 반응형 카드 페이지 만들기
  4. 필수 학습 · CSS position 완전 이해: relative·absolute·fixed·sticky 실습
  5. 필수 학습 · HTML details와 summary로 접근 가능한 FAQ 만들기
  6. 필수 학습 · CSS Grid 실습: Flex 학습 카드로 열 맞추기와 auto-fit 비교
  7. 필수 학습 · CSS overflow 해결: 긴 텍스트·min-width: 0·말줄임 실습
  8. 필수 학습 · HTML 표 만들기: caption·scope로 비교표를 읽기 쉽게, 모바일에서는 표만 스크롤하기
  9. 필수 선수 · HTML CSS 이미지 문제 해결 실습: 경로·비율·잘림·흐림·CLS
  10. 필수 학습 · Container Query 실습: 같은 카드를 본문과 사이드바에 배치하기
  11. 선택 참고 · CSS Baseline 보는 법: 지원 범위와 폴백을 직접 확인하기 현재 글
  12. 필수 학습 · CSS z-index가 안 먹힐 때: stacking context와 부모 층 디버깅
  13. 필수 선수 · 웹 접근성 기초 점검: 키보드 순서·초점 표시·확대 화면을 직접 확인하는 체크리스트
  14. 필수 학습 · HTML CSS 종합 실습: 소개·카드·이미지·요금표·문의 폼·FAQ가 있는 반응형 서비스 페이지
  15. 선택 참고 · 프론트엔드 SEO 기초: HTML 구조와 이미지 성능 진단하기

새 글 받아보기

RSS 리더에서 BlogFlow의 새 글을 확인할 수 있습니다.

RSS 피드 구독하기

댓글 남기기