이윰
타이포그래피
본 페이지의 테마코드 활용법은 2022년 01월 이후 선보인 이윰빌더 시즌4 부트스트랩5 기반의 테마코드 활용법입니다.
이전 이윰빌더 시즌4 부트스트랩3 기반의 테마코드 활용법은 아래 링크를 참조하여 주시기 바랍니다.
https://eyoom.net/page/eb4_code
Typography
제목
모든 HTML 제목인, <h1> 부터 <h6> 까지 사용가능합니다. 당신의 텍스트를 인라인으로 표시되면서 스타일만 제목 스타일로 맞추기 위해 .h1 부터 .h6 클래스 또한 사용 가능합니다.
[ 예제 ]
| Heading | Example |
|---|---|
<h1></h1> |
h1. Heading 1 |
<h2></h2> |
h2. Heading 2 |
<h3></h3> |
h3. Heading 3 |
<h4></h4> |
h4. Heading 4 |
<h5></h5> |
h5. Heading 5 |
<h6></h6> |
h6. Heading 6 |
| Class | Example |
|---|---|
<p class="h1"></p> |
h1. Heading 1 |
<p class="h2"></p> |
h2. Heading 2 |
<p class="h3"></p> |
h3. Heading 3 |
<p class="h4"></p> |
h4. Heading 4 |
<p class="h5"></p> |
h5. Heading 5 |
<p class="h6"></p> |
h6. Heading 6 |
리드 문단
.lead 을 추가하여 문장을 눈에 띄도록 만드세요.
[ 예제 ]
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
표시된 텍스트
또다른 맥락에서 관련있는 텍스트들을 찾아내어 강조하기 위해, <mark> 태그를 사용하세요.
[ 예제 ]
당신은 강조할 텍스트에 mark 태그를 사용할 수 있습니다.
삭제된 텍스트
텍스트 블록이 삭제 되었음을 나타내기 위해서는 <del> 태그를 사용하세요.
[ 예제 ]
취소선 텍스트
텍스트 블록이 더 이상상 연관이 없음을 나타내기 위해서 <s> 태그를 사용하세요.
[ 예제 ]
삽입된 텍스트
문서에 추가됨을 나타내기 위해서 <ins> 태그를 사용하세요.
[ 예제 ]
밑줄친 텍스트
텍스트에 밑출을 치려면 <u> 태그를 사용하세요.
[ 예제 ]
작은 텍스트
텍스트 인라인이나 블록을 덜 강조하기 위해, 부모 태그보다 85% 의 크기로 보여지게 하는 <small> 태그를 사용하세요. 제목 요소는 내포된 <small> 요소를 위한 그들만의 font-size 를 가지고 있습니다.
당신은 <small> 대신 인라인 요소에 .small 을 사용할 수 있습니다.
[ 예제 ]
두껍게
폰트 두께를 두껍게 하여 텍스트를 강조합니다.
[ 예제 ]
다음의 텍스트는 두꺼운 텍스트로 렌더링 됩니다.
이탤릭
이탤릭으로 텍스트를 강조합니다.
[ 예제 ]
다음의 텍스트는 이탤릭체로 렌더링 됩니다.
정렬 클래스
정렬 클래스로 콤포넌트의 텍스트를 손쉽게 재정렬하세요.
[ 예제 ]
좌측정렬된 텍스트.
중앙정렬된 텍스트.
우측정렬된 텍스트.
변형 클래스
콤포넌트의 텍스트를 대소문자 클래스로 변형시킵니다. (한글은 해당사항이 없습니다.)
[ 예제 ]
Lowercased text.
Uppercased text.
Capitalized text.
약어
<abbr> 는 약어나 두문자어를 마우스를 올렸을 때 원래 텍스트를 보여주기 위한 요소입니다. title 속성이 있는 약어는 점으로된 밑줄을 가지고 있고 마우스를 올렸을때 물음표 커서가 보여지며, 원래 텍스트를 보여줍니다.
[ 예제 ]
An abbreviation of the word attribute is attr.
인용구
당신의 문서안에 다른 출처로부터 인용한 콘텐츠 블록을 위해 사용합니다.
인용구 HTML 을 <blockquote class="blockquote"> 로 감싸세요. 인용구를 위해서, <p> 태그를 추천합니다.
[ 예제 ]
내가 나를 사랑하기 시작하면, 세상도 나를 사랑하기 시작합니다.
<figure> 태그로 감싸서 출처를 알수 있게 <figcaption class="blockquote-footer"> 태그를 추가하세요. 출처 원천의 이름은 <cite> 로 감싸주세요.
[ 예제 ]
오랫동안 꿈을 그리는 사람은 마침내 그 꿈을 닮아간다.
[ 예제 ]
오랫동안 꿈을 그리는 사람은 마침내 그 꿈을 닮아간다.
[ 예제 ]
오랫동안 꿈을 그리는 사람은 마침내 그 꿈을 닮아간다.
박스형 예제입니다.
[ 예제 ]
대부분의 사람들은 자신이 마음먹은 정도만큼 행복하다.
대부분의 사람들은 자신이 마음먹은 정도만큼 행복하다.
설명 목록 정렬
그리드 시스템의 사전 정의된 클래스(또는 시맨틱 믹스인)를 사용하여 용어와 설명을 수평으로 정렬합니다. 더 긴 용어의 경우 선택적 .text-truncate 으로 줄임표로 텍스트를 자르는 클래스를 추가할 수 있습니다.
[ 예제 ]
- Description lists
- A description list is perfect for defining terms.
- Term
-
Definition for the term.
And some more placeholder definition text.
- Another term
- This definition is short, so no extra paragraphs or anything.
- Truncated term is truncated
- This can be useful when space is tight. Adds an ellipsis at the end.
- Nesting
-
- Nested definition list
- I heard you like definition lists. Let me put a definition list inside your definition list.
목록
순서없는 - 순서가 명확치 않은 항목들의 목록입니다.
[ 예제 ]
- Nullam non wisi a sem semper
- Semper eleifend. Donec mattis
- Duis pretium velit ac mauris
- Proin eu wisi suscipit
- Nulla suscipit interdum
- Pellentesque adipiscing purus
- Adipiscing purus ac magna
- Mauris a dolor nulla facilis
순서있는 - 순서가 명확한 항목들의 목록입니다.
[ 예제 ]
- Nullam non wisi a sem semper
- Semper eleifend. Donec mattis
- Duis pretium velit ac mauris
- Proin eu wisi suscipit
- Nulla suscipit interdum
- Pellentesque adipiscing purus
- Adipiscing purus ac magna
- Mauris a dolor nulla facilis
인라인 - .list-inline 로 감싸고 .list-inline-item 으로 항목들을 한줄에 보여주고 약간의 패딩을 줍니다.
[ 예제 ]
텍스트 컬러
텍스트 컬러는 감싸고 있는 태그에 .text-색상 클래스를 추가하세요.
지정된 색상 종류 - red, crimson, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow, amber, orange, deep-orange, brown, gray, light-gray, black, white
[ 예제 ]
텍스트 백그라운드
[ 예제 ]
bg-primary
bg-info
bg-success
bg-warning
bg-danger
Default
rounded
rounded-2x
rounded-3x
rounded-4x
경보 (알림)
[ 예제 ]
alert-primary
alert-info
alert-success
alert-warning
alert-danger
툴팁
[ 예제 ]
팝오버
[ 예제 ]
[ 예제 ]
헤드라인 1
[ 예제 ]
Headline h1
Headline h2
Headline h3
Headline h4
Headline h5
Headline h6
헤드라인 2
[ 예제 ]