재부팅

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

이 페이지에서

접근하다

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

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

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

CSS 변수

v5.2.0에 추가됨

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

예를 들어, 일반적인 스타일 :root에 대해 다음 CSS 변수를 고려하십시오.<body>

  @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};

실제로 이러한 변수는 다음과 같이 재부팅에 적용됩니다.

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*::afterborder-box
- 기본 font-size은 에 선언 되지 <html>않았지만 16px가정됩니다(브라우저 기본값). 사용자 선호도를 존중하고 보다 접근 가능한 접근 방식을 보장하면서 미디어 쿼리를 통해 쉽게 반응하는 유형 크기 조정을 위해 font-size: 1rem에 적용됩니다 . 이 브라우저 기본값은 변수 <body>를 수정하여 무시할 수 있습니다 .$font-size-root
또한 <body>전역 font-family, font-weight, line-height및 를 설정합니다 color. 이것은 글꼴 불일치를 방지하기 위해 나중에 일부 양식 요소에 의해 상속됩니다.
안전을 <body>위해 선언된 가 background-color있으며 기본값은 #fff입니다.

기본 글꼴 스택

부트스트랩은 모든 장치와 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;

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

이는 부트스트랩 전체 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. 부트스트랩 제목

수평 규칙

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

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제거되고 a margin-bottom: 1rem. 중첩 목록에는 가 없습니다 margin-bottom. 또한 padding-lefton <ul>및 <ol>요소를 재설정했습니다.

모든 목록의 상단 여백이 제거되었습니다.
그리고 그들의 하단 마진은 정규화되었습니다.
중첩 목록에는 하단 여백이 없습니다.
- 이렇게 하면 더 균일한 모양이 나타납니다.
- 특히 더 많은 목록 항목이 뒤에 오는 경우
왼쪽 패딩도 재설정되었습니다.

다음은 주문 목록입니다
몇 가지 목록 항목으로
전체적인 모습은 똑같습니다
이전의 정렬되지 않은 목록으로

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

설명 목록: 설명 목록은 용어를 정의하는 데 적합합니다.
용어: 용어에 대한 정의입니다.; 같은 용어에 대한 두 번째 정의.
다른 용어: 이 다른 용어에 대한 정의입니다.

인라인 코드

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

예를 들어 <section>인라인으로 래핑되어야 합니다.

HTML

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

코드 블록

<pre>여러 줄의 코드에 s를 사용 합니다. 다시 한 번, 적절한 렌더링을 위해 코드에서 꺾쇠 괄호를 이스케이프 처리해야 합니다. 요소는 해당 요소를 제거하고 해당 요소에 대한 단위를 사용하도록 <pre>재설정됩니다 .margin-topremmargin-bottom

<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 = m x + b

HTML

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

사용자 입력

<kbd>일반적으로 키보드를 통해 입력되는 입력을 나타내는 데 사용합니다 .

디렉토리를 전환하려면 디렉토리 cd이름 다음에 입력하십시오.
설정을 편집하려면 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>태그를 사용하십시오.

이 텍스트는 컴퓨터 프로그램의 샘플 출력으로 취급됩니다.

HTML

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

테이블

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

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

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>

양식

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

<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)있습니다.

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

예시 범례

예시 입력

이메일 예시

전화 예

예시 URL

예시 번호

검색 예

예시 범위

예제 파일 입력

선택 예

이 확인란을 선택하십시오

옵션 1은 이것 저것 옵션 2는 이러한 멋진 양식 컨트롤의 래핑을 보여주기에 매우 긴 다른 것입니다. 옵션 3이 비활성화되었습니다.

예제 텍스트 영역

날짜 예시

예시 시간

비밀번호 예시

예제 날짜/시간-로컬

예시 주

예시 월

예시 색상

출력 예시 100

날짜 및 색상 입력 지원

날짜 입력은 Safari와 같은 모든 브라우저에서 완전히 지원되지 않습니다 .

버튼의 포인터

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

버튼이 아닌 요소 버튼

HTML

<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

blockquote 요소에 포함된 잘 알려진 인용문.

Source Title 에서 유명한 사람

인라인 요소

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

HTML 약어 요소입니다 .

요약

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

몇 가지 세부 사항

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

더 자세한 정보

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

HTML5 `[hidden]`속성

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

<input type="text" hidden>

jQuery 비호환성

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

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

재부팅

접근하다

CSS 변수

페이지 기본값

기본 글꼴 스택

제목 및 단락

수평 규칙

기울기

인라인 코드

코드 블록

변수

사용자 입력

샘플 출력

테이블

양식

날짜 및 색상 입력 지원

버튼의 포인터

기타 요소

주소

인용구

인라인 요소

요약

HTML5 [hidden]속성

jQuery 비호환성

HTML5 `[hidden]`속성