Reboot

단일 파일의 요소별 CSS 변경 모음인 Reboot는 Bootstrap을 킥스타트하여 구축할 수 있는 우아하고 일관되며 간단한 기준선을 제공합니다.

Approach

Reboot에서 재정의할 항목을 선택하는 지침과 이유입니다.

확장 가능한 구성 요소 간격을 위해 em 대신 rem을 사용하도록 일부 브라우저 기본값을 업데이트합니다.
margin-top을 피하십시오. 수직 여백이 축소되어 예기치 않은 결과가 발생할 수 있습니다. 그러나 더 중요한 것은 margin의 단일 방향이 더 단순한 멘탈 모델이라는 것입니다.
장치 크기를 쉽게 확장하려면 블록 요소에서 margin에 rem를 사용해야 합니다.
가능한 한 상속을 사용하여 font관련 속성의 선언을 최소한으로 유지합니다.

Page defaults

<html> 및 <body> 요소는 더 나은 페이지 전체 기본값을 제공하도록 업데이트되었습니다. 더 구체적으로:

box-sizing은 *::before 및 *::after를 포함한 모든 요소에 대해 전역적으로 설정되어 border-box로 설정됩니다. 이렇게 하면 패딩이나 테두리로 인해 선언된 요소 너비가 절대 초과되지 않습니다.
기본 font-size는 <html>에 선언되어 있지 않지만 16px로 가정됩니다(브라우저 기본값). font-size: 1rem이 <body>에 적용되어 미디어 쿼리를 통해 쉽게 반응하는 유형 크기 조정을 수행하는 동시에 사용자 선호도를 존중하고 보다 접근 가능한 접근 방식을 보장합니다.
<body>는 또한 전역 글꼴 모음, 줄 높이 및 텍스트 정렬을 설정합니다. 이것은 글꼴 불일치를 방지하기 위해 나중에 일부 양식 요소에 의해 상속됩니다.
안전을 위해 <body>에는 배경색이 선언되어 있으며 기본값은 #fff입니다.

기본 글꼴(Font Family)

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

글꼴표현가능여부확인
https://www.bramstein.com/writing/detecting-system-fonts-without-flash.html
var observer = new FontFaceObserver(‘Georgia’);
 
observer.check().then(function () {
  // Georgia is available
}, function () {
  // Georgia is not available
});

제목 및 단락

모든 제목 요소(예: <h1>및) <p>는 margin-top제거 되도록 재설정 됩니다. 쉬운 간격을 위해 제목 margin-bottom: .5rem과 단락 이 추가되었습니다 margin-bottom: 1rem.

목차

Reboot

Approach

Page defaults

기본 글꼴(Font Family)

제목 및 단락