차이

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

--- wiki:bootstrap:bootstrap_note:bs_typography [2021/03/24 09:33]
emblim98 만듦
+++ wiki:bootstrap:bootstrap_note:bs_typography [2023/01/13 18:44] (현재)
@@ 줄 8: / 줄 8: @@
 <WRAP clear></WRAP>
 \\
-=====Bootstrap Grid System=====
+=====Bootstrap's Default Settings=====
+부트스트랩의 전역 기본 글꼴 크기는 14px이고, 줄 높이는 1.428입니다.\\
+\\
+이것은 ''%%<body>%%'' 요소와 모든 단락 (''%%<p>%%'')에 적용됩니다.\\
+\\
+또한 모든 ''%%<p>%%'' 요소에는 계산된 선 높이의 절반 (기본적으로 10px)에 해당하는 아래쪽 여백(bottom margin)이 있습니다.\\
+\\
+=====Bootstrap vs. Browser Defaults=====
+Bootstrap이 브라우저 기본 값과 약간 다르게 스타일을 지정할 HTML 요소를 살펴 보겠습니다.\\
+\\
+====<h1> ~ <h6>====
+기본적으로 Bootstrap은 아래의 방식으로 HTML 제목 (''%%<h1>%%'' ~ ''%%<h6>%%'')의 스타일을 지정합니다.\\
+====예제====
+<HTML>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bootstrap heading</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+</head>
+<body>
+    <div class="container">
+        <h1>h1 Boostrap heading (36px)</h1>
+        <h2>h2 Boostrap heading (30px)</h2>
+        <h3>h3 Boostrap heading (24px)</h3>
+        <h4>h4 Boostrap heading (18px)</h4>
+        <h5>h5 Boostrap heading (14px)</h5>
+        <h6>h6 Boostrap heading (12px)</h6>
+    </div>
+</body>
+</html>
+</HTML>
+\\
+====<small>====
+Bootstrap에서, %%HTML%% ''%%<small>%%'' 요소는 모든 제목에 더 가벼운 보조 텍스트를 만드는데 사용됩니다.\\
+<HTML>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bootstrap heading</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+</head>
+<body>
+    <div class="container">
+        <h1>Lighter, Secondary Text</h1>
+        <p>The small element is used to create a lighter, secondary text in any heading:</p>
+        <h1>h1 heading <small>secondary text</small></h1>
+        <h2>h2 heading <small>secondary text</small></h2>
+        <h3>h3 heading <small>secondary text</small></h3>
+        <h4>h4 heading <small>secondary text</small></h4>
+        <h5>h5 heading <small>secondary text</small></h5>
+        <h6>h6 heading <small>secondary text</small></h6>
+    </div>
+</body>
+</html>
+</HTML>
+\\
+====<mark>====
+Bootstrap은 %%HTML%% ''<mark>'' 요소를 하기 방식으로 스타일을 지정합니다.\\
+<HTML>
+<body>
+    <div class="container">
+        <h1>Hightlight Text</h1>
+        <p>Use the mark element to <mark>hightlight</mark> text.</p>
+    </div>
+</body>
+</HTML>
+\\
+====<abbr>====
+Bootstrap은 %%HTML%% ''<abbr>'' 요소를 하기 방식으로 스타일을 지정합니다.\\
+<HTML>
+<body>
+    <div class="container">
+        <h1>Abbreviations</h1>
+        <p>The abbr element is used to mark up an abbreviation or acronym:</p>
+        <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
+    </div>
+</body>
+</HTML>
+\\
+====<blockquote>====
+Bootstrap은 %%HTML%% ''<blockquote>'' 요소를 하기 방식으로 스타일을 지정합니다.\\
+<HTML>
+<body>
+    <div class="container">
+        <h1>Blockquotes</h1>
+        <p>The blockquote element is used to present content from another source:</p>
+        <blockquote>
+            <p>
+                For 50 years, WWF has been protecting the future of nature.
+                The world's leading conservation organization,
+                WWF works in 100 countries and is supported by 1.2 million members
+                in the United States and close to 5 million globally.
+            </p>
+            <footer>From WWF's website</footer>
+        </blockquote>
+    </div>
+</body>
+</HTML>
+\\
+오른쪽에 인용문(the quote)을 표시하려면, ''%%.blockquote-reverse%%'' 클래스를 사용하세요.\\
+<HTML>
+    <div class="container">
+        <h1>Blockquotes</h1>
+        <p>To show the quote on the right, use <strong>the class .blockquote-reverse</strong>:</p>
+        <blockquote class="blockquote-reverse">
+            <p>
+                For 50 years, WWF has been protecting the future of nature.
+                The world's leading conservation organization,
+                WWF works in 100 countries and is supported by 1.2 million members
+                in the United States and close to 5 million globally.
+            </p>
+            <footer>From WWF's website</footer>
+        </blockquote>
+    </div>
+</HTML>
+\\
+====<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>
+\\
+====<code>====
+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

사용자 도구

사이트 도구

차이

문서 도구