VSCode_부트스트랩. 타이포그래피 1

부트스트랩의 타이포그래피는 글꼴이라고 생각하시면 됩니다.

h1부터 h6까지 사용 가능합니다.

		<h1>
			Bootstrap 부트스트랩 h1 <small>h1 small</small>
		</h1>
		<h2>
			Bootstrap 부트스트랩 h2 <small>h2 small</small>
		</h2>
		<h3>
			Bootstrap 부트스트랩 h4 <small>h4 small</small>
		</h3>
		<h4>
			Bootstrap 부트스트랩 h4 <small>h4 small</small>
		</h4>
		<h5>
			Bootstrap 부트스트랩 h5 <small>h5 small</small>
		</h5>
		<h6>
			Bootstrap 부트스트랩 h6 <small>h6 small</small>
		</h6>

small은 원하는 텍스트를 한 단계 정도 더 작고 얇게 표현해줍니다.

small태그를 작성한 후 그 사이에 텍스트를 적용하면 됩니다.

반대로 strong은 원하는 텍스트를 더욱 강조하는데 사용됩니다.

<h4 class="text-primary">2. 본문의 글씨체의 크기는 14px로 고정되어 있습니다.</h4>
		
 <p>Lorem ipsum dolor sit amet, consectetur 
 adipiscing elit. Mauris rutrum vitae lectus 
sit amet tincidunt. Aliquam id fringilla sapien.
Mauris eu nulla at nunc mollis pharetra.</p>

<p>
부트스트랩의 기본글꼴은 <small>Helvetica Neue</small> 라는

아주 미려한 글꼴을 기반으로

Helvetica Neue 라는 글꼴이 없으면,
Helvetica, Helvetica 도 없으면, Arial을 사용하고

sans-serif 계열의 글꼴을 사용하게 설정되어 있습니다. 또한 전체적인 글꼴의 크기는 14픽셀로 고정되어 있으며,

전체의 행간은 1.42857443로 설정되어 있으며,
글꼴 색은 진한 회색이고, 배경색상은 흰색으로 되어 있습니다.
</p>

em 태그는 이탤릭 체로 텍스트를 변경해줍니다.

		<h4 class="text-primary">3. small, strong, em 태그는 의 사용법과 .lead
			선택자 사용</h4>
		<p>
			<small>small태그</small>는 작은 글씨를 <strong>strong은 문장을 강조</strong>할 때, <em>em
				태그는 이탤릭체</em>로 표시하게 해 줍니다.
		</p>

또 lead 선택자를 사용하여 문단의 첫 문장을 강조할 수 있습니다.

		<p>
			<span class="lead">리드 선택자를 이용하여 </span> 단락의 첫 문장을 강조할 수 있습니다.
		</p>

text-left, text-center, text-right는 모두 문장의 정렬을 구분해줍니다.

		<h4 class="text-primary">4. 문장의 정렬은 text-left, text-center,
			text-right 를 사용합니다.</h4>
		<p class="text-left">문장 정렬 왼쪽은 text-left 클래스 선택자를 이용합니다. 왼쪽은 기본이기
			때문에 다른 문장이 가운데 정렬이거나, 오른쪽 정렬일 때 왼쪽으로 정렬하고 싶을 경우 사용합니다.</p>
		<p class="text-center">문장 정렬 가운데는 text-center 클래스 선택자를 이용합니다.</p>
		<p class="text-right">문장 정렬 오른쪽은 text-right클래스 선택자를 이용합니다.</p>

primary, muted, success등의 태그로 텍스트의 색을 조정할 수 있습니다.

		<h4 class="text-primary">5. 부트스트랩은 다양한 강조 클래스를 사용합니다.</h4>
		<p class="text-muted">class="text-muted"</p>
		<p class="text-primary">class="text-primary"</p>
		<p class="text-success">class="text-success"</p>
		<p class="text-info">class="text-info"</p>
		<p class="text-warning">class="text-warning"</p>
		<p class="text-danger">class="text-danger"</p>
		<p>강조 텍스트의 색 또한 사용자에 의해서 변환가능합니다.</p>

abbr을 이용해 약어를 사용할 수 있습니다.

		<h4 class="text-primary">6.약어를 사용할 수 있습니다.</h4>
		<p>
			약어를 사용하면 <abbr title="나는바보입니다">나바보</abbr> 과 같은 약어를 표현해 줄 수 있습니다. 또한 <abbr
				title="United Nation" class="initialism">un </abbr> 이나, <abbr
				title="Cascading style sheet" class="initialism">css</abbr>와 같은 영문
			약어는 class="initialism" 를 사용하게 되면 단어가 소문자인 경우에도 영문 대문자로 변환되면서 글씨 크기는
			90%정도로 변환해 주게 됩니다.
		</p>