차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:bootstrap:bootstrap_note:bs_typography [2021/03/24 14:13]
emblim98
+++ wiki:bootstrap:bootstrap_note:bs_typography [2023/01/13 18:44] (현재)
@@ 줄 271: / 줄 271: @@
 ^ ''.list-inline''      ^ 모든 목록 항목을 한 줄에 배치합니다.                                                                                                                    ^
 | ''.dl-horizontal''    | <dl> 요소의 용어 (''<dt>'')와 설명 (''<dd>'')을 나란히 정렬합니다. 기본 ''<dl>''처럼 시작하지만 브라우저 창이 확장되면 나란히 정렬됩니다.  |
-^ ''.pre-scrollable''   ^ <pre> 요소를 스크롤 가능하게 만듭니다.                                                                                                                 ^
+^ ''.pre-scrollable''   ^ <pre> 요소를 스크롤 가능하게 만듭니다. y축 방향으로 스크롤 바 생성됩니다.                                                                                                                  ^
+\\
+====예제====
+<HTML>
+<body>
+    <div class="container">
+        <h2>Typography</h2>
+        <p>Use the <strong>.lead class</strong> to make a paragraph "stand out":</p>
+        <p class="lead">This paragraph stands out.</p>
+        <p>This paragraph is regular.</p>
+        <br>
+        <p>=========================================================================</p>
+        <p>Use the <strong>.small class</strong> to make the text smaller:</p>
+        <p class="small">This paragraph smaller.</p>
+        <p>This paragraph is regular.</p>
+        <br>
+        <p>=========================================================================</p>
+        <p class="text-left">left-aligned text.</p>
+        <p class="text-right">right-aligned text.</p>
+        <p class="text-center">center-aligned text.</p>
+        <p class="text-justify">Justified text. Justified text. Justified text. Justified text. Justified text. Justified text.</p>
+        <br>
+        <p>=========================================================================</p>
+        <p class="text-nowrap">No wrap text. No wrap text. No wrap text. No wrap text. No wrap text. No wrap text.</p>
+        <p><strong>Tip:</strong>Try to resize the browser window to see the behavior of justify and nowrap.</p>
+        <p>=========================================================================</p>
+        <p class="text-lowercase">LoWercAsed text</p>
+        <p class="text-uppercase"></p>Uppercased text</p>
+        <p class="text-capitalize">capitlized text</p>
+        <p>=========================================================================</p>
+        <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948. (normal abbr)</p>
+        <p>The <abbr title="World Health Organization" class="initialism">WHO</abbr> was founded in 1948. (slightly smaller abbr)</p>
+        <p>=========================================================================</p>
+        <p>The <strong>.list-unstyled</strong> removes the default list-style and left wmargin on list items (immediate children only):</p>
+        <ul class="list-unstyled">
+            <li>Coffee</li>
+            <li>Tea
+                <ul>
+                    <li>Black tea</li>
+                    <li>Green tea</li>
+                </ul>
+            </li>
+            <li>Milk</li>
+        </ul>
+        <p>=========================================================================</p>
+        <p>The class <strong>.list-inline</strong> places all list items on a single line:</p>
+        <ul class="list-inline">
+            <li>Espresso</li>
+            <li>Dolce Latte</li>
+            <li>Cold Brew</li>
+        </ul>
+        <p>=========================================================================</p>
+        <p>Use the <strong>.dl-horizontal class</strong> line up the description list side-by-side when the browser window expands:</p>
+        <dl class="dl-horizontal">
+            <dt>Coffee</dt>
+            <dd>black hot drink</dd>
+            <dt>Milk</dt>
+            <dd>White Cold Drink</dd>
+        </dl>
+        <p>=========================================================================</p>
+        <p>For multiple lines of code, use the pre element:</p>
+        <pre>Text in a pre element
+          is displayed in a fixed-width
+          font, and it preserves
+          both      spaces and
+          line breaks.</pre>
+        <p>If you add the .pre-scrollable class, the pre element gets a max-height of 350px and provides a y-axis scrollbar:</p>
+        <pre class="pre-scrollable">Text in a pre element
+          is displayed in a fixed-width
+          font, and it preserves
+          both      spaces and
+          line breaks.</pre>
+    </div>
+</body>
+</HTML>

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구