BootStrap5(BS5) 공부하기 2

부트스트랩은 디폴트 폰트사이즈를 1rem(16px)로 하고, 라인의 높이는 1.5로 한다.

덧붙여서, <p>는 margin-top을 0으로 갖고, margin-bottom을 1rem(16px)로 갖는다.

부트스트랩에서는 HTML에서와 같이 <h1>~<h6>을 쓰는것이 가능하다.

<div class="container mt-3">
  <p>The font-size of each Bootstrap heading depends on the screen size. Try to resize the browser window to see the effect.</p>
  <h1>h1 Bootstrap heading</h1>
  <h2>h2 Bootstrap heading</h2>
  <h3>h3 Bootstrap heading</h3>
  <h4>h4 Bootstrap heading</h4>
  <h5>h5 Bootstrap heading</h5>
  <h6>h6 Bootstrap heading</h6>
</div>

그리고 클래스에도 다음과 같이 사용이 가능하다.

<div class="container mt-3">
  <p class="h1">h1 Bootstrap heading</p>
  <p class="h2">h2 Bootstrap heading</p>
  <p class="h3">h3 Bootstrap heading</p>
  <p class="h4">h4 Bootstrap heading</p>
  <p class="h5">h5 Bootstrap heading</p>
  <p class="h6">h6 Bootstrap heading</p>
</div>

디스플레이 제목은 일반적인 제목보다 더 눈에 띄게(더 큰 폰트사이즈와 더 밝은 느낌) 표현이 가능한 제목이다.

  <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>
  <h1 class="display-5">Display 5</h1>
  <h1 class="display-6">Display 6</h1>

부트스트랩5에서 HTML요소(와 클래스)는 제목 내에서 더 작은 보조 텍스트를 위해 사용한다.

  <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>

이렇게 하면 ~heading보다 조금 더 작은 글자로 secondary text가 출력된다.

부트스트랩에서는 <mark>로 하이라이트를 줄 수 있다.

<div class="container mt-3">
  <h1>Highlight Text</h1>    
  <p>Use the mark element (or the .mark class) to <mark>highlight</mark> text.</p>
</div>

부트스트랩은 HTML요소의 아래에 점자로 된 border를 제공하고 hover시 물음표 마크를 보여주는 기능을 <abbr> 로 지원한다.

<div class="container mt-3">
  <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>

위와 같이 하면 WHO글자를 마우스로 가리킬 때 abbr title이라고 되어 있는 부분의 텍스트 박스가 나타나게 된다.

인용 블록을 위해서는 <blockquote>를 사용할 수 있다.

<blockquote class="blockquote">
    <p>Fori ~~~ bally.</p>
    <footer class="blockquote-footer">From WWF's website</footer>
  </blockquote>

디스크립션 리스트의 사용에 HTML과 같이 <dl>의 사용이 가능하다.

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl> 

code를 보여줄 땐 다음과 같이 <code>라고 사용하면 된다.

<p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.</p>

아래와 같이 <kbd>를 사용하면 까만 박스형식이 생성된다.

<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>

텍스트에 색깔을 주어 의미를 강조할 수 있는데, 다음과 같이 사용한다.

<div class="container mt-3">
  <h2>Contextual Colors</h2>
  <p>Use the contextual classes to provide "meaning through colors":</p>
  <p class="text-muted">This text is muted.</p>
  <p class="text-primary">This text is important.</p>
  <p class="text-success">This text indicates success.</p>
  <p class="text-info">This text represents some information.</p>
  <p class="text-warning">This text represents a warning.</p>
  <p class="text-danger">This text represents danger.</p>
  <p class="text-secondary">Secondary text.</p>
  <p class="text-dark">This text is dark grey.</p>
  <p class="text-body">Default body color (often black).</p>
  <p class="text-light">This text is light grey (on white background).</p>
  <p class="text-white">This text is white (on white background).</p>
</div>

텍스트의 불투명도를 주기 위해서는 다음과 같이 하면 된다

<p class="text-black-50">Black text with 50% opacity on white background</p>
  <p class="text-white-50 bg-dark">White text with 50% opacity on black background</p>

텍스트의 백그라운드 컬러는 다음과 같이 한다.

<div class="container mt-3">
  <h2>Contextual Backgrounds</h2>
  <p>Use the contextual background classes to provide "meaning through colors".</p>
  <p>Note that you can also add a .text-* class if you want a different text color:</p>
  <p class="bg-primary text-white">This text is important.</p>
  <p class="bg-success text-white">This text indicates success.</p>
  <p class="bg-info text-white">This text represents some information.</p>
  <p class="bg-warning text-white">This text represents a warning.</p>
  <p class="bg-danger text-white">This text represents danger.</p>
  <p class="bg-secondary text-white">Secondary background color.</p>
  <p class="bg-dark text-white">Dark grey background color.</p>
  <p class="bg-light text-dark">Light grey background color.</p>
</div>