부트스트랩 - 타이포그래피

미래의 웹 개발자 여러분 환영합니다! 오늘 우리는 부트스트랩 타이포그래피의 fascinante 세상으로 뛰어들어보겠습니다. 여러분의 친절한 이웃 컴퓨터 교사로서, 저는 많은 예제들과 설명들, 그리고 아빠JOKE 한두 개로 여러분을 안내해 드리겠습니다. 그麼, 시작해보겠습니다!

부트스트랩 기본 / 전역 설정

부트스트랩은 여러분의 텍스트를 한 번에 멋지게 보이게 해주는 기본 타이포그래피 설정을 포함하고 있습니다. 여러분의 웹사이트에 개인 스타일리스트를 두는 것과 같습니다!

부트스트랩이 텍스트를 스타일링하는 기본 예제를 보여드리겠습니다:

<p>이 텍스트는 부트스트랩으로 스타일링된 문단입니다.</p>

여러분은 "이거 regular text하고 똑같아!"라고 생각할 수도 있습니다. 맞습니다! 하지만 부트스트랩은 몇 가지 미묘한 개선을 했습니다. 기본 폰트 가족(보통 sans-serif 폰트), 편안한 폰트 크기, 그리고 마음에 드는 라인 하이eight를 설정했습니다. 이런 작은 것들이 부트스트랩의 강력함을 만듭니다.

제목

부트스트랩의 제목은 여러분의 favorite cafe에서 다른 크기의 커피처럼 - h1에서 h6까지 여섯 가지 맛이 있습니다.

<h1>이것은 제목 1입니다</h1>
<h2>이것은 제목 2입니다</h2>
<h3>이것은 제목 3입니다</h3>
<h4>이것은 제목 4입니다</h4>
<h5>이것은 제목 5입니다</h5>
<h6>이것은 제목 6입니다</h6>

각 제목은 자신만의 크기와 무게를 가지고 있어 여러분의 콘텐츠에 명확한 계층 구조를 만듭니다. 가구를 정리하는 것과 같은 것입니다 - 모든 것이 자리를 찾습니다!

제목 커스터마이징

하지만 제목 태그를 실제로 사용하지 않고 제목 스타일을 사용하고 싶다면 어떻게 하나요? 부트스트랩은 .h1에서 .h6 클래스를 제공합니다.

<p class="h1">이 문단은 제목 1처럼 보입니다</p>
<span class="h3">이 span은 제목 3처럼 보입니다</span>

이것은 제목의 외관을 원하는 곳에 사용할 수 있는 것이 좋습니다. 턱시도 티셔츠를 입는 것처럼 - 정식이지만 너무 정식이지 않습니다.

디스플레이 제목

일반 제목이 충분하지 않을 때, 부트스트랩은 "디스플레이" 제목을 제공합니다. 이들은 supermodels처럼 - 커다란, 두꺼운, 그리고 주목할 만한 것입니다.

<h1 class="display-1">디스플레이 1</h1>
<h1 class="display-2">디스플레이 2</h1>
<h1 class="display-3">디스플레이 3</h1>
<h1 class="display-4">디스플레이 4</h1>

이 디스플레이 제목은 큰 선언을 해야 할 때 완벽합니다. 하지만 지나치게 많이 사용하면 페이지가 소리치기 시작할 수 있습니다!

리드

.lead 클래스는 부트스트랩이 문단을 돋보이게 만드는 방법입니다. 텍스트에 마이크를 건다면 마찬가지입니다.

<p class="lead">이것은 리드 문단입니다. 일반 문단과 차별화됩니다.</p>

이를 도입문이나 강조하고 싶은 중요 정보에 사용합니다.

약자

부트스트랩은 약자와 약자를 점선 밑줄로 스타일링합니다. 독자들에게 비밀 디코더 링을 주는 것과 같습니다!

<p>세계보건기구(<abbr title="World Health Organization">WHO</abbr>)는 1948년에 설립되었습니다.</p>

약자에 마우스를 올리면 전체 용어가 나타납니다.

인용구

부트스트랩의 인용구는 나머지 텍스트에서 돋보이게 스타일링됩니다. 문단 세계의 cool kids와 같습니다.

<blockquote class="blockquote">
<p>두 가지가 무한하다: 우주와 인간의 어리석음; 그리고 우주에 대해 확신이 없다.</p>
</blockquote>

출처 지정

인용구에 출처를 추가하려면 <footer> 태그와 blockquote-footer 클래스를 사용합니다.

<blockquote class="blockquote">
<p>두 가지가 무한하다: 우주와 인간의 어리석음; 그리고 우주에 대해 확신이 없다.</p>
<footer class="blockquote-footer">알버트 아인슈타인</footer>
</blockquote>

이는 출처를 스타일 있게 인정하는 것입니다!

정렬

부트스트랩은 텍스트를 쉽게 정렬할 수 있는 클래스를 제공합니다. 텍스트를 춤추게 가르치는 것과 같습니다 - 왼쪽, 중간, 오른쪽!

<p class="text-left">왼쪽 정렬된 텍스트.</p>
<p class="text-center">중간 정렬된 텍스트.</p>
<p class="text-right">오른쪽 정렬된 텍스트.</p>

인라인 텍스트 요소

부트스트랩은 다양한 인라인 텍스트 요소에 대한 스타일을 제공합니다. 텍스트의 스위스 아ーノ이 Knife와 같습니다!

다음은 일반적으로 사용되는 인라인 텍스트 요소의 표입니다:

요소	설명
<mark>	강조된 텍스트
<del>	지워진 텍스트
<s>	취소선 텍스트
<ins>	삽입된 텍스트
<u>	밑줄 텍스트
<small>	작은 텍스트
<strong>	진하게 텍스트
<em>	기울인 텍스트

예제:

<p>이 요소들을 사용하여 텍스트를 <mark>강조</mark>, <del>지우</del>, <s>취소선을 치</s>, <ins>삽입</ins>, <u>밑줄을 치</u>, <small>작게 만들</small>, <strong>진하게 만들</strong>, 또는 <em>기울인</em> 텍스트로 만들 수 있습니다.</p>

목록

부트스트랩은 목록을 시각적으로 더 매력적으로 만들기 위해 스타일링합니다. 목록에 마이크를 건다면 마찬가지입니다!

<ul>
<li> 비정렬 목록 항목 1</li>
<li> 비정렬 목록 항목 2</li>
</ul>

<ol>
<li> 정렬 목록 항목 1</li>
<li> 정렬 목록 항목 2</li>
</ol>

설명 목록 정렬

부트스트랩은 설명 목록의 용어와 설명을 정렬할 수 있도록 합니다. 사전을 정리하는 것처럼 cool하지만 더 멋집니다!

<dl class="row">
<dt class="col-sm-3">coffee</dt>
<dd class="col-sm-9">검은 따뜻한 음료</dd>

<dt class="col-sm-3">milk</dt>
<dd class="col-sm-9">하얀 차가운 음료</dd>
</dl>

이렇게 하면 설명 목록에 두 열 레이아웃을 만듭니다.

응답형 폰트 크기

부트스트랩 4는 응답형 폰트 크기를 도입했습니다. 텍스트가 요가를 하는 것처럼 - 다양한 화면 크기에 맞춰 유연하게 조정됩니다!

응답형 폰트 크기를 활성화하려면 다음 라인을 CSS에 추가하세요:

html {
font-size: 1rem;
}

그런 다음, 요소에 .font-size-responsive 클래스를 추가합니다:

<p class="font-size-responsive">이 텍스트는 다양한 기기에서 크기를 조정합니다.</p>

그리고 여러분! 부트스트랩 타이포그래피에 대한 종합 가이드입니다. 타이포그래피는 콘텐츠의 목소리입니다 - 잘 부를 수 있기를 바랍니다! 행복한 코딩을 기원하며, 여러분의 웹사이트가 항상 멋지게 보이기를 바랍니다!

Credits: Image by storyset