재부팅
단일 파일의 요소별 CSS 변경 모음인 Reboot는 Bootstrap을 킥스타트하여 구축할 우아하고 일관되며 간단한 기준선을 제공합니다.
접근하다
Reboot는 Normalize를 기반으로 하여 요소 선택기만 사용하여 다소 독단적인 스타일로 많은 HTML 요소를 제공합니다. 추가 스타일링은 클래스에서만 수행됩니다. 예를 들어, <table>
더 간단한 기준선을 위해 일부 스타일을 재부팅하고 나중에 .table
, .table-bordered
등을 제공합니다.
다음은 Reboot에서 재정의할 항목을 선택하는 지침과 이유입니다.
- 확장 가능한 구성 요소 간격에 대해
rem
s 대신 s 를 사용하도록 일부 브라우저 기본값을 업데이트합니다 .em
- 피하십시오
margin-top
. 수직 여백이 축소되어 예기치 않은 결과가 발생할 수 있습니다. 그러나 더 중요한 것은 단일 방향margin
이 더 단순한 멘탈 모델이라는 것입니다. rem
장치 크기에 따라 더 쉽게 확장하려면 블록 요소 에서 s를 사용해야 합니다margin
.- 가능하면
font
를 사용하여 관련 속성 의 선언을 최소한으로 유지 합니다.inherit
페이지 기본값
<html>
및 <body>
요소는 더 나은 페이지 전체 기본값을 제공하도록 업데이트됩니다 . 더 구체적으로:
- 및 , 를
box-sizing
포함한 모든 요소에 대해 전역적으로 설정됩니다 . 이렇게 하면 패딩이나 테두리로 인해 선언된 요소 너비가 초과되지 않습니다.*::before
*::after
border-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,
// 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;
글꼴 스택에는 이모티콘 글꼴이 포함되어 있기 때문에 많은 일반적인 기호/딩뱃 유니코드 문자가 여러 색상의 그림 문자로 렌더링됩니다. 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. 부트스트랩 제목 |
기울기
모든 목록 <ul>
( , <ol>
, 및 -) <dl>
은 margin-top
제거되고 a margin-bottom: 1rem
. 중첩 목록에는 가 없습니다 margin-bottom
. 또한 padding-left
on <ul>
및 <ol>
요소를 재설정했습니다.
- 모든 목록의 상단 여백이 제거되었습니다.
- 그리고 그들의 하단 마진은 정규화되었습니다.
- 중첩 목록에는 하단 여백이 없습니다.
- 이렇게 하면 더 균일한 모양이 나타납니다.
- 특히 더 많은 목록 항목이 뒤에 오는 경우
- 왼쪽 패딩도 재설정되었습니다.
- 다음은 주문 목록입니다
- 몇 가지 목록 항목으로
- 전체적인 모습은 똑같습니다
- 이전의 정렬되지 않은 목록으로
더 간단한 스타일, 명확한 계층 구조, 더 나은 간격을 위해 설명 목록이 업데이트되었습니다 margin
. <dd>
로 재설정 margin-left
하고 0
추가하십시오 margin-bottom: .5rem
. <dt>
s는 굵게 표시 됩니다.
- 설명 목록
- 설명 목록은 용어를 정의하는 데 적합합니다.
- 용어
- 용어에 대한 정의입니다.
- 같은 용어에 대한 두 번째 정의.
- 다른 용어
- 이 다른 용어에 대한 정의입니다.
인라인 코드
코드의 인라인 스니펫을 <code>
. HTML 꺾쇠 괄호를 이스케이프 처리해야 합니다.
<section>
인라인으로 래핑되어야 합니다.
For example, <code><section></code> should be wrapped as inline.
코드 블록
<pre>
여러 줄의 코드에 s를 사용 합니다. 다시 한 번, 적절한 렌더링을 위해 코드에서 꺾쇠 괄호를 이스케이프 처리해야 합니다. 요소는 해당 요소를 제거하고 해당 요소에 대한 단위를 사용하도록 <pre>
재설정됩니다 .margin-top
rem
margin-bottom
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
변수
변수를 나타내기 위해 <var>
태그를 사용하십시오.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
사용자 입력
<kbd>
일반적으로 키보드를 통해 입력되는 입력을 나타내는 데 사용합니다 .
설정을 편집하려면 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>
태그를 사용하십시오.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
테이블
표는 스타일에 맞게 약간 조정되고 <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: pointer
when 이:not(:disabled)
있습니다.
이러한 변경 사항 등은 아래에 설명되어 있습니다.
날짜 및 색상 입력 지원
날짜 입력은 Safari와 같은 모든 브라우저에서 완전히 지원되지 않습니다 .
버튼의 포인터
재부팅에는 role="button"
기본 커서를 로 변경하기 위한 개선 사항이 포함되어 있습니다 pointer
. 이 속성을 요소에 추가하면 요소가 대화형임을 나타내는 데 도움이 됩니다. 이 역할은 <button>
자체적으로 cursor
변경되는 요소에는 필요하지 않습니다.
<span role="button" tabindex="0">Non-button element button</span>
기타 요소
주소
<address>
요소가 업데이트되어 브라우저 기본값 font-style
을 에서 로 재설정 italic
합니다 . 도 이제 상속 되어 추가되었습니다. s는 가장 가까운 조상(또는 전체 작업)의 연락처 정보를 표시하기 위한 것입니다. 로 줄을 끝내서 서식을 유지 하십시오.normal
line-height
margin-bottom: 1rem
<address>
<br>
1355 Market St, Suite 900
San Francisco, CA 94103 전화
: (123) 456-7890 성명
[email protected]
인용구
margin
blockquotes 의 기본값 은 이므로 다른 요소와 더 일관성이 1em 40px
있도록 재설정합니다 .0 0 1rem
blockquote 요소에 포함된 잘 알려진 인용문.
Source Title 에서 유명한 사람
인라인 요소
요소 는 <abbr>
단락 텍스트 사이에서 눈에 띄도록 기본 스타일을 지정합니다.
요약
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