bootstrap:reboot

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- bootstrap:reboot [2021/11/14 15:50] – taekgu
+++ bootstrap:reboot [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
@@ 줄 1: / 줄 1: @@
+====== 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) =====
+<code css>
+$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;
+</code>
+<code javascript>
+글꼴표현가능여부확인
+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
+});
+</code>
+===== 제목 및 단락 =====
+모든 제목 요소(예: <h1>및) <p>는 margin-top제거 되도록 재설정 됩니다. 쉬운 간격을 위해 제목 margin-bottom: .5rem과 단락 이 추가되었습니다 margin-bottom: 1rem.