부트스트랩 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.last@example.com</a>

</address>

 

13. 인용구 : 문서안에 다른 출처로부터 인용한 콘텐츠 블록을 위해 사용 할 수 있습니다.

예제 : http://boot.apachezone.com/boot_Typography_blockquote.php

ㄱ. 기본 인용구

<blockquote>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

</blockquote>

ㄴ. 출처표기

<blockquote>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

<footer>Someone famous in <cite title=”Source Title”>Source Title</cite></footer>

</blockquote>

ㄷ. 다른표시 : 클래스를 사용하여 블록을 설정 할 수 도 있습니다.

<blockquote class=”blockquote-reverse”>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

<footer>Someone famous in <cite title=”Source Title”>Source Title</cite></footer>

</blockquote>

타이포그래피의 여러가지 태그 기능에 대해서 알아 보았습니다. 도움이 되셨는지 모르겠네요…^^

다음시간에는 부트스트랩 Typography(타이포그래피) 중에서 태그중에서 목록,인라인,변수출력,샘플출력,등에 대해서 알아보도록 하겠습니다.

 

참고 사이트 : http://www.w3schools.com/bootstrap

nanoomi / 2015년 7월 2일 / 미분류

답글 남기기

Your email address will not be published / Required fields are marked *