재부팅

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

접근하다

Reboot는 Normalize를 기반으로 하여 요소 선택기만 사용하여 다소 독단적인 스타일로 많은 HTML 요소를 제공합니다. 추가 스타일링은 클래스에서만 수행됩니다. 예를 들어, <table>더 간단한 기준선을 위해 일부 스타일을 재부팅하고 나중에 .table, .table-bordered등을 제공합니다.

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

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

페이지 기본값

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

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

기본 글꼴 스택

기본 웹 글꼴(Helvetica Neue, Helvetica 및 Arial)은 Bootstrap 4에서 삭제되었으며 모든 장치 및 OS에서 최적의 텍스트 렌더링을 위해 "네이티브 글꼴 스택"으로 대체되었습니다. 이 Smashing Magazine 기사 에서 기본 글꼴 스택에 대해 자세히 알아보세요 .

$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",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

이는 부트스트랩 전체 font-family에 적용 <body>되고 자동으로 전역적으로 상속됩니다. 전역을 전환하려면 Bootstrap font-family을 업데이트 $font-family-base하고 다시 컴파일하십시오.

제목 및 단락

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

표제	예시
`<h1></h1>`	h1. 부트스트랩 제목
`<h2></h2>`	h2. 부트스트랩 제목
`<h3></h3>`	h3. 부트스트랩 제목
`<h4></h4>`	h4. 부트스트랩 제목
`<h5></h5>`	h5. 부트스트랩 제목
`<h6></h6>`	h6. 부트스트랩 제목

기울기

모든 목록 <ul>( , <ol>, 및 -) <dl>은 margin-top제거되고 a margin-bottom: 1rem. 중첩 목록에는 가 없습니다 margin-bottom.

Lorem ipsum dolor sitmet
Consectetur adipiscing 엘리트
정수 molestie lorem at massa
Pretium nisl aliquet의 시설
눌라 볼룻팟 알리콰암 벨릿
- Phasellus iaculis neque
- Purus sodales ultricies
- 베스티불룸 라오렛 포티터 sem
- Ac tristique libero volutpat
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sitmet
Consectetur adipiscing 엘리트
정수 molestie lorem at massa
Pretium nisl aliquet의 시설
눌라 볼룻팟 알리콰암 벨릿
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

더 간단한 스타일, 명확한 계층 구조, 더 나은 간격을 위해 설명 목록이 업데이트되었습니다 margin. <dd>로 재설정 margin-left하고 0추가하십시오 margin-bottom: .5rem. <dt>s는 굵게 표시 됩니다.

설명 목록: 설명 목록은 용어를 정의하는 데 적합합니다.
유이스모드: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
말레수아다 포르타: Etiam porta sem malesuada magna mollis euismod.

서식이 지정된 텍스트

요소는 해당 요소를 제거하고 해당 요소에 대한 단위를 사용하도록 <pre>재설정됩니다 .margin-topremmargin-bottom

.example-요소 {
  여백-하단: 1rem;
}

테이블

표는 스타일에 맞게 약간 조정되고 <caption>테두리를 축소하며 전체에 걸쳐 일관성을 보장 text-align합니다. 테두리, 패딩 등에 대한 추가 변경 사항 은 .table클래스 와 함께 제공됩니다 .

이것은 예시 테이블이며, 내용을 설명하기 위한 캡션입니다.
표 제목	표 제목	표 제목	표 제목
테이블 셀	테이블 셀	테이블 셀	테이블 셀
테이블 셀	테이블 셀	테이블 셀	테이블 셀
테이블 셀	테이블 셀	테이블 셀	테이블 셀

양식

더 단순한 기본 스타일을 위해 다양한 양식 요소가 재부팅되었습니다. 다음은 가장 눈에 띄는 변경 사항입니다.

<fieldset>s에는 테두리, 패딩 또는 여백이 없으므로 개별 입력 또는 입력 그룹에 대한 래퍼로 쉽게 사용할 수 있습니다.
<legend>필드셋과 마찬가지로 s도 일종의 제목으로 표시되도록 스타일이 변경되었습니다.
<label>s는 적용 display: inline-block할 수 있도록 설정 margin됩니다.
<input>s, <select>s, <textarea>s 및 <button>s는 대부분 Normalize에 의해 처리되지만 Reboot는 해당 margin및 세트 line-height: inherit도 제거합니다.
<textarea>가로 크기 조정은 종종 페이지 레이아웃을 "파괴"하므로 세로로만 크기 조정이 가능하도록 수정됩니다.
<button>s 및 <input>버튼 요소에는 cursor: pointerwhen 이 :not(:disabled)있습니다.

이러한 변경 사항 등은 아래에 설명되어 있습니다.

버튼의 포인터

재부팅에는 role="button"기본 커서를 로 변경하기 위한 개선 사항이 포함되어 있습니다 pointer. 이 속성을 요소에 추가하면 요소가 대화형임을 나타내는 데 도움이 됩니다. 이 역할은 <button>자체적으로 cursor변경되는 요소에는 필요하지 않습니다.

버튼이 아닌 요소 버튼

<span role="button" tabindex="0">Non-button element button</span>

기타 요소

주소

<address>요소가 업데이트되어 브라우저 기본값 font-style을 에서 로 재설정 italic합니다 . 도 이제 상속 되어 추가되었습니다. s는 가장 가까운 조상(또는 전체 작업)의 연락처 정보를 표시하기 위한 것입니다. 로 줄을 끝내서 서식을 유지 하십시오.normalline-heightmargin-bottom: 1rem<address><br>

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103 전화
: (123) 456-7890

성명
[email protected]

인용구

marginblockquotes 의 기본값 은 이므로 다른 요소와 더 일관성이 1em 40px있도록 재설정합니다 .0 0 1rem

Lorem ipsum dolor sitmet, consectetur adipiscing elit. Integer posuere erat ante.

Source Title 에서 유명한 사람

인라인 요소

요소 는 <abbr>단락 텍스트 사이에서 눈에 띄도록 기본 스타일을 지정합니다.

Nulla attr vitae elit libero, a pharetra augue.

요약

cursor요약 의 기본값 은 이므로 요소를 클릭하여 상호 작용할 수 있음을 전달 하기 위해 이를 text재설정 합니다.pointer

몇 가지 세부 사항

세부 사항에 대한 추가 정보.

더 자세한 정보

세부 사항에 대한 자세한 내용은 다음과 같습니다.

HTML5 `[hidden]`속성

HTML5는 기본적으로 스타일이 지정된 이라는 새 전역 속성을 추가합니다. [hidden]PureCSSdisplay: none 에서 아이디어를 차용하여 실수로 재정의되는 것을 방지하기 위해 이 기본값을 개선합니다 . IE10에서 기본적으로 지원되지는 않지만 CSS의 명시적 선언은 이 문제를 해결합니다 .[hidden] { display: none !important; }display[hidden]

<input type="text" hidden>

jQuery 비호환성

[hidden]$(...).hide()jQuery 및 $(...).show()메서드 와 호환되지 않습니다 . 따라서 우리는 현재 요소 [hidden]관리를 위한 다른 기술을 특별히 지지하지 않습니다 .display

요소의 가시성을 토글(즉, display수정되지 않고 요소가 여전히 문서의 흐름에 영향을 미칠 수 있음)하려면 대신 클래스 를 사용 하십시오 ..invisible

재부팅