Reboot

단일 파일에 있는 요소별 CSS 변경 모음인 Reboot는 Bootstrap을 초기에 빌드하는 우아하고 일관되며 간단한 기준선을 제공합니다.

접근

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

다음은 재부팅에서 Reboot할 항목을 선택하는 지침과 이유입니다:

확장 가능한 컴포넌트 간격에 em 대신rem을 사용하도록 일부 브라우저의 기본값을 업데이트합니다.
margin-top을 제외합니다. 수직 margin은 구조적으로 불안정하며, 예상치 못한 결과를 가져올 수 있습니다. 더 중요한 것은 단방향 margin이 더 단순한 멘탈 모델이기 때문입니다.
더 쉬운 기기 간 크기 확장을 위해서 블럭 요소의 margin에 rem을 사용합니다.
가능하면 inherit를 사용하여 font 관련 속성의 선언을 최소한으로 유지합니다.

페이지 기본값

v5.2.0에서 추가됨

With v5.1.1, we standardized our required @imports across all our CSS bundles (including bootstrap.css, bootstrap-reboot.css, and bootstrap-grid.css) to include _root.scss. This adds :root level CSS variables to all bundles, regardless of how many of them are used in that bundle. Ultimately Bootstrap 5 will continue to see more CSS variables added over time, in order to provide more real-time customization without the need to always recompile Sass. Our approach is to take our source Sass variables and transform them into CSS variables. That way, even if you don’t use CSS variables, you still have all the power of Sass. This is still in-progress and will take time to fully implement.

For example, consider these :root CSS variables for common <body> styles:

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

In practice, those variables are then applied in Reboot like so:

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

Which allows you to make real-time customizations however you like:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

기본 글꼴 스택

Bootstrap은 모든 장치 및 OS에서 최적의 텍스트 렌더링을 위해 “기본 글꼴 스택” 또는 “시스템 글꼴 스택"을 사용합니다. 이러한 시스템 글꼴은 화면 렌더링 개선, 가변 글꼴 지원 등을 포함하여 오늘날의 장치를 염두에 두고 특별히 설계되었습니다. Smashing Magazine의 글에서 기본 글꼴 스택에 대해서 자세히 알아보세요.

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

글꼴 스택에는 이모지 글꼴이 포함되어 있기 때문에 많은 일반적인 기호/딩뱃 유니코드 텍스트가 여러 색상의 그림 텍스트로 렌더링됩니다. 브라우저/플랫폼의 기본 이모티콘 글꼴에 사용된 스타일에 따라 모양이 달라지며 CSS color 스타일의 영향을 받지 않습니다.

이 font-family는 자동으로 <body에 적용되며 Bootstrap을 통해 자동으로 전역 상속됩니다. 전역 font-family를 바꾸려면 $font-family-base를 업데이트한 다음 Bootstrap을 다시 컴파일해주세요.

제목과 단락

모든 제목 요소 (예: <h1> 및 <p>)는 margin-top이제거되도록 재설정됩니다. 제목에는 margin-bottom: .5rem이추가되고 단락은 margin-bottom : 1rem이 추가되어 간격을 쉽게 조정할 수 있습니다.

Heading	Example
`<h1></h1>`	h1. Bootstrap heading
`<h2></h2>`	h2. Bootstrap heading
`<h3></h3>`	h3. Bootstrap heading
`<h4></h4>`	h4. Bootstrap heading
`<h5></h5>`	h5. Bootstrap heading
`<h6></h6>`	h6. Bootstrap heading

Horizontal rules

The <hr> element has been simplified. Similar to browser defaults, <hr>s are styled via border-top, have a default opacity: .25, and automatically inherit their border-color via color, including when color is set via the parent. They can be modified with text, border, and opacity utilities.

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

모든 목록 (<ul>,<ol>, <dl>)에는 margin-top이 제거되고 margin-bottom: 1rem이 제거됩니다. 중첩된 목록에는 margin-bottom이 없습니다. 또한<ul> 및 <ol> 요소에서 padding-left를 재설정했습니다.

All lists have their top margin removed
And their bottom margin normalized
Nested lists have no bottom margin
- This way they have a more even appearance
- Particularly when followed by more list items
The left padding has also been reset

Here’s an ordered list
With a few list items
It has the same overall look
As the previous unordered list

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

Description lists: A description list is perfect for defining terms.
Term: Definition for the term.; A second definition for the same term.
Another term: Definition for this other term.

인라인 코드

인라인 코드 스니펫을 <code>로 묶습니다. HTML 꺾쇠 괄호를 이스케이프해야 합니다.

For example, <section> should be wrapped as inline.

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

코드 블록

여러 줄의 코드에는 <pre>를 사용하세요. 다시 한 번 올바른 렌더링을 위해 코드에서 꺾쇠 괄호를 이스케이프해야 합니다. <pre> 요소는 margin-top을 제거하고 margin-bottom에 rem 단위를 사용하도록 재설정됩니다.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

html

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

변수

변수를 나타내려면 <var> 태그를 사용하세요.

y = mx + b

html

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

사용자 입력

일반적으로 키보드를 통해 입력되는 입력을 나타내려면 <kbd>를 사용해주세요.

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

html

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

출력 예시

프로그램의 출력 예시를 나타내려면 <samp> 태그를 사용해주세요.

This text is meant to be treated as sample output from a computer program.

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

표

표는 스타일 <caption>, 테두리 축소 및 전체적으로 일관된 text-align을 위해 약간 조정됩니다. 테두리, 패딩 등에 대한 추가 변경 사항은 .table 클래스와 함께 제공됩니다.

This is an example table, and this is its caption to describe the contents.
Table heading	Table heading	Table heading	Table heading
Table cell	Table cell	Table cell	Table cell
Table cell	Table cell	Table cell	Table cell
Table cell	Table cell	Table cell	Table cell

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

폼

더 간단한 기본 스타일을 위해 다양한 폼 요소가 Reboot되었습니다. 다음은 가장 눈에 띄는 변경 사항입니다:

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

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

Example legend

Example input

Example email

Example telephone

Example url

Example number

Example search

Example range

Example file input

Example select

Check this checkbox

Option one is this and that Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls. Option three is disabled

Example textarea

Example date

Example time

Example password

Example datetime-local

Example week

Example month

Example color

Example output 100

날짜 및 색상 입력 지원

날짜 입력은 Safari 같은 일부 브라우저에서 제한적으로 지원됩니다.

버튼 포인터

Reboot에는 기본 커서를 pointer로 변경하는 role="button"의 개선 사항이 포함되어 있습니다. 이 속성을 요소에 추가하면 요소가 상호 작용함을 나타내는 데에 도움이 됩니다. 이 역할은 자체 cursor 변경 사항을 갖는 <button> 요소에는 필요하지 않습니다.

Non-button element button

html

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

기타 요소

주소

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

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

Full Name
first.last@example.com

인용구

인용구의 기본 margin은 1em 40px이므로 다른 요소와 더 일관된 무언가를 위해 0 0 1rem으로 재설정합니다.

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

인라인 요소

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

The HTML abbreviation element.

요약

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

Some details

More info about the details.

Even more details

Here are even more details about the details.

HTML5 `[hidden]` 속성

HTML5에는 a new global attribute named [hidden]이라고 불리는 새로운 전역 속성이 추가되었으며, 기본적으로 display: none으로 스타일링됩니다. PureCSS에서 아이디어를 빌려서 [hidden] {display: none !important; }를 사용하여 display가 실수로 재정의되는 것을 방지합니다.

<input type="text" hidden>

jQuery와 호환되지 않음

[hidden]은 jQuery의 $(...).hide() 및 $(...).show() 메소드와 호환되지 않습니다. 따라서 현재 요소의 display를 관리하는 다른 기술보다 [hidden]을 딱히 추천하지 않습니다.

요소의 표시 여부를 전환하기 만하면 display가 수정되지 않고 요소가 문서의 흐름에 계속 영향을 미칠 수 있음을 의미합니다. 대신 .invisible 클래스를 사용하세요.

Reboot

접근

페이지 기본값

기본 글꼴 스택

제목과 단락

Horizontal rules

목록

인라인 코드

코드 블록

변수

사용자 입력

출력 예시

표

폼

날짜 및 색상 입력 지원

버튼 포인터

기타 요소

주소

인용구

인라인 요소

요약

HTML5 [hidden] 속성

jQuery와 호환되지 않음

HTML5 `[hidden]` 속성