[Bootstrap] 문자열 클래스

1. 문자열 클래스

HTML에서 제공하고 있는 문자열 관련 CSS에서 더 세밀하게 꾸밀수 있도록 다양한 클래스를 제공하고 있습니다.

	Bootstrap 4	Bootstrap 3
글자크기	16px	14px
줄간격	1.5	1.428
폰트	Helvetica Neue, Helvetica, Arial, Sans-serif	브라우저 기본 폰트

 

2. H1 ~ H6

주로 제목을 표시하는 용도로 사용하는 HTML 태그로써 Bootstrap은 각각 문자열 크기와 굵기, 폰트 등을 기본적으로 설정해두었습니다.

Bootstrap 4

• <h1>h1 문자열(40px)</h1>
• <h2>h2 문자열(32px)</h2>
• <h3>h3 문자열(28px)</h3>
• <h4>h4 문자열(24px)</h4>
• <h5>h5 문자열(20px)</h5>
• <h6>h6 문자열(16px)</h6>

Boostrap 3

• <h1>h1 문자열(36px)</h1>
• <h2>h2 문자열(30px)</h2>
• <h3>h3 문자열(24px)</h3>
• <h4>h4 문자열(18px)</h4>
• <h5>h5 문자열(14px)</h5>
• <h6>h6 문자열(12px)</h6>

 

3. Display (Bootstrap 4)

태그의 크기를 무시하고 display-숫자에 설정된 크기로 변경해줌 16px 기준

• display-1 (6rem) : 96px
• display-2 (5.5rem) : 88px
• display-3 (4.5rem) : 72px
• display-4 (3.5rem) : 56px

<h1 class="display-1">Display 1</h1>

 

4. 문자열 관련 태그들

• small : 설정된 크기보다 조금 작은 크기로 표시 (font-size : 80%)
• mark : 배경색을 달리 하여 강조
• abbr : 약어
• blockquote : 인용구
• dl, dt, dd : 항목 표시
• code : 프로그램 코드 표시
• kbd : 키보드 단축키
• pre : 태그 내의 문자열을 작성한 모양 그대로 출력함

 

5. 문자열 관련 CSS 클래스

• font-weight-bold : 문자열을 굵게 함 (BS4)
• font-italic : 문자열을 기울어지게 함 (BS4)
• font-weight-light : 문자열을 가늘게 함 (BS4)
• font-weight-normal : 기본 굵기의 문자열 (BS4)
• text-left : 좌측정렬
• text-center : 중앙정렬
• text-right : 우측 정렬
• text--left, text--center, text-*-right : 기본은 좌측, 중앙, 우측에 정렬되지만 브라우저의 가로 길이에 따라 좌측 정렬로 변경됨 (BS4)
  • * : sm, md, lg, xl
• text-justify : 영역안에서 문자열을 좌우에 맞춤
• text-monospace : 모노 스페이스 글자로 표시, 모노 스페이스 글자는 모든 글자의 길이가 동일해짐 (BS4)
• text-nowrap : 문자열이 영역을 벗어나더라도 개행되지 않음
• text-lowercase : 문자열을 소문자로 표시함
• text-uppercase : 문자열을 대문자로 표시함
• text-capitalize : 첫글자가 소문자인 경우 대문자로 표시함
• list-unstyled : ul이나 ol 태그를 사용할때 스타일을 제거해줌
• list-inline : ul이나 ol 태그의 항목을 가로 방향으로 배치해줌
• dl-horizontal : dl 태그 내부 항목들을 가로 방향으로 배치함 (BS3)
• pre-scrollable : pre 태그에서 스크롤이 되지 않는 상황에서도 스크롤바 영역을 표시함

 

References

source code : https://github.com/yonghwankim-dev/Bootstrap_study/tree/main/StringClass/src/main/webapp
[인프런] 윤재성의 Bootstrap 4 & 3 Framework Tutorial