내용으로 건너뛰기 문서 내비게이션으로 건너뛰기
새로운 버전의 Bootstrap을 사용할 수 있습니다!

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

접근

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

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

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

페이지 기본값

<html><body> 요소는 더 넒은 페이지를 제공하기 위해 갱신됩니다. 구체적으로는 다음과 같습니다:

  • box-sizing*::before*::after를 포함한 모든 요소에서 border-box로 전역적으로 설정됩니다. 이렇게 하면 요소의 선언된 너비가 패딩이나 테두리로 인해 초과되지 않습니다.
    • <html>에는 기본 font-size가 선언되지 않지만 16px가 가정됩니다 (브라우저 기본값). font-size: 1rem<body>에 적용되어 미디어 쿼리를 통한 손쉬운 반응형 유형 확장을 위해 사용자 설정값을 존중하고 보다 접근하기 쉬운 접근 방식을 보장합니다. 이 브라우저 기본값은 $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,
  // 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;

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

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

CSS 변수

Bootstrap 5가 계속해서 발전해나감에 따라 Sass를 재컴파일할 필요 없이 더 많은 실시간 사용자 정의를 제공하는 수단으로 CSS 변수를 사용하여 점점 더 많은 스타일이 빌드될 것입니다. 우리의 접근 방식은 소스 Sass 변수를 가져와 CSS 변수로 변환하는 것입니다. 이렇게 하면 CSS 변수를 사용하지 않더라도 여전히 Sass의 모든 기능을 사용할 수 있습니다. 이 작업은 아직 진행 중이며 완전히 구현하려면 시간이 걸립니다.

예를 들어 일반적인 <body> 스타일에 대해 다음 :root CSS 변수를 고려합니다:

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

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

body {
  margin: 0; // 1
  font-family: var(--#{$variable-prefix}body-font-family);
  @include font-size(var(--#{$variable-prefix}body-font-size));
  font-weight: var(--#{$variable-prefix}body-font-weight);
  line-height: var(--#{$variable-prefix}body-line-height);
  color: var(--#{$variable-prefix}body-color);
  text-align: var(--#{$variable-prefix}body-text-align);
  background-color: var(--#{$variable-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>

제목과 단락

모든 제목 요소 (예: <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

목록

모든 목록 (<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
  1. Here’s an ordered list
  2. With a few list items
  3. It has the same overall look
  4. As the previous unordered list

더 간단한 스타일, 명확한 계층 구조, 더 나은 간격을 위해 설명 목록에는 업데이트된 margin이 포함되어 있습니다. <dd>margin-left0으로 재설정하고 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.
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

코드 블록

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

<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<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
<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 + ,
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.
<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

더 간단한 기본 스타일을 위해 다양한 폼 요소가 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

100

날짜 및 색상 입력 지원

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

버튼 포인터

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

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

기타 요소

주소

<address> 요소가 업데이트되어 브라우저 기본 font-styleitalic에서 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

인용구

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

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

Someone famous in Source Title

인라인 요소

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

The HTML abbreviation element.

요약

요약의 기본 cursortext이므로 요소를 클릭하여 상호 작용할 수 있음을 전달하기 위해 이를 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 클래스를 사용하세요.