Bootstrap4 기본 설정

Bootstrap4는 기본 글꼴 크기 16px를 사용하며 선 높이는 1.5입니다.

기본 글꼴 모음은 "Helvetica Neue", Helvetica, Arial, sans-serif입니다. 한글을 사용하는 우리 입장에서는 조금 아쉬운 부분인데 한글 표현을 위해 CSS 재설정이 필요합니다.

또한, 모든 <p>요소는 margin-top:0과 margin-bottom:1rem(기본값16px)이 있습니다.

<h1> - <h6>

부트스트랩4는 HTML제목(<h1>~<h6>)에 대하여 굵은 글꼴과 크기를 증가시키는 스타일을 가집니다.

제목 표시(Headings)

제목 표시는 기존 HTML에서 제공되는 일반적인 제목(h1~h6)보다 더 돋보이게 하기 위하여 이용되고 4개의 클래스가 제공됩니다.

.display-1, .display-2, display-3, display-4

<h1 class="display-1">Display 1</h1>
  <h1 class="display-2">Display 2</h1>
  <h1 class="display-3">Display 3</h1>
  <h1 class="display-4">Display 4</h1>

<small>

부트스트랩4에서 HTML <small>요소는 모든 제목에 더 가벼운 보조문자를 작성하는데 사용됩니다.

<h1>h1 heading <small>secondary text</small></h1>
  <h2>h2 heading <small>secondary text</small></h2>
  <h3>h3 heading <small>secondary text</small></h3>
  <h4>h4 heading <small>secondary text</small></h4>
  <h5>h5 heading <small>secondary text</small></h5>
  <h6>h6 heading <small>secondary text</small></h6>

<mark>

부트스트랩4는 HTML <mark>요소를 노란색 배경과 약간의 여백을 주기 위해 사용합니다.

부트스트랩4와 그누보드강좌는 <mark>https://365ok.co.kr</mark>에서 진행합니다.

<abbr>

부트스트랩4는 HTML <abbr>요소를 아랫부분에 점선 테두리 스타일을 지정하는데 사용합니다.

<p><abbr title="World Health Organization">WHO</abbr>은 1948년에 설립되었습니다.</p>

<blockquote>

HTML <blockquote>요소는 다른 소스에서 내용을 인용할 때 사용합니다. 부트스트랩4에서는 이 요소에 .blockquote클래스를 추가하여 사용합니다.

<blockquote class="blockquote">
    <p>진실은 반드시 따르는 자가 있고, 정의는 반드시 이루는 날이 있다.</p>
    <footer class="blockquote-footer">도산 안창호</footer>
  </blockquote>

<dl>

부트스트랩4에서는 HTML <dl>요소를 아래와 같이 스타일을 지정하고 있습니다.

<dl>
    <dt>Coffee</dt>
    <dd>- 검고 따뜻한 음료</dd>
    <dt>Milk</dt>
    <dd>- 흰색의 차가운 음료</dd>
  </dl>  

<code>

부트스트랩4는 HTML <code>요소에 대해 아래와 같이 스타일을 지정합니다.

<p>HTML 요소: <code>span</code>, <code>section</code>, 그리고 <code>div</code>는 문서내에서 섹션을 정의합니다.</p>

<kbd>

부트스트랩4는 HTML <kbd>요소에 대해 아래와 같이 스타일을 지정합니다.

<p>인쇄창을 열기 위해서 <kbd>ctrl + p</kbd> 사용하세요.</p>

<pre>

부트스트랩4는 HTML <pre>요소에 대해 아래와 같이 스타일을 지정합니다.

<pre>
산다는 것은 흐르면서 죽는 것 
보이지 않게 
조금씩 흔들리며 
성숙하는    아픔이다
</pre>

그 외 Typography 클래스들..