Toggle theme
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12
사용자 도구
Toggle theme
로그인
사이트 도구
검색
도구
문서 보기
이전 판
PDF로 내보내기
Fold/unfold all
역링크
최근 바뀜
미디어 관리자
사이트맵
로그인
>
최근 바뀜
미디어 관리자
사이트맵
현재 위치:
start
»
wiki
»
bootstrap
»
bootstrap_note
»
bs_typography
wiki:bootstrap:bootstrap_note:bs_typography
이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======Bootstrap Text/Typography====== <WRAP left notice 80%> * description : Bootstrap Text/Typography * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-24 </WRAP> <WRAP clear></WRAP> \\ =====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}}
/volume1/web/dokuwiki/data/pages/wiki/bootstrap/bootstrap_note/bs_typography.txt
· 마지막으로 수정됨: 2023/01/13 18:44 (바깥 편집)
문서 도구
문서 보기
이전 판
역링크
PDF로 내보내기
Fold/unfold all
맨 위로