동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
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 클래스들..
클래스 |
설명 |
.font-weight-bold |
진하고 굵은 글자 |
.font-weight-normal |
일반 글자 |
.font-weight-light |
연하고 얇은 글자 |
.font-italic |
이텔릭 |
.lead |
눈에 띄는 단락 표현 |
.small |
작은 글자(원 글자의 85%) |
.text-left |
왼쪽 정렬 |
.text-center |
가운데 정렬 |
.text-right |
오른쪽 정렬 |
.text-justify |
양쪽 맞춤 정렬 |
.text-nowrap |
줄바꿈 없음 |
.text-lowercase |
소문자(영문) |
.text-uppercase |
대문자(영문) |
.text-capitalize |
첫 글자만 대문자(영문) |
.initialism |
<abbr>요소 내부의 문자를 약간 작은 크기로 표시 |
.list-unstyled |
기본 목록스타일 및 왼쪽 여백 제거(ul, ol) |
.list-inline |
모든 목록 항목을 한 줄에 배치 |
.pre-scrollable |
<pre>요소에 스크롤 기능 추가 |
등록된 댓글이 없습니다.