부트스트랩 Typography(타이포그래피) 이해하기....3 정보
부트스트랩 Typography(타이포그래피) 이해하기....3
본문
이번 시간에는 부트스트랩 Typography(타이포그래피) 태그중에서 목록,인라인,변수출력,샘플출력,등에 대해서 알아보도록 하겠습니다.
우선 목록을 나타내는 태그에는 순서없는 목록, 순서가 있는 목록, 스타일이 없는 목록, 인라인 목록, 연관 설명이 있는목록, 수평으로 설명을 늘어논 목록 이 있습니다.
수평 설명 목록은 열 길이보다 너무 긴 용어를 text-overflow 로 줄일 것이며, 좁은 너비에서는 자동으로 개행되는 모양이 바뀌도록 되어 있습니다.
1. 순서가 명확치 않은 항목들의 목록입니다
예제 : http://boot.apachezone.com/boot_Typography_bs.php
<div class="bs-example" data-example-id="simple-ul">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
</div>
2. 순서가 명확한 항목들의 목록입니다.
예제 : http://boot.apachezone.com/boot_Typography_bs2.php
<div class="bs-example" data-example-id="simple-ol">
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>
</div>
3. 스타일이 없는 항목들의 목록입니다.
항목에서 list-style 과 좌측 마진을 제거하세요. (직접 자식만 ) 이것은 오직 바로 아래 항목들에게만 적용됩니다. 그래서 당신은 중첩된 목록에도 따로 클래스를 추가하여야 합니다.
예제 : http://boot.apachezone.com/boot_Typography_bs3.php
<div class="bs-example" data-example-id="unstyled-list">
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
</div>
4. 인라인 항목들의 목록입니다. display: inline-block; 로 항목들을 한줄에 보여주고 약간의 패딩을 줍니다.
예제 : http://boot.apachezone.com/boot_Typography_bs4.php
<div class="bs-example" data-example-id="list-inline">
<ul class="list-inline">
<li>Lorem ipsum</li>
<li>Phasellus iaculis</li>
<li>Nulla volutpat</li>
</ul>
</div>
5. 연관된 설명들의 목록입니다.
예제 : http://boot.apachezone.com/boot_Typography_bs5.php
<div class="bs-example" data-example-id="simple-dl">
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
</div>
6. 수평으로 설명을 늘어논 목록입니다.
<dl> 내 용어들과 설명들을 나란히 놓습니다. 기본 <dl> 처럼 쌓이는 것부터 시작이지만, 네비게이션 바가 펼쳐지는 때와 같은 타이밍에 다음과 같이 됩니다.
예제 : http://boot.apachezone.com/boot_Typography_bs6.php
<div class="bs-example" data-example-id="horizontal-dl">
<dl class="dl-horizontal">
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Felis euismod semper eget lacinia</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>
</div>
7. 인라인 <code>...</code> 태그를 사용하여 짧은 코드를 감싸세요.
예제 : http://boot.apachezone.com/boot_Typography_bs7.php
<div class="bs-example" data-example-id="inline-code">
For example, <code><section></code> should be wrapped as inline.
</div>
8. 키보드로 들어가는 사용자 입력을 나타내기 위해 <kbd> 를 사용하세요.
예제 : http://boot.apachezone.com/boot_Typography_bs8.php
<div class="bs-example" data-example-id="simple-kbd">
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
</div>
9. 기본블럭 여러행의 코드를 위해 <pre> 를 사용하세요. 적절한 렌더링을 위해 어떤 꺽쇠 괄호는 부호화를 해야합니다. 선택적으로 .pre-scrollable 클래스를 추가할 수도 있습니다. 최대 높이를 350px 로 설정하고 y축 스크롤바를 제공합니다.
예제 : http://boot.apachezone.com/boot_Typography_bs9.php
<div class="bs-example" data-example-id="simple-pre">
<pre><p>Sample text here...</p></pre>
</div>
10. 변수들을 나타내기 위해서 <var> 태그를 사용하세요.
예제 : http://boot.apachezone.com/boot_Typography_bs10.php
<div class="bs-example" data-example-id="simple-var">
<p><var>y</var> = <var>m</var><var>x</var> + <var>b</var></p>
</div>
11. 프로그램으로부터의 샘플 출력을 나타내기 위해서 <samp> 태그를 사용하세요.
예제 : http://boot.apachezone.com/boot_Typography_bs11.php
<div class="bs-example" data-example-id="simple-samp">
<p><samp>This text is meant to be treated as sample output from a computer program.</samp></p>
</div>
이렇게해서 부트스트랩 Typography(타이포그래피)중 자주사용하는 태그에 대해서 알아 보았습니다.
보통은 디자인을 하시는분들이 많이 사용하는 태그들이며 단순히 말하자면 글자를 다루는 일이라고도 할 수 있습니다.
사실 저도 부트스트랩을 공부하면서 알게된 지식이며,
깊이있게 알지못하며 겉핧기식 공부라 서투른 강좌를 이해해 주시면 감사 하겠습니다.
다음 시간에는 부트스트랩 사용에 있어서 테이블 및 클래스 사용에 대해서 살펴 보도록 하겠습니다.
감사합니다.
참고 사이트 : http://www.w3schools.com/bootstrap
2
댓글 0개