Reboot

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

접근

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

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

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

CSS 변수

v5.2.0에서 추가됨

v5.1.1에서는 모든 CSS 번들(bootstrap.css, bootstrap-reboot.css, bootstrap-grid.css 포함)에서 필수 @import를 표준화하여 _root.scss를 포함하도록 했습니다. 이렇게 하면 해당 번들에서 사용되는 변수의 수에 관계없이 모든 번들에 :root 수준의 CSS 변수가 추가됩니다. 궁극적으로 Bootstrap 5는 시간이 지남에 따라 더 많은 CSS 변수를 추가하여 Sass를 항상 다시 컴파일할 필요 없이 더 많은 실시간 사용자 정의 기능을 제공할 것입니다. 우리의 접근 방식은 소스 Sass 변수를 가져와 CSS 변수로 변환하는 것입니다. 이렇게 하면 CSS 변수를 사용하지 않더라도 Sass의 모든 기능을 사용할 수 있습니다. 이 작업은 아직 진행 중이며 완전히 구현하는 데 시간이 걸립니다.

예를 들어 일반적인 <body> 스타일에 대한 :root CSS 변수를 생각해 보겠습니다:

scss/_root.scss

@if $font-size-root != null {
  --#{$prefix}root-font-size: #{$font-size-root};
}
--#{$prefix}body-font-family: #{inspect($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};
@if $body-text-align != null {
  --#{$prefix}body-text-align: #{$body-text-align};
}

--#{$prefix}body-color: #{$body-color};
--#{$prefix}body-color-rgb: #{to-rgb($body-color)};
--#{$prefix}body-bg: #{$body-bg};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};

--#{$prefix}emphasis-color: #{$body-emphasis-color};
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};

--#{$prefix}secondary-color: #{$body-secondary-color};
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
--#{$prefix}secondary-bg: #{$body-secondary-bg};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};

--#{$prefix}tertiary-color: #{$body-tertiary-color};
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};

실제로 이러한 변수는 다음과 같이 Reboot에 적용됩니다:

scss/_reboot.scss

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
}

이를 통해 원하는 대로 실시간 커스터마이징을 할 수 있습니다:

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

페이지 기본값

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

box-sizing는 *::before 및 *::after이후, border-box를 포함한 모든 요소에서 전역적으로 설정됩니다. 이렇게 하면 패딩이나 테두리로 인해 요소의 선언된 너비가 초과되지 않습니다.
<html>에는 기본 font-size가 선언되지 않고 16px(브라우저 기본값)가 사용됩니다. <body>에는 미디어 쿼리를 통해 반응형 글꼴 크기를 쉽게 조정하는 동시에 사용자 기본 설정을 존중하고 접근성을 높일 수 있도록font-size: 1rem이 적용됩니다. 이 브라우저 기본값은 $font-size-root 변수를 수정하여 재정의할 수 있습니다.
<body>는 또한 font-family, font-weight, line-height 및 color을 설정합니다. 이는 나중에 일부 폼 요소에서 상속되어 글꼴 불일치를 방지합니다.
안전을 위해 <body>에는 선언된 background-color이 있으며 기본값은 #fff입니다.

기본 글꼴 스택

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>—<h6>와 같은 모든 제목 요소는 margin-top이 제거되며, margin-bottom: .5rem이 추가되고 line-height가 적용됩니다. 제목은 기본적으로 color를 상속하지만 선택적 CSS 변수인 --bs-heading-color를 통해 재정의할 수도 있습니다.

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

단락

모든 <p> 요소의 margin-top이 제거되고 margin-bottom: 1rem이 설정되어 간격을 쉽게 배치할 수 있습니다.uo

This is an example paragraph.

html

<p>This is an example paragraph.</p>

링크

링크에는 기본 color와 밑줄이 적용됩니다. 링크는 :hover 시 변경되지만 누군가 링크를 :visited(방문)했는지 여부에 따라 변경되지는 않습니다. 또한 특별한 :focus 스타일도 적용되지 않습니다.

This is an example link

html

<a href="#">This is an example link</a>

v5.3.x부터 링크 color는 rgba()와 새로운 -rgb CSS 변수를 사용하여 설정되므로 링크 색상 불투명도를 쉽게 사용자 정의할 수 있습니다. 링크 색상 불투명도는 --bs-link-opacity CSS 변수를 사용하여 변경할 수 있습니다:

This is an example link

html

<a href="#" style="--bs-link-opacity: .5">This is an example link</a>

플레이스홀더 링크(href가 없는 링크)는 보다 구체적인 선택자가 적용되며 color 및 text-decoration이 기본값으로 재설정됩니다.

This is a placeholder link

html

<a>This is a placeholder link</a>

수평 규칙

<hr> 요소가 단순화되었습니다. 브라우저 기본값과 유사하게 <hr>는 border-top을 통해 스타일이 지정되고, 기본 opacity: .25를 가지며, 부모를 통해 color이 설정된 경우를 포함하여 color을 통해 border-color을 자동으로 상속받습니다. 텍스트, 테두리 및 불투명도 유틸리티를 사용하여 수정할 수 있습니다.

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를 갖습니다.

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

일부 날짜 입력 유형은 최신 버전의 Safari 및 Firefox에서 완전히 지원되지 않고 있습니다.

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

버튼 포인터

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>로 끝내서 서식을 유지합니다.

ACME Corporation
1123 Fictional St,
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에는 [hidden]이라고 불리는 새로운 전역 속성이 추가되었으며, 기본적으로 display: none으로 스타일링됩니다. PureCSS에서 아이디어를 빌려서 [hidden] {display: none !important; }를 사용하여 display가 실수로 재정의되는 것을 방지합니다.

<input type="text" hidden>

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

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

Reboot

접근

CSS 변수

페이지 기본값

기본 글꼴 스택

제목

단락

링크

수평 규칙

목록

인라인 코드

코드 블록

변수

사용자 입력

출력 예시

표

폼

버튼 포인터

기타 요소

주소

인용구

인라인 요소

요약

HTML5 [hidden] 속성

HTML5 `[hidden]` 속성