부트스트랩 Typography(타이포그래피) 이해하기....2 정보
부트스트랩 Typography(타이포그래피) 이해하기....2
본문
이번 시간에는 부트스트랩 Typography(타이포그래피) 중에서 텍스트 요소에 대해서 알아 보도록 하겠습니다.
우선 표시될수있는 텍스트 요소에는 강조,삭제.취소,삽입,밑줄,작은글,두꺼운글,이탤릭,정렬,변형,등....
여러가지 옵션을 가지고 있습니다.
대체 요소로는 <b> 와 <i> 가 있으며, <b> 는 추가적인 중요성의 없이 단어나 구를 강조한다는데 의미가 있고, <i> 는 거의 음성이나 기술적 용어 등에 쓰입니다. 그리고 HTML5 에서 <b> 와 <i> 는 마음대로 사용해도 됩니다.
그럼 예제를 통해서 텍스트요소에 관련된 태그를 사용하면 어떤 변화가 있는지 알아 보겠습니다.
1. 강조할 텍스트
예제 : http://boot.apachezone.com/boot_Typography_mark.php
당신은 <mark>강조할</mark> 텍스트에 mark 태그를 사용할 수 있습니다.
2. 삭제된 텍스트
예제 : http://boot.apachezone.com/boot_Typography_del.php
<del>이 텍스트줄은 삭제된 텍스트로 다뤄짐을 의미합니다.</del>
3. 취소선 텍스트
예제 : http://boot.apachezone.com/boot_Typography_s.php
<s>이 텍스트줄은 더 이상 정확하지 않다고 다뤄짐을 의미합니다.</s>
4. 삽입된 텍스트
예제 : http://boot.apachezone.com/boot_Typography_ins.php
<ins>이 텍스트줄은 문서에 추가분으로 다뤄짐을 의미합니다.</ins>
5. 밑줄친 텍스트
예제 : http://boot.apachezone.com/boot_Typography_u.php
<u>이 텍스트줄은 밑줄이 그어질 것입니다</u>
6. 작은 텍스트
예제 : http://boot.apachezone.com/boot_Typography_small.php
<small>이 텍스트는 작게 보이도록 되어 있습니다.</small>
7. 두껍운 텍스트
예제 : http://boot.apachezone.com/boot_Typography_strong.php
<strong>두꺼운 텍스트로 렌더링 됩니다</strong>
8. 이탤릭체 텍스트
예제 : http://boot.apachezone.com/boot_Typography_em.php
<em>이탤릭체로 렌더링 됩니다</em>
9. 정렬 클래스: 콤포넌트의 텍스트를 손쉽게 재정렬 할 수 있습니다.
예제 : http://boot.apachezone.com/boot_Typography_sort.php
<p class="text-left">좌측정렬된 텍스트.</p>
<p class="text-center">중앙정렬된 텍스트.</p>
<p class="text-right">우측정렬된 텍스트.</p>
<p class="text-justify">양쪽정렬된 텍스트.</p>
<p class="text-nowrap">그냥 텍스트.</p>
10. 변형 클래스 : 콤포넌트의 텍스트를 대소문자 클래스로 변형시킵니다. 아쉽지만 한글은 해당사항이 없습니다...ㅠㅠ
예제 : http://boot.apachezone.com/boot_Typography_Strain.php
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
11. 약어 :
<abbr> 는 약어나 두문자어를 마우스를 올렸을 때 원래 텍스트를 보여주기 위한 요소입니다.
title 속성이 있는 약어는 점으로된 밑줄을 가지고 있고 마우스를 올렸을때 물음표 커서가 보여지며, 원래 텍스트를 보여줍니다.
예제 : http://boot.apachezone.com/boot_Typography_abbr.php
ㄱ. 기본 약어
<abbr title="attribute">attr</abbr>
ㄴ. 두문자어 : 미세하게 작은(90%) 폰트크기를 가지려면 .initialism 을 추가하세요.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
12. 주소(address) : 주소나 이메일 등의 연락처를 보여줍니다. <br> 로 개행합니다.
예제 : http://boot.apachezone.com/boot_Typography_address.php
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.http://www.w3schools.com/bootstrap
3
댓글 2개
