GODRICH
#css애니메이션#버튼#로딩#전환효과#스크롤#대시보드#실전ui#디자인트렌드

css 초기화 9종 — 리셋부터 안전 영역까지 한 번에 정리

· Godrich · 9종 · 13분 읽기

baseCSS만호버자동 재생폼·입력

아홉 개의 css 초기화 패턴 중 하나는 화면 노치를 감지해 안전 영역만큼 여백을 다시 계산하고, 하나는 모션을 줄이는 환경에서 전환 시간이 거의 0에 가깝게 줄어들고, 하나는 각진 기본 모서리가 매끈한 곡선 모양으로 바뀝니다.

아홉 항목은 요소마다 제각각인 기본값을 지우는 것부터 표준 기능이 있는지 확인해 갈라지는 것까지 순서대로 이어집니다. 01·05·06 은 브라우저가 처음부터 정해 둔 여백·글꼴·포커스 표시를 지우거나 다시 맞추고, 02·04·07 은 크기·비율·안전 영역처럼 값 하나가 레이아웃 계산을 바꾸며, 03·09 는 css 초기화 코드에 표준 기능이 있는지부터 물어 지원 여부로 갈라지고, 08 은 모션을 줄이는 설정 자체가 주제입니다. Math.random은 아홉 항목 어디에도 없어 흐름은 전부 슬라이더·클릭·키보드 조작으로만 갈립니다.

브라우저 기본값 리셋 — 요소마다 다른 여백과 목록 표시를 하나로 맞추는 시작점01 reset 박스 모델 비교 — 테두리와 안쪽 여백이 크기 계산에 들어가는지 보여주는 카드02 box-model 제목 줄바꿈 정리 — 마지막 줄에 한 단어만 남지 않게 균형 잡는 문단03 text-wrap 미디어 기본 비율 고정 — 이미지와 영상이 부모 너비를 넘지 않게 맞추는 틀04 media-block 폼 요소 글꼴 상속 — 버튼과 입력창이 주변 글자와 같은 서체를 쓰게 맞추는 규칙05 form-inherit 키보드 포커스 링 — 마우스 클릭에는 안 뜨고 키보드 이동에만 나타나는 테두리06 focus-visible 노치 안전 영역 패딩 — 화면 위아래가 잘리는 기기에서도 내용이 가려지지 않게 미는 여백07 safe-area 모션 줄이기 대응 — 시스템 설정에 따라 애니메이션이 거의 멈추는 전환08 reduced-motion 둥근 모서리 형태 비교 — 원호 모서리와 매끈한 곡선 모서리를 나란히 놓고 보는 카드09 corner-shape

자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip

아홉 개는 왜 이 순서인가

아홉 항목은 지우는 범위가 좁은 것에서 넓은 것 순으로 놓여, 앞쪽일수록 값 하나만 바꿔도 화면 전체가 같이 움직입니다.

항목 누적면적 강도 평균 움직인 프레임
01 브라우저 기본값 리셋 19.15% 104.5 12/23
02 박스 모델 비교 2.36% 122.3 22/23
03 제목 줄바꿈 정리 3.253% 139.6 23/23
04 미디어 기본 비율 고정 11.703% 137.6 18/23
05 폼 요소 글꼴 상속 13.463% 95.8 22/23
06 키보드 포커스 링 6.39% 94.2 15/23
07 노치 안전 영역 패딩 1.788% 110.3 23/23
08 모션 줄이기 대응 5.87% 122.2 13/23
09 둥근 모서리 형태 비교 1.044% 118.6 9/23

누적면적은 01 브라우저 기본값 리셋이 19.15%로 가장 크고, 09 둥근 모서리 형태 비교가 1.044%로 가장 작습니다(07 노치 안전 영역 패딩도 1.788%로 그다음으로 작습니다). 강도 평균은 03 제목 줄바꿈 정리가 139.6으로 가장 높고 06 키보드 포커스 링이 94.2로 가장 낮으며, 움직인 프레임은 03·07 이 23/24로 매 프레임 움직인 항목이고 09 가 9/24로 가장 적습니다.

지우는 범위 자체가 주제인 01·05·06

01 은 여백·목록·링크 밑줄처럼 요소마다 다르게 오는 기본값 목록을 통째로 지우고, 05 는 폼 요소만 따로 갖던 글꼴을 주변 문단과 같게 되돌리며, 06 은 지우는 대신 포커스 표시를 마우스와 키보드로 갈라 다시 그립니다. 셋 다 css 선언 자체가 결과를 정하고 자바스크립트는 토글 상태만 바꿉니다.

값 하나가 레이아웃 계산을 바꾸는 02·04·07

02 는 테두리·안쪽 여백이 너비 계산에 들어가는지, 04 는 이미지 높이가 부모 너비에 맞춰 줄어드는지, 07 은 화면이 잘린 영역만큼 안쪽 여백이 자동으로 늘어나는지를 각각 보여줘, 세 항목 모두 css 값 하나가 실제 픽셀 크기를 정합니다.

표준 기능이 있는지 먼저 묻는 03·09

03·09 는 CSS.supports로 표준 기능이 있는지 먼저 물은 뒤 그 답에 따라 나머지 규칙을 켭니다. 03 은 text-wrap: balance, 09 는 corner-shape: squircle을 확인하고, 지원하지 않는 환경에서는 각각 균형 없는 줄바꿈과 원호 모서리가 그대로 남습니다.

항목별 코드

01브라우저 기본값 리셋 — 요소마다 다른 여백과 목록 표시를 하나로 맞추는 시작점

브라우저마다 다르게 주는 기본 여백과 목록 점 표시를 모두 지워 모든 요소가 같은 출발선에서 시작합니다. 새 프로젝트 시작 스타일시트나 컴포넌트 라이브러리 베이스에 씁니다.

지우는 범위는 상수 하나로 정한다

RESET_SCOPE 값이 minimal 이면 제목·문단 여백과 목록 점만 지우고, full 이면 링크 밑줄까지 더 지웁니다.

  // 변형 상수 — minimal 은 목록·여백만, full 은 버튼 겉모습까지 지운다 (D 뒤 확정)
  var RESET_SCOPE = 'minimal';
  var STEP_MS = 320;
  // 지워지는 기본값 카테고리 — 실제로 화면에 세어 보여주는 목록이라 죽은 상수가 아니다
  var CLEARED_MINIMAL = ['heading-margin', 'paragraph-margin', 'list-style'];
  var CLEARED_FULL = CLEARED_MINIMAL.concat(['link-decoration']);
  var MAX_HEIGHT_PX = 130; // 룰러 눈금의 기준 최대 높이 — 이 값을 넘는 초과분은 눈금 밖으로 잘린다
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  var wrap = document.getElementById('wrap');
  var panel = document.getElementById('panel');
  var toggleBtn = document.getElementById('toggleBtn');
  var stateLabel = document.getElementById('stateLabel');
  var readout = document.getElementById('readout');
  var rulerFill = document.getElementById('rulerFill');
  var isDemo = true;
  var on = false;

  function clearedList() { return RESET_SCOPE === 'full' ? CLEARED_FULL : CLEARED_MINIMAL; }
브라우저 기본값 리셋 — 요소마다 다른 여백과 목록 표시를 하나로 맞추는 시작점
새 창에서 열기

01 · 브라우저 기본값 리셋 — 요소마다 다른 여백과 목록 표시를 하나로 맞추는 시작점 — 측정 누적면적 19.15% · 움직인 프레임 12/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

margin: 0list-style: noneRESET_SCOPE

02박스 모델 비교 — 테두리와 안쪽 여백이 크기 계산에 들어가는지 보여주는 카드

두 가지 계산 방식을 전환하면 같은 너비값이라도 테두리와 안쪽 여백을 포함하는지에 따라 카드의 실제 크기가 달라지는 것을 눈으로 비교합니다. 레이아웃 디버깅용 카드나 그리드 아이템 크기 확인에 씁니다.

box-sizing 이 같은 값을 다르게 그린다

box-sizing: content-box는 테두리·여백을 너비 바깥에 더하고, border-box는 그 안에 포함시켜 같은 너비 선언이라도 실제 카드 크기가 달라집니다.

.box {
  height: 34px;
  border: $border-w solid $subject-ink;
  padding: 0 $pad-w;
  background: rgba($subject-blue, .38);
  transition: width $dur-base $ease-out;
  box-sizing: content-box;
}

.contentBox {
  box-sizing: content-box;
  background: rgba($subject-orange-deep, .28);
}

.borderBox {
  box-sizing: border-box;
}
박스 모델 비교 — 테두리와 안쪽 여백이 크기 계산에 들어가는지 보여주는 카드
새 창에서 열기

02 · 박스 모델 비교 — 테두리와 안쪽 여백이 크기 계산에 들어가는지 보여주는 카드 — 측정 누적면적 2.36% · 움직인 프레임 22/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

box-sizingcontent-boxborder-box

03제목 줄바꿈 정리 — 마지막 줄에 한 단어만 남지 않게 균형 잡는 문단

긴 제목이 여러 줄로 꺾일 때 줄마다 글자 수가 고르게 균형을 잡아, 마지막 줄에 단어 하나만 외로이 남는 모양을 막습니다. 카드 제목이나 히어로 섹션 헤드라인에 씁니다.

지원 여부를 먼저 확인한다

CSS.supports('text-wrap', 'balance')로 먼저 물어 지원하는 환경에서만 균형 줄바꿈이 적용되고, 지원하지 않으면 배지가 폴백 상태를 알립니다.

  var STEP_MS = 220;
  var MAX_BARS = 4;
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  var supported = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('text-wrap', 'balance');

  var wrap = document.getElementById('wrap');
  var heading = document.getElementById('heading');
  var toggleBtn = document.getElementById('toggleBtn');
  var supportBadge = document.getElementById('supportBadge');
  var bars = document.getElementById('bars');
  var readout = document.getElementById('readout');
  var isDemo = true;
  var on = false;

  supportBadge.textContent = supported ? 'text-wrap: balance 지원' : '미지원 — 폴백(균형 없음)';
  supportBadge.classList.toggle('fallback', !supported);
제목 줄바꿈 정리 — 마지막 줄에 한 단어만 남지 않게 균형 잡는 문단
새 창에서 열기

03 · 제목 줄바꿈 정리 — 마지막 줄에 한 단어만 남지 않게 균형 잡는 문단 — 측정 누적면적 3.253% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

text-wrap: balanceCSS.supportstext-wrap

04미디어 기본 비율 고정 — 이미지와 영상이 부모 너비를 넘지 않게 맞추는 틀

이미지와 영상이 줄 안의 글자처럼 취급돼 아래 여백이 생기던 문제를 없애고, 부모 너비를 넘지 않으면서 원래 비율을 유지한 채 표시됩니다. 블로그 본문 이미지나 카드 안 썸네일 영상에 씁니다.

핸들로 프레임 너비를 직접 당겨 본다

프레임 너비를 MIN_FRAME_PX~MAX_FRAME_PX 사이로 당기면 .fitImg는 매번 비율을 지키고 .rawImg는 원본 크기 그대로 넘칩니다.

// 리셋 항목의 주인공 — img { max-width: 100%; } 를 .fitImg 에만 걸어 나란히 비교한다
.fitImg {
  display: block;
  max-width: 100%;
  height: auto;
}

.rawImg {
  display: block;
}
미디어 기본 비율 고정 — 이미지와 영상이 부모 너비를 넘지 않게 맞추는 틀
새 창에서 열기

04 · 미디어 기본 비율 고정 — 이미지와 영상이 부모 너비를 넘지 않게 맞추는 틀 — 측정 누적면적 11.703% · 움직인 프레임 18/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

max-width: 100%height: autogetBoundingClientRect

05폼 요소 글꼴 상속 — 버튼과 입력창이 주변 글자와 같은 서체를 쓰게 맞추는 규칙

브라우저가 버튼과 입력창에 따로 정해주던 글꼴과 글자 크기를 지우고, 주변 문단과 똑같은 서체·크기·색을 그대로 물려받게 합니다. 커스텀 디자인 폼이나 다크모드 대응 입력창에 씁니다.

inherit 세 줄이 하는 일

font-size·font-weight·font-family를 각각 inherit으로 바꾸면 폼 요소가 부모 문단과 같은 글꼴로 다시 그려집니다.

.ghostBtn {
  appearance: none;
  border: 2px solid rgba($subject-cream, .55);
  border-radius: $r-sm;
  background: rgba($subject-cream, .08);
  padding: $sp-2 $sp-3;
  color: $subject-cream;
  cursor: pointer;
  transition: color $dur-base $ease-out;
}

// 리셋의 주인공 — font: inherit 계열을 토글로 비교한다
.wrap.inherited {
  .field, .ghostBtn { font-size: inherit; font-weight: inherit; font-family: inherit; color: $subject-cream; }
}
폼 요소 글꼴 상속 — 버튼과 입력창이 주변 글자와 같은 서체를 쓰게 맞추는 규칙
새 창에서 열기

05 · 폼 요소 글꼴 상속 — 버튼과 입력창이 주변 글자와 같은 서체를 쓰게 맞추는 규칙 — 측정 누적면적 13.463% · 움직인 프레임 22/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

font-family: inheritfont-weight: inheritfont-size: inherit

06키보드 포커스 링 — 마우스 클릭에는 안 뜨고 키보드 이동에만 나타나는 테두리

같은 버튼이라도 마우스로 클릭했을 때는 테두리가 나타나지 않고, 탭 키로 이동해 들어왔을 때만 테두리가 뚜렷하게 나타나 접근성과 시각적 깔끔함을 동시에 챙깁니다. 폼 제출 버튼이나 내비게이션 링크 목록에 씁니다.

실제 Tab 키 입력만 구분한다

이 데모는 keydown에서 e.key === 'Tab'인 경우만 골라 순서를 옮기고, 클릭은 별도 리스너로 갈라 실제 키보드 이동과 마우스 클릭을 코드로 구분합니다.

// 주인공 — :focus-visible 은 키보드 진입에만 링을 준다. 마우스 클릭의 :focus 에는 없다.
// outline 색 전환을 부드럽게 하되 링의 생김/사라짐 자체는 즉시다.
.padBtn:focus-visible,
.padLink:focus-visible {
  outline: 3px solid $subject-mint;
  outline-offset: 2px;
  background: rgba($subject-mint, .16);
}

.padBtn:focus:not(:focus-visible),
.padLink:focus:not(:focus-visible) {
  outline: none;
}
키보드 포커스 링 — 마우스 클릭에는 안 뜨고 키보드 이동에만 나타나는 테두리
새 창에서 열기

06 · 키보드 포커스 링 — 마우스 클릭에는 안 뜨고 키보드 이동에만 나타나는 테두리 — 측정 누적면적 6.39% · 움직인 프레임 15/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

:focus-visible:focus:not(:focus-visible)outline-offset

07노치 안전 영역 패딩 — 화면 위아래가 잘리는 기기에서도 내용이 가려지지 않게 미는 여백

노치나 하단 바가 있는 화면을 흉내 낸 틀 안에서, 콘텐츠 아래쪽 여백이 그 잘린 영역만큼 자동으로 늘어나 버튼이 가려지지 않습니다. 전체화면 모바일 레이아웃이나 하단 고정 액션바에 씁니다.

두 값 중 큰 쪽을 쓴다

padding-top·padding-bottom은 슬라이더가 만든 커스텀 속성 값과 env(safe-area-inset-*) 중 큰 쪽을 골라, 실제 안전 영역과 시뮬레이션 값이 둘 다 반영됩니다.

.content {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  // 실사용 규칙 — 실제 기기 안전 영역과 시뮬레이션 값 중 큰 쪽을 쓴다
  padding-top: max(var(--safe-top, 0px), env(safe-area-inset-top));
  padding-bottom: max(var(--safe-bottom, 0px), env(safe-area-inset-bottom));
  padding-left: $sp-3;
  padding-right: $sp-3;
  transition: padding $dur-base $ease-out;
}
노치 안전 영역 패딩 — 화면 위아래가 잘리는 기기에서도 내용이 가려지지 않게 미는 여백
새 창에서 열기

07 · 노치 안전 영역 패딩 — 화면 위아래가 잘리는 기기에서도 내용이 가려지지 않게 미는 여백 — 측정 누적면적 1.788% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

env(safe-area-inset-top)env(safe-area-inset-bottom)--safe-top

08모션 줄이기 대응 — 시스템 설정에 따라 애니메이션이 거의 멈추는 전환

모션을 줄이도록 맞춘 환경을 시뮬레이션하는 스위치를 켜면, 같은 카드 전환이 화려하게 움직이던 상태에서 거의 즉시 나타나는 상태로 바뀝니다. 전정기관 민감 사용자용 옵션이나 접근성 설정 화면에 씁니다.

전환 시간을 배율 하나로 줄인다

currentDurationMs()는 시뮬레이션이 켜졌을 때만 기본 전환 시간에 REDUCED_MOTION_SCALE을 곱해 돌려주고, 슬라이더로 이 배율 자체를 바꿔 볼 수 있습니다.

  function currentDurationMs() {
    return reduceSim ? Math.round(BASE_DURATION_MS * REDUCED_MOTION_SCALE) : BASE_DURATION_MS;
  }

  function applyDuration() {
    dot.style.transitionDuration = currentDurationMs() + 'ms';
  }
모션 줄이기 대응 — 시스템 설정에 따라 애니메이션이 거의 멈추는 전환
새 창에서 열기

08 · 모션 줄이기 대응 — 시스템 설정에 따라 애니메이션이 거의 멈추는 전환 — 측정 누적면적 5.87% · 움직인 프레임 13/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

prefers-reduced-motionmatchMediaREDUCED_MOTION_SCALE

09둥근 모서리 형태 비교 — 원호 모서리와 매끈한 곡선 모서리를 나란히 놓고 보는 카드

같은 반지름 값을 줘도 원호로 급하게 꺾이는 기본 모서리와, 곡률이 서서히 변하는 매끈한 모서리가 나란히 놓여 차이가 눈에 바로 보입니다. 브랜드 카드 시안이나 아이콘 배경 프레임에 씁니다.

지원 여부에 따라 한 겹만 더 얹는다

두 카드 모두 같은 반지름을 자바스크립트로 받고, corner-shape: squircle을 지원하는 환경에서만 오른쪽 카드에 곡선 규칙이 한 겹 더 얹힙니다.

// 주인공 — border-radius 는 두 카드에 똑같이 JS 로 들어간다. corner-shape 만 오른쪽에 한 줄 더 얹는다.
@supports (corner-shape: squircle) {
  .cardShape {
    corner-shape: squircle;
  }
}
둥근 모서리 형태 비교 — 원호 모서리와 매끈한 곡선 모서리를 나란히 놓고 보는 카드
새 창에서 열기

09 · 둥근 모서리 형태 비교 — 원호 모서리와 매끈한 곡선 모서리를 나란히 놓고 보는 카드 — 측정 누적면적 1.044% · 움직인 프레임 9/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

corner-shape@supportsCSS.supports

css 초기화는 프레임워크 없이 어디까지 되나?

아홉 항목 모두 외부 라이브러리 없이 상수 하나·선택자 하나가 결과를 정해, css 초기화 코드를 프레임워크 없이 어디까지 손으로 다룰 수 있는지 보여줍니다.

값 하나가 결과를 가르는 상수들

  • 01 은 RESET_SCOPE가 minimal·full 중 무엇인지에 따라 지우는 기본값 목록 자체가 세 개에서 네 개로 늘어납니다.
  • 02 는 box-sizing이 content-box인지 border-box인지가 같은 너비값의 실제 카드 크기를 가릅니다.
  • 04 는 .fitImg에만 걸린 max-width: 100%·height: auto 두 줄이 원본 크기 그대로 넘치는 .rawImg와의 차이를 만듭니다.
  • 07 은 MAX_INSET_PX(24px)에 슬라이더 비율과 SAFE_AREA_SCALE(1.0)을 곱한 값이 안전 영역 여백의 위아래 폭을 정하며, 이 여백 계산의 표준 값 이름은 CSS 환경 변수 명세가 정합니다.
  • 08 은 REDUCED_MOTION_SCALE(0.1)이 BASE_DURATION_MS(900ms)에 곱해져 시뮬레이션이 켜졌을 때의 전환 시간을 정합니다.

표준 지원 검사로 대신하는 두 항목

03·09 는 html css 초기화 규칙 대신 자바스크립트에서 CSS.supports로 표준 기능이 있는지 먼저 물어, 지원하지 않는 환경에서는 균형 줄바꿈이나 곡선 모서리 규칙 자체를 건너뜁니다. 나머지 일곱 항목은 지원 검사 없이 선택자와 상수만으로 결과가 갈립니다.

이웃 가지 — 리셋과 맞닿은 다른 편

폼 요소의 글꼴을 되돌리는 05 는 button css 초기화·input css 초기화가 서체 하나로 끝나지 않는다는 점에서 css typography 플레이그라운드 9종 — 웹폰트 한 줄도 없이의 글꼴 크기·굵기 조합과 이어지지만, 이 편의 05 는 상속 여부 하나만 다룹니다. 표준 기능 지원 여부를 먼저 묻는 03·09 의 검사 방식은 css 브라우저 호환 9종 — 실제로 쓰는 폴백 트릭 모음의 지원 분기와 같은 축이지만, 이 편은 폴백 규칙을 따로 얹지 않고 지원하지 않는 환경의 기본 모습을 그대로 보여주는 데서 그칩니다. 09 가 반지름 값 하나로 비교하는 원호·곡선 모서리는 css corner-shape 9종 — border-radius 없이 깎는 모서리 모양이 아홉 가지 조합으로 더 넓게 다루고, 이 편의 09 는 그 축을 리셋 맥락에서 카드 한 장으로만 짚습니다.

어디서 깨지는가 — 함정

실제로 자주 겪는 함정은 순서입니다. 01 의 리셋 규칙을 다른 컴포넌트 스타일보다 뒤에 적으면 방금 공들여 맞춘 버튼 색·여백이 리셋 값으로 도로 덮여, 이 규칙은 항상 다른 규칙보다 먼저 불러와야 합니다. 05 도 마찬가지로 폼 상속 규칙을 개별 버튼 스타일 뒤에 적으면 상속받은 서체가 다시 브라우저 기본값으로 밀려납니다.

이 아홉 항목의 코드 원본(html·scss·js)은 zip 하나에 모두 들어 있고, 그 zip 을 여는 열쇠는 6tfe57vw 자리에 적어 둔 문장 속에 있습니다. 받은 파일의 상수 값을 직접 바꿔 보면 방금 짚은 순서 문제도 눈으로 재현되고, 아홉 항목이 같은 파일 안에서 상수와 결과값으로 어떻게 이어지는지도 함께 확인됩니다.

reduced-motion 이 항목마다 다르게 남긴다

01·05·06 은 reduce 환경에서 전환만 사라지고 지우거나 상속하는 로직 자체는 그대로 남습니다. 03 은 자동 시연 루프만 멈추고 지원 여부 배지는 그대로 유지되며, 08 은 reduce 자체가 주제라 시뮬레이션 스위치가 꺼도 켜도 배율 계산은 동일하게 동작합니다. 02·04·07·09 는 reduce 여부와 무관한 정적 비교라 값이 달라지지 않습니다.

지원하지 않는 환경에서 보이는 모습

지원하지 않는 환경이라고 화면이 깨지는 신호가 따로 오지는 않습니다. 03 은 균형 없는 줄바꿈이, 09 는 원호 모서리가 그대로 남는 정도로 그쳐, 두 항목 모두 지원 여부를 먼저 물어 둔 덕분에 지원하지 않는 환경에서도 기본 모습이 안전하게 유지됩니다.

변형 세 가지와 접근성

변형 값 느낌
리셋 범위 넓히기 01 RESET_SCOPE minimal → full RESET_SCOPE 를 full 로 넓히면 clearedList() 가 CLEARED_MINIMAL 에 link-decoration 을 더한 CLEARED_FULL 을 돌려줘, 지워지는 기본값이 세 항목에서 네 항목으로 늘어나 링크 밑줄까지 사라진다
세이프에어리어 여백 배율 키우기 07 SAFE_AREA_SCALE 1.0 → 1.5 SAFE_AREA_SCALE 을 1.5 로 올리면 top = MAX_INSET_PX × t × SAFE_AREA_SCALE 이라 같은 슬라이더 값에서 안전 영역 여백이 1.5배로 넓게 밀려나 내용이 더 안쪽으로 들어온다
모션 감소 시 전환 속도 더 낮추기 08 REDUCED_MOTION_SCALE 0.1 → 0.02 REDUCED_MOTION_SCALE 을 0.02 로 낮추면 currentDurationMs() 가 BASE_DURATION_MS × 0.02 를 돌려줘, 모션 감소 시뮬레이션에서 전환 시간이 1/10 에서 1/50 로 줄어 거의 순간 이동처럼 끝난다

포커스 링을 다루는 06 은 실제 Tab 키 입력과 클릭을 코드로 갈라 스크린 리더 사용자에게도 키보드 이동 상태가 그대로 전달되고, 08 의 시뮬레이션 버튼은 aria-pressed로 눌림 상태를 알립니다. 02·04·07·09 는 값 하나가 정적으로 비교되는 카드라 reduce 여부와 무관하게 항상 같은 모습으로 접근할 수 있습니다.

FAQ

아홉 개의 css 초기화 스니펫을 그대로 복사해서 써도 되나요?

가능합니다. 이 편의 펜스는 전부 실제 데모 파일에서 잘라낸 조각이라 붙여넣기만 하면 같은 모습이 나옵니다. 다만 01·05 처럼 리셋·상속 규칙은 다른 컴포넌트 스타일보다 먼저 불러와야 나중에 값이 덮이지 않습니다.

html css 초기화와 button css 초기화는 같은 파일에 같이 둬도 되나요?

네, 이 데모의 01·05·06 도 같은 스타일시트 안에서 요소 리셋과 버튼·입력창 세부 규칙을 함께 둡니다. 순서만 리셋이 먼저, 컴포넌트별 규칙이 나중이면 됩니다.

지원하지 않는 환경인지는 어떻게 확인하나요?

03·09 는 CSS.supports로 표준 기능이 있는지 스스로 물어 배지·모서리 모양으로 결과를 보여줍니다. 실제 프로젝트에서도 같은 함수로 먼저 물은 뒤 그 답에 따라 갈라지는 규칙을 그대로 옮기면 됩니다.

압축 비밀번호를 입력하세요

비밀번호는 이 글 본문 안에 있습니다. 읽다 보면 나옵니다.