차이

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

--- wiki:bootstrap:bootstrap_note:bs_typography [2021/03/24 10:31]
emblim98
+++ wiki:bootstrap:bootstrap_note:bs_typography [2023/01/13 18:44] (현재)
@@ 줄 147: / 줄 147: @@
 ====<dl>====
 Bootstrap은 %%HTML%% ''<dl>'' 요소를 하기 방식으로 스타일을 지정합니다.\\
+dl = description list\\
 <HTML>
+<body>
+    <div class="container">
+        <h1>Description Lists</h1>
+        <p>The dl element indicates a description list:</p>
+        <dl>
+            <dt>Coffee</dt>
+            <dd>- black hot drink</dd>
+            <dt>Milk</dt>
+            <dd>- white cold drink</dd>
+        </dl>
+    </div>
+</body>
 </HTML>
 \\
@@ 줄 154: / 줄 168: @@
 Bootstrap은 %%HTML%% ''<code>'' 요소를 하기 방식으로 스타일을 지정합니다.\\
 <HTML>
+<body>
+    <div class="container">
+        <h1>Code Snippets</h1>
+        <p>Inline snippets of code should be embedded in the code element:</p>
+        <p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.</p>
+    </div>
+</body>
 </HTML>
 \\
 ====<kbd>====
 Bootstrap은 %%HTML%% ''<kbd>'' 요소를 하기 방식으로 스타일을 지정합니다.\\
+kbd = KeyBoarD\\
 <HTML>
+<body>
+    <div class="container">
+        <h1>Keyboard Inputs</h1>
+        <p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
+        <P>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</P>
+    </div>
+</body>
 </HTML>
 \\
 ====<pre>====
 Bootstrap은 %%HTML%% ''<pre>'' 요소를 하기 방식으로 스타일을 지정합니다.\\
+''%%<pre>%%'' 요소 내부는 텍스트와 코드가 고정 폭의 폰트로 표시되고, 화면 폭과 상관없이 공간과 줄바꿈을 유지합니다.\\
 <HTML>
+<body>
+    <div class="container">
+        <h1>Multiple Code Lines</h1>
+        <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>
+    </div>
+</body>
 </HTML>
 \\
 ====contextual Colors and Backgrounds=====
+부트스트랩에는 "색상을 통한 의미"를 제공하는 데 사용할 수 있는 컨텍스트 클래스(contextual classes)도 있습니다.\\
+**contextual : (문장의) 전후 관계의, 문맥상의, 맥락[전후 사정]과 관련된\\
+\\
+텍스트 색상의 클래스는 아래와 같습니다.\\
+''text-muted'', ''text-primary'', ''text-success'', ''text-info'', ''text-warning'', 그리고 ''text-danger'':\\
+====예제====
+<HTML>
+<body>
+    <div class="container">
+        <h2>Contextual Colors</h2>
+        <p>Use the Contextual classes to provide "meaning through colors"</p>
+        <p class="text-muted">This text is muted.</p>
+        <p class="text-primary">This text is important.</p>
+        <p class="text-success">This text indicates success.</p>
+        <p class="text-info">This text represents some information.</p>
+        <p class="text-warning">This text represents a warning</p>
+        <p class="text-danger">This text represents danger.</p>
+    </div>
+</body>
+</HTML>
+\\
+배경색을 위한 클래스는 아래와 같습니다:\\
+''.bg-primary'', ''bg-success'', ''bg-info'', ''bg-warning'', 그리고 ''bg-danger'':\\
+====예제====
+<HTML>
+<body>
+    <div class="contatiner">
+        <h2>Contextual Background Colors</h2>
+        <p>Use the contextual background classes to provide "meaning through colors":</p>
+        <p class="bg-primary">This text is important.</p>
+        <p class="bg-success">This text indicates success.</p>
+        <p class="bg-info">This text represents some infomation.</p>
+        <p class="bg-warning">This text represents a warning.</p>
+        <p class="bg-danger">This text represents danger.</p>
+    </div>
+</body>
+</HTML>
+\\
+====More Typography Classes====
+아래의 Bootstrap 클래스를 추가하여 %%HTML%% 요소의 스타일을 추가로 지정할 수 있습니다.\\
+| Class                 | Description     |
+^ ''.lead''             ^ 단락을 돋보이게 만듭니다.                                                                                                                           ^
+| ''.small''            | 더 작은 텍스트를 나타냅니다 (부모 요소 크기의 85 %로 설정됨).
+^ ''.text-left''        ^ 좌측 정렬 텍스트를 나타냅니다.                                                                                                                        ^
+| ''.text-center''      | 중앙 정렬 텍스트를 나타냅니다.                                                                                                                        |
+^ ''.text-right''       ^ 우측 정렬 텍스트를 나타냅니다.                                                                                                                        ^
+| ''.text-justify''     | 양쪽 정렬 텍스트를 나타냅니다.                                                                                                                        |
+^ ''.text-nowrap''      ^ 줄바꿈 없는 텍스트를 나타냅니다.                                                                                                                       ^
+| ''.text-lowercase''   | 모든 철자를 소문자로 나타냅니다                                                                                                                        |
+^ ''.text-uppercase''   ^ 모든 철자를 대문자로 나타냅니다.                                                                                                                       ^
+| ''.text-capitalize''  | 텍스트의 각각의 단어 첫글자를 대문자로 나타냅니다.                                                                                                             |
+^ ''.initialism''       ^ 약간 더 작은 글꼴 크기로 <abbr> 요소 내부의 텍스트를 표시합니다.                                                                                                 ^
+| ''.list-unstyled''    | 목록 항목의 기본 목록 스타일과 왼쪽 여백을 제거합니다 (''<ul>'' 및 ''<ol>'' 모두에서 작동). 이 클래스는 자식 목록 항목에만 적용됩니다 (중첩된 목록에서 기본 목록 스타일을 제거하려면 이 클래스를 모든 중첩된 목록에도 적용)  |
+^ ''.list-inline''      ^ 모든 목록 항목을 한 줄에 배치합니다.                                                                                                                    ^
+| ''.dl-horizontal''    | <dl> 요소의 용어 (''<dt>'')와 설명 (''<dd>'')을 나란히 정렬합니다. 기본 ''<dl>''처럼 시작하지만 브라우저 창이 확장되면 나란히 정렬됩니다.  |
+^ ''.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>
 {{tag>오션 Bootstrap Text/Typography}}

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

사용자 도구

사이트 도구

차이

문서 도구