• 회원가입
  • 로그인
  • 구글아이디로 로그인

[basic] BS3 - Text/Typography(BS글자 = BS텍스트) (= BS4글자 vs BS3글자) BS글자색


 

<h1> - <h6> or .h1 - .h6 (헤드 제목 글자 크기)

<small> - 작은 헤드 제목

.small - 부모 요소 85% 크기의 작은 글씨

.lead (두드러진 약간 큰 글씨)

<mark> or .mark - 형광색 배경 글씨

<del> - 삭제된 글 표시

<s> - 관계 없는 글 표시

<ins> - 삽입된 글 표시

<u> - 밑줄 친 글씨 표시

<strong> - 글 강조 표시 (굵은 글씨)

<em> - 이탤릭 글씨체 (= 기울임 글씨체)

.text-left (글씨 왼쪽 정렬)

.text-center (글씨 중앙 정렬) - 요소 안의 인라인 요소를 가운데 정렬

.text-right (글씨 오른족 정렬)

.text-justify (글씨 좌우 균등 배분 정렬) - 양쪽 정렬

.text-nowrap (일반 정렬)

.text-lowercase (소문자 글씨)

.text-uppercase (대문자 글씨)

.text-capitalize (단어 첫 글자 대문자 글씨)

<abbr> - 두문자어 (=축약 단어) 표시

.initialism (살짝 작은 두문자어) - 약간 작은 축약 단어

<address> - 연락처 정보

<blockquote> - 긴 인용구

.blockquote-reverse (긴 인용구 오른쪽 정렬)

<ul> - 순서 없는 목록</ul>

<ol> - 순서 있는 목록</ol>

.list-unstyled (목록 기본 스타일 제거 및 목록 아이템 왼쪽 마진 제거)

.list-inline (목록 아이템 가로 한 줄로)

<dl> - 설명 목록 세로형

.dl-horizontal (설명 목록 가로형, / 창 좁으면 설명 목록 세로형)

<var> - 변수 표시

<kbd> - 키보드 입력 표시

<pre> - 여러 줄의 코드 표시 (※ 태그 실행 후 표시)

<pre class="pre-scrollable"> 스크롤바 있는 여러 줄 코드 표시

<samp> - 프로그램 샘플 출력 결과 표시

<code> - 태그 이름 표시

 


 

.text-muted (색깔 죽인 글씨) - 옅은 회색

.text-primary (주요/핵심 글씨) - 파란색 글씨

.text-success (성공/긍정 글씨) - 녹색 글씨

.text-info (정보/환기 글씨) - 하늘색 글씨

.text-warning (주의/경고 글씨) - 고동색 글씨

.text-danger (위험/부정 글씨) - 진갈색 글씨

 


 

1.

기본글자 (= 기본텍스트 : body와 모든 단락에 적용)


1. 기본 글자

font-size: 14px ;
line-height: 1.428 ;

이것은 <body>요소와 모든 단락 ( <p>)에 적용.

 


 

2.<p>요소

margin-bottom: 계산된 line-height 값의 절반. (= 기본 10px) ;

 


 

3. .lead 클래스 : 리드 문단 (= 부각되는 글씨 )

<p class="lead">...</p>

 
[참고] .lead {margin-bottom: 20px; font-size: 16px; font-weight: 300; line-height: 1.4;}


 

4.

LESS 경우 문자크기

variables.less 파일의 두 LESS 변수(@font-size-base ・ @line-height-base)와 몇몇 함수에 기반.

 

 

2.

<h1> ~ <h6> 태그 , .h1 ~ .h6 클래스 : 제목

 

[블럭요소형 제목]

 

<div class="container">

  <h1>h1  (36px) - 홈짱닷컴 Homzzang.com</h1>

  <h2>h2 (30px) - 홈짱닷컴 Homzzang.com</h2>

  <h3>h3 (24px) - 홈짱닷컴 Homzzang.com</h3>

  <h4>h4 (18px) - 홈짱닷컴 Homzzang.com</h4>

  <h5>h5 (14px) - 홈짱닷컴 Homzzang.com</h5>

  <h6>h6 (12px) - 홈짱닷컴 Homzzang.com</h6>

</div>


결과보기


 

[인라인요소형 제목]

 

.h1 ~ .h6 클래스 사용.

 

 

3.

.display-1 ~ .display-4 클래스 

 

BS4 전용 클래스

 

 

4.

<small> 태그 , .small 클래스 - 보조글자 (= 부모요소 글자크기의 85%)

 

<div class="container">     

  <h1>h1 홈짱닷컴 <small>Homzzang.com</small></h1>

  <h2>h2 홈짱닷컴 <small>Homzzang.com</small></h2>

  <h3>h3 홈짱닷컴 <small>Homzzang.com</small></h3>

  <h4>h4 홈짱닷컴 <small>Homzzang.com</small></h4>

  <h5>h5 홈짱닷컴 <small>Homzzang.com</small></h5>

  <h6>h6 홈짱닷컴 <small>Homzzang.com</small></h6>

</div>


결과보기

※ 머리글제목보다 살짝 작은 글씨의 회색 글씨로 표현됨.

 

5-1.

<mark> : 강조할 글씨

 

<p>홈짱닷컴 <mark>Homzzang.com</mark></p>


※ 아주 연한 핑크색 배경색 짙은 검정 글씨색으로 표현

 

5-2.

<del> : 삭제된 글씨

 

<p>홈짱닷컴 <mark>Homzzang.com</mark></p>


 

5-3.

<s> : 취소된 글씨

 

<p>홈짱닷컴 <s>Homzzang.com</s></p>


 

5-4.

<ins> : 삽입된 글씨

 

<p>홈짱닷컴 <ins>Homzzang.com</ins></p>


 

5-4.

<u> : 밑줄 글씨

 

<p>홈짱닷컴 <u>Homzzang.com</u></p>


 

5-5.

<strong> : 굵은 글씨

 

<p>홈짱닷컴 <strong>Homzzang.com</strong></p>


 

5-5.

<em> : 이탤릭체 형태로 강조

 

<p>홈짱닷컴 <em>Homzzang.com</em></p>

 


 

[참고]

 

<b> : 단순 강조

<i> : 이탤릭체. 음성이나 기술적 용어에 사용.

 

 

6.

<abbr> : 두문자어・축약어

 

<p><abbr title="BootStrap">BS</abbr> - 홈짱닷컴 Homzzang.com</p>

 

※ 마우스커서 올릴 때 title 속성값에 적힌 원래 글자 보여줌. (물음표 생기고, 글자 밑에 밑줄 생김.)


 

.initialism 클래스 : 미세하게 작은(90%) 폰트크기

 

<p><abbr title="BootStrap" class="initialism">BS</abbr> - 홈짱닷컴 Homzzang.com</p>

 

 

7.

<br> : 개행 (= 줄바꿈)

 

<address>

  <strong>홈짱</strong><br>

  <a href="mailto:#"></a>

</address>

 

 

8.

<blockquote> : 인용구 상자

 

[왼쪽정렬] - 기본

 

<blockquote>

    <p>홈짱닷컴 Homzzang.com</p>

    <footer>신비</footer>

</blockquote> 

 

결과보기


 

[오른쪽 정렬] - .blockquote-reverse 클래스 사용.

 

<blockquote class='blockquote-reverse'>

    <p>홈짱닷컴 Homzzang.com</p>

    <footer>By. 신비 <cite title="그누보드">sir.kr</cite></footer>

</blockquote>

 

결과보기 

<blockquote> 태그 안에서 인용구는 <p> 태그로, 출처는 <footer> 태그로 감싸주는 걸 추천.

 

9.
<dl>
 : 설명목록 (Description List)

 

<dt>,<dd> : 세로정렬

 

<dl>

    <dt>홈짱닷컴</dt>

    <dd>- Homzzang.com</dd>

</dl>     

 

결과보기


 

<dt>,<dd> : 가로정렬

.dl-horizontal 클래스 : <dt>와 <dl> 가로 정렬

 

<dl class="dl-horizontal">

  <dt>...</dt>

  <dd>...</dd>

</dl>

 

※ 기본 <dl>처럼 시작하지만 브라우저 창 너비가 확장되면 가로 정렬로 바뀜.

※ 너비보다 너무 긴 <dd> 내용을 text-overflow 속성 이용해 줄임. (좁은 너비에서는 개행 됨.)


10.

<code> : 옅은 핑크색 배경에 짙은 핑크색 글씨로 표현

 

<div class="container">

  <p><code>div</code> 요소 - 홈짱닷컴 Homzzang.com</p>

</div>

 

결과보기 

 

11.

<kbd> : 키보드키 (= 검은배경에 흰글씨로 표현)

 

<div class="container">

  <p><kbd>Ctrl + D</kbd> 홈짱닷컴 Homzzang</p>

</div>
 

결과보기 

 

12.

<pre> : 코드그대로출력 (= 약간 작은 글씨로 표현)

 

<pre>

    홈짱닷컴   Homzzang.com

</pre>

 

결과보기  


 

.pre-scrollable 클래스 : 최대 높이를 350px 로 설정하고 y축 스크롤바를 제공

 

<pre class='pre-scrollable'>

...

</pre>

 

 

12.

Text align : 텍스트정렬 클래스

 

<p class="text-left">텍스트 왼쪽정렬 .text-left { text-align: left; }</p>

<p class="text-center">텍스트 가운데정렬 .text-center { text-align: center; }</p>

<p class="text-right">텍스트 오른쪽정렬 .text-right { text-align: right; }</p>

<p class="text-justify">텍스트 양쪽정렬 .text-justify { text-align: justify; }</p>

<p class="text-nowrap">텍스트 줄바꿈안함 .text-nowrap { white-space: nowrap; }</p>

 

 

13.

Text transform : 텍스트변형 클래스

 

<p class="text-lowercase">소문자 된 텍스트</p>

<p class="text-uppercase">대문자 된 텍스트</p>

<p class="text-capitalize">첫글자만 대문자 된 텍스트</p>

 

 

14.

List (리스트・목록)

 

[순서 없는 목록]

 

<ul>

  <li>...</li>

</ul>

 


 

[순서 있는 목록]

 

<ol>

  <li>...</li>

</ol>

 


 

.list-unstyled 클래스 : 직접 자식 리스트의 list-style과 padding-left 제거. (손자 요소 경우 별도 추가 필요.)

.list-unstyled {padding-left: 0;   list-style: none;}

 

<ul class="list-unstyled">

  <li>...</li>

</ul>

 


 

.list-inline 클래스 : 인라인요소화 시켜서 가로 나열시키고 약간의 padding 줌.

 

<ul class="list-inline">

  <li>...</li>

</ul>

 

 

 

Text Color 글자색・배경색 

 

[내용별 글자색]

<p class = "text-muted">묵언 - 회색 (#777)</ p>

<p class = "text-primary">중요 - 파란색 (#337ab7)</ p>

<p class = "text-success">성공 - 녹색 (#3c763d)</ p>

<p class = "text-info">정보 - 파란색 (#31708f)</ p>

<p class = "text-warning">경고 - 똥색 (#8a6d3b)</ p>

<p class = "text-danger">위험 - 진갈색 (#a94442)</ p>

 

결과보기


 

[내용별 배경색]

<p class="bg-primary">중요 - 짙은파란배경 흰색글씨</p>

<p class="bg-success">성공 - 연한연두배경 똥색글씨</p>

<p class="bg-info">정보 - 옅은하늘배경 똥색글씨</p>

<p class="bg-warning">경고 - 옅은핑크배경 똥색글씨</p>

<p class="bg-danger">위험 - 옅은보라배경 똥색글씨</p>

 

결과보기 


 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
basic BS3 - HOME (소개) - BS3 vs BS4 차이 (= BS차이)
basic BS3 - Start (시작) ★ - BS다운 / BSCDN / BS구문
basic BS3 - Grid (그리드) ★★★ - (BS3그리드 vs BS4그리드)
basic BS3 - Text/Typography(BS글자 = BS텍스트) (= BS4글자 vs BS3글자) BS글자색
basic BS3 - Table (BS테이블) - 테이블테두리 + 테이블배경색 + 반응형테이블
basic BS3 - Image (BS이미지) - 반응형이미지 + 반응형동영상 + 이미지정렬
basic BS3 - Jumbotron/page-header (BS점보트론 / BS페이지헤더) - 큰글씨, 글자키우기
basic BS3 - Well (BS웰 = BS회색상자) ★ - BS회색배경상자 (= BS회색박스 = BS웰클래스)
basic BS3 - Alert (BS경고 = BS얼럿 = BS경보) - 배경색 + 글자색 + 링크색 + 닫기 + 애니…
basic BS3 - Button (BS버튼) ★ - 버튼색깔 + 버튼크기 + 버튼활성화 + 버튼비활성화
basic BS3 - Button Group (BS버튼그룹) ★
basic BS3 - Icon (아이콘) - Glyphicon/Font Awesome/Google Material De…
basic BS3 - Progress Bar (BS진행바 = BS진행상태표시 = BS진도바 = BS프로그레스바) - I…
basic BS3 - Pagination (BS페이징 = BS페이지번호 = BS페이징 = BS패지네이션) + Bread…
basic BS3 - Pager (BS페이저) - 이전페이지/다음페이지 (= 앞으로가기/뒤로가기)
basic BS3 - List Group (BS리스트그룹) - 리스트생성
basic BS3 - Panel (BS글상자 = BS패널)
basic BS3 - Dropdown (BS드롭다운메뉴) ★ + Dropup (BS드롭업메뉴)
basic BS3 - Collapse (BS접기 = BS컬랩스 = BS토글=BS접는패널) + BS아코디언
basic BS3 - Tabs/Pills - (BS탭메뉴) - 일반탭메뉴/알약탭메뉴
basic BS3 - Navbar (BS메뉴바 = BS네브바) ★ - 네비게이션 메뉴바
basic BS3 - Form (BS폼양식) ★★★
basic BS3 - Input (BS입력창 = BS인풋) + Textarea (텍스트영역) + Checkbox(체크박…
basic BS3 - Input2 (BS입력창2 = BS인풋2) 일반텍스트 + Input Group(BS인풋그룹) + …
basic BS3 - Input Sizing (BS입력창크기 = BS인풋크기)
basic BS3 - Media Object (BS미디어객체) - 썸네일위치
basic BS3 - Carousel (BS캐러셀 = BS슬라이드)
basic BS3 - Modal (BS모달) ★ - 새창팝업
basic BS3 - Tooltip (BS툴팁) - 허버형말풍선 (= 도움말풍선)
basic BS3 - Popover (BS팝오버) ★ - 클릭형말풍선
basic BS3 - Scrollspy (스크롤스파이) - 원페이지메뉴링크 (= 내부링크) ※매뉴얼제작
basic BS3 - Affix (BS어픽스) - 스크롤고정 (= 스크롤상단고정 + 스크롤사이드고정) + Scrolls…
grid BS3 - Grid (그리드) - 반응형 레이아웃 ★★★
grid BS3 - Grid (.container / .container-fluid) - 그리드 (박스형/와이드형)
grid BS3 - Grid - Small (BS그리드 소형기기 이상) - col-sm-숫자
grid BS3 - Grid - Medium (BS그리드 중형기기 이상) - col-md-숫자
grid BS3 - Grid - Large (BS그리드 대형기기 이상) - col-lg-숫자
grid BS3 - Grid Examples (그리드 예제) ★★★★★
theme BS3 - Templates (BS템플릿종류 = BS테마종류) - BS레이아웃종류 ★★★
theme BS3 - Theme "Simply Me" (BS테마 - 심플미테마 = 프로필테마 = 자기소개테마 = 원페이…
theme BS3 - Theme "Company" (BS테마 - 회사테마 = 컴퍼니테마) - 회사소개테마 (슝슝) + …
theme BS3 - Theme "The Band" (BS테마 - 밴드테마) - 스크롤스파이 원페이지 테마
quiz BS3 - Quiz (BS퀴즈 = BS테스트 = BS시험)
basic BS3 - Background CSS (= BS배경색CSS)
basic BS3 - Float CSS (= BS정렬CSS = BS배치CSS)
basic BS3 - Display CSS (= BS노출CSS = BS표시CSS = BS보임 + BS숨김 = BS보이기…
grid BS3 - grid CSS (BS그리드CSS = BS반응형CSS = BS노출CSS) + BS프린트클래스 ★★…
basic BS3 - Filter (BS필터 - 테이블검색필터/리스트검색필터/드롭다운검색필터/텍스트검색필터)
basic BS3 - Spinner (BS스피너 = BS회전 = BS로더) - BS3 지원X (대신, Glyphicon…
basic BS3 - Toast (토스트) - 순간말풍선 (=짧은경고창 = 스낵바) ※ BS3 지원X
basic BS3 - Card (BS카드) - 지원 X
basic BS3 - Utilities (BS유틸클래스) - BS글자색, BS배경색, BS닫기, BS카렛, BS정렬, …
basic BS3 - flex (BS플렉스) - 지원 X
basic BS3 - Badge/Label (BS배지/BS레이블=BS라벨) ※ BS속도저하해결
basic BS3 - Transition (BS트랜지션 = BS전환효과)
basic BS3 - 요소 높이 균등 설정 (BootStrap3 / 부트스트랩3 경우) ※ 각 그리드 높이 (동일하게/…
목록
찾아주셔서 감사합니다. Since 2012