====== Reboot ======
단일 파일의 요소별 CSS 변경 모음인 Reboot는 Bootstrap을 킥스타트하여 구축할 수 있는 우아하고 일관되며 간단한 기준선을 제공합니다.
===== Approach =====
Reboot에서 재정의할 항목을 선택하는 지침과 이유입니다.
* 확장 가능한 구성 요소 간격을 위해 ''**em**'' 대신 ''**rem**''을 사용하도록 일부 브라우저 기본값을 업데이트합니다.
* margin-top을 피하십시오. 수직 여백이 축소되어 예기치 않은 결과가 발생할 수 있습니다. 그러나 더 중요한 것은 margin의 단일 방향이 더 단순한 멘탈 모델이라는 것입니다.
* 장치 크기를 쉽게 확장하려면 블록 요소에서 margin에 rem를 사용해야 합니다.
* 가능한 한 상속을 사용하여 font관련 속성의 선언을 최소한으로 유지합니다.
===== Page defaults =====
및 요소는 더 나은 페이지 전체 기본값을 제공하도록 업데이트되었습니다. 더 구체적으로:
* box-sizing은 *::before 및 *::after를 포함한 모든 요소에 대해 전역적으로 설정되어 border-box로 설정됩니다. 이렇게 하면 패딩이나 테두리로 인해 선언된 요소 너비가 절대 초과되지 않습니다.
* 기본 font-size는 에 선언되어 있지 않지만 16px로 가정됩니다(브라우저 기본값). font-size: 1rem이 에 적용되어 미디어 쿼리를 통해 쉽게 반응하는 유형 크기 조정을 수행하는 동시에 사용자 선호도를 존중하고 보다 접근 가능한 접근 방식을 보장합니다.
* 는 또한 전역 글꼴 모음, 줄 높이 및 텍스트 정렬을 설정합니다. 이것은 글꼴 불일치를 방지하기 위해 나중에 일부 양식 요소에 의해 상속됩니다.
* 안전을 위해 에는 배경색이 선언되어 있으며 기본값은 #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
});
===== 제목 및 단락 =====
모든 제목 요소(예: 및)
는 margin-top제거 되도록 재설정 됩니다. 쉬운 간격을 위해 제목 margin-bottom: .5rem과 단락 이 추가되었습니다 margin-bottom: 1rem.