부트스트랩 타이포그래피 · 반응형 유틸리티 완전 정리

 

 

Bootstrap Typography

부트스트랩 타이포그래피 · 반응형 유틸리티 완전 정리

타이포그래피 클래스와 visible/hidden 반응형 유틸리티를 Bootstrap 3 기준으로 정리합니다.

0 오늘 분석할 코드

<h1>Bootstrap h1 <small>small</small></h1>
<p class="lead">리드 문단</p>
<p class="text-center text-primary">가운데 정렬 주요 문구</p>
<ul class="list-inline">
  <li>menu 1</li><li>menu 2</li>
</ul>
<div class="visible-xs">모바일에서만 보임</div>
<div class="hidden-print">화면에서만 보임</div>

lead문단 첫머리나 도입 문장을 크게 강조합니다.

text-primary주요 의미의 텍스트 색상 클래스입니다.

text-center텍스트를 가운데 정렬합니다.

abbr약어의 전체 의미를 title로 설명합니다.

blockquote인용문을 의미 있게 표시합니다.

list-inline목록을 가로로 배치합니다.

visible-xsBootstrap 3에서 모바일 구간에만 보이게 합니다.

hidden-print인쇄할 때 숨기는 유틸리티입니다.

---

1 타이포그래피 예제 범위

타이포 문서는 heading, small, strong, em, lead, text 정렬, 강조 색상, abbr, address, blockquote, list, dl을 다룹니다. 여기에 반응형 유틸리티 visible/hidden 클래스와 print 유틸리티를 함께 정리합니다.

• heading은 h1부터 h6까지 계층을 나타냅니다.
• 텍스트 유틸은 정렬과 강조 색상을 제공합니다.
• 목록 유틸은 list-unstyled와 list-inline을 제공합니다.
• 반응형 유틸은 화면 크기에 따라 보임/숨김을 제어합니다.

---

2 heading과 small

클래스	의미	주의
h1~h6	제목 계층	크기가 아니라 문서 구조 기준으로 선택
small	부제나 보조 문구	제목 안에서도 사용 가능
lead	문단 강조	도입 문장에 적합
strong/em	강조와 기울임	의미 강조 태그

---

3 텍스트 정렬

text-left, text-center, text-right는 문단 정렬을 바꿉니다. 왼쪽 정렬이 기본이지만, 가운데나 오른쪽 정렬된 영역을 다시 왼쪽으로 돌릴 때 text-left도 의미가 있습니다.

클래스	의미	주의
text-left	왼쪽 정렬	기본값과 같을 수 있음
text-center	가운데 정렬	제목이나 짧은 문구
text-right	오른쪽 정렬	숫자나 보조 정보
pull-right	float 기반 오른쪽 배치	clearfix 필요 가능

---

 

반응형

 

4 강조 색상

클래스	의미	주의
text-muted	약한 정보	부가 설명
text-primary	주요 정보	핵심 안내
text-success	성공	저장 완료
text-info	정보	도움말
text-warning	주의	확인 필요
text-danger	위험	오류나 삭제

---

5 약어와 주소

abbr은 축약어의 전체 의미를 title에 담아 보여 줍니다. initialism은 영문 약어를 대문자 스타일로 정리합니다. address는 연락처나 주소 정보를 의미 있게 표시합니다.

• abbr title에는 풀어 쓴 의미를 넣습니다.
• initialism은 영문 약어 표현에 적합합니다.
• address는 저자, 주소, 전화번호 같은 연락처 정보에 씁니다.
• 의미 태그는 스타일보다 문서 구조를 먼저 생각합니다.

---

6 blockquote

blockquote는 인용문을 표시하고, small과 cite로 출처를 붙일 수 있습니다. 원문은 pull-right로 오른쪽 정렬 인용문도 보여 줍니다.

float 기반 pull-right를 사용한 뒤에는 clearfix로 다음 콘텐츠 흐름을 정리해야 할 수 있습니다.

---

7 목록 클래스

클래스	의미	주의
ul/ol	기본 목록	왼쪽 여백과 아래 여백이 있음
list-unstyled	목록 표시 제거	중첩 목록은 기본 스타일 유지 가능
list-inline	가로 목록	각 li 사이에 좌우 padding
dl-horizontal	용어 설명 가로 배치	Bootstrap 3 기준

---

8 반응형 visible 클래스

클래스	의미	주의
visible-xs	768px 미만에서 보임	Bootstrap 3 모바일 기준
visible-sm	768px 이상 구간	태블릿 기준
visible-md	992px 이상 구간	일반 데스크톱
visible-lg	1200px 이상 구간	큰 데스크톱

---

9 반응형 hidden 클래스

hidden-xs, hidden-sm, hidden-md, hidden-lg는 특정 화면 크기에서 요소를 숨깁니다. 보이는 조건을 만드는 visible 계열과 반대로 읽으면 됩니다.

• hidden-xs는 작은 화면에서 숨깁니다.
• hidden-sm은 sm 구간에서 숨깁니다.
• hidden-md는 md 구간에서 숨깁니다.
• hidden-lg는 큰 화면에서 숨깁니다.

---

10 print 유틸리티

visible-print는 인쇄할 때만 보이고, hidden-print는 화면에서는 보이지만 인쇄에서는 숨깁니다. 영수증, 안내문, 화면 전용 버튼을 분리할 때 유용합니다.

클래스	의미	주의
visible-print	인쇄 전용 표시	화면에서는 숨김
hidden-print	화면 전용 표시	인쇄에서는 숨김
box	예제용 테두리/패딩	학습용 시각화
cl1/cl2	예제용 배경색	실전에서는 의미 색상으로 변경

---

11 버전 차이

visible-xs와 hidden-md는 Bootstrap 3 방식입니다. Bootstrap 4/5에서는 d-none, d-md-block 같은 display 유틸리티 방식으로 바뀌었으므로 최신 프로젝트에 그대로 복사하면 안 됩니다.

1. 예제의 Bootstrap 버전을 확인합니다.
2. Bootstrap 3이면 visible/hidden 클래스를 그대로 읽습니다.
3. Bootstrap 4/5이면 display 유틸리티로 변환합니다.
4. 인쇄 유틸도 버전에 맞춰 다시 확인합니다.

---

12 검증 체크리스트

• heading은 시각 크기가 아니라 문서 계층에 맞게 사용합니다.
• text-danger 같은 색상 클래스는 의미에 맞게 씁니다.
• list-inline은 항목이 너무 길면 줄바꿈을 고려합니다.
• visible/hidden 클래스는 브라우저 폭을 바꿔 테스트합니다.
• print 유틸은 인쇄 미리보기로 확인합니다.
• Bootstrap 버전별 클래스 차이를 확인합니다.

---

13 실전 적용 예

상황	클래스	설명
공지 제목	h2 + small	제목과 날짜를 함께 표현
상태 메시지	text-success/text-danger	저장 성공/실패 표현
상단 메뉴	list-inline	짧은 메뉴 가로 배치
모바일 전용 안내	visible-xs	작은 화면 조작 안내
인쇄 제외 버튼	hidden-print	출력물에 버튼 제거

---

14 접근성 점검

• 색상만으로 상태를 전달하지 말고 문구도 함께 제공합니다.
• abbr에는 title을 넣어 의미를 설명합니다.
• 인용문에는 출처를 명확히 남깁니다.
• 반응형 유틸로 핵심 정보를 특정 화면에서 완전히 숨기지 않습니다.
• 인쇄본에도 필요한 정보가 남는지 확인합니다.

---

15 타이포 적용 순서

1. 문서 구조: h1부터 h6까지 계층이 건너뛰지 않는지 확인합니다.
2. 도입 문장: 강조할 첫 문단에만 lead를 사용합니다.
3. 상태 표현: text-success, text-warning, text-danger는 의미에 맞게 선택합니다.
4. 목록 표현: 세로 목록인지 가로 목록인지에 따라 기본 ul과 list-inline을 고릅니다.
5. 출력 조건: 화면 크기와 인쇄 여부에 따라 visible/hidden 클래스를 최소한으로 사용합니다.

---

16 반응형 유틸 테스트

테스트	확인할 것	방법
모바일 폭	visible-xs와 hidden-xs	개발자 도구에서 767px 이하로 조정합니다.
태블릿 폭	visible-sm과 hidden-sm	768px 이상 구간을 확인합니다.
데스크톱 폭	visible-md와 hidden-md	992px 이상 구간을 확인합니다.
큰 화면	visible-lg와 hidden-lg	1200px 이상 구간을 확인합니다.
인쇄	visible-print와 hidden-print	브라우저 인쇄 미리보기를 확인합니다.

---

17 사용 시 주의

• 중요한 안내를 visible-xs 하나에만 두면 데스크톱 사용자에게는 보이지 않습니다.
• hidden-print로 버튼을 숨기더라도 인쇄물에 필요한 결과 텍스트는 남겨야 합니다.
• text-danger는 오류나 위험에만 사용해야 시각 언어가 일관됩니다.
• list-inline은 항목이 길면 줄바꿈되어 의도한 메뉴처럼 보이지 않을 수 있습니다.
• blockquote의 pull-right는 다음 요소 배치에 영향을 줄 수 있어 clearfix를 확인합니다.

---

18 Bootstrap 3에서 최신 버전으로 옮길 때

Bootstrap 3	최신 버전에서 확인할 점	메모
visible-xs	display 유틸리티로 변환	d-block d-sm-none 같은 조합을 검토합니다.
hidden-md	d-md-none 계열 확인	숨김 범위가 같은지 테스트합니다.
pull-right	float 유틸리티 확인	float-end 등 버전별 이름이 다릅니다.
dl-horizontal	그리드 조합으로 대체	정의 목록 레이아웃을 직접 구성합니다.
text-* 의미 색상	대부분 유지되지만 색상 체계 확인	테마 색상에 따라 톤이 달라집니다.

• 문서 제목과 본문 강조는 CSS 크기보다 HTML 의미를 우선합니다.
• 인쇄 전용 요소는 실제 출력물에서 정보 흐름이 끊기지 않는지 확인합니다.
• 반응형 숨김 클래스는 검색엔진과 접근성 관점에서도 과도하게 쓰지 않습니다.
• 텍스트 색상 클래스는 테마 변경 시 대비가 충분한지 확인합니다.
• 작은 화면에서 숨긴 요소가 큰 화면에서만 필요한 장식인지 다시 확인합니다.
• 목록과 인용문은 기본 여백이 있으므로 주변 컴포넌트와 간격을 함께 봅니다.

---

M 자주 하는 실수

실수	문제	해결
container 없이 row 사용	좌우 gutter와 중앙 정렬이 기대와 다릅니다.	container 또는 container-fluid 안에 row를 둡니다.
row 없이 col 사용	컬럼 padding과 float 정리가 어긋납니다.	컬럼은 항상 row의 직접 자식으로 둡니다.
12칸 초과	컬럼이 다음 줄로 떨어집니다.	한 row 안의 컬럼 합을 12 기준으로 계산합니다.
Bootstrap 버전 혼동	visible-xs, col-xs-* 동작이 최신 버전과 다를 수 있습니다.	원문은 Bootstrap 3 기준으로 읽습니다.
반응형 유틸을 장식으로 사용	화면 크기별 콘텐츠가 사라져 혼란스럽습니다.	필요한 정보는 모든 화면에서 접근 가능하게 설계합니다.

핵심 한 줄 요약

gridBootstrap 3 그리드는 container, row, col-* 12칸 규칙으로 읽습니다.

utility텍스트와 반응형 유틸은 의미와 화면 조건을 함께 고려해야 합니다.

versionvisible-xs, hidden-md 같은 클래스는 Bootstrap 3 기준입니다.

Tags

#Bootstrap#typography#text-primary#lead#list-inline#visible-xs#hidden-print#responsive#utility#티스토리

▼ 티스토리 태그 입력란 복사용

Bootstrap, typography, text-primary, lead, list-inline, visible-xs, hidden-print, responsive, utility, 티스토리