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>
Author And Source
이 문제에 관하여(VSCode_부트스트랩. 타이포그래피 1), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@nugoory20/VSCode부트스트랩.-타이포그래피-1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)