왕진 블로그
반응형
Bootstrap CSS
부트스트랩 버튼 · 타이포그래피 완전 정리
Bootstrap 기본 글꼴과 버튼 클래스 조합을 예제 흐름대로 정리합니다.
0 오늘 분석할 코드
<link href="../css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<h1>Bootstrap h1</h1>
<p>부트스트랩 기본 글꼴과 행간이 적용됩니다.</p>
<button type="button" class="btn btn-primary">중요한 버튼</button>
<button type="button" class="btn btn-success">긍정 버튼</button>
<button type="button" class="btn btn-danger">위험 버튼</button>
<a href="#" class="btn btn-default" role="button">링크 버튼</a>
<input type="button" class="btn btn-info" value="input 버튼">
<button class="btn btn-primary btn-lg">큰 버튼</button>
<button class="btn btn-primary btn-sm">작은 버튼</button>
<button class="btn btn-primary btn-xs">아주 작은 버튼</button>
<button class="btn btn-primary btn-lg btn-block">전체 폭 버튼</button>
</div>Bootstrap미리 정의된 CSS 클래스와 컴포넌트를 제공하는 프레임워크입니다.
container콘텐츠를 가운데 정렬하고 반응형 폭을 잡아 주는 기본 레이아웃 클래스입니다.
btn버튼 기본 모양을 적용하는 핵심 클래스입니다.
btn-primary중요하거나 대표 동작을 나타내는 버튼 색상 클래스입니다.
btn-success성공이나 긍정 의미를 나타내는 버튼 클래스입니다.
btn-danger삭제, 위험, 경고성 동작을 나타내는 버튼 클래스입니다.
btn-lg기본 버튼보다 큰 버튼 크기 클래스입니다.
btn-block버튼을 부모 너비 전체로 확장하는 클래스입니다.
1 Bootstrap CSS 연결
부트스트랩을 쓰려면 먼저 bootstrap.min.css를 문서에 연결해야 합니다. 원문은 ../css/bootstrap.min.css를 사용하고, 두 번째 예제에서는 custom2.css를 추가로 연결합니다.
- bootstrap.min.css가 먼저 로드되어야 Bootstrap 클래스가 적용됩니다.
- custom2.css는 프로젝트별 덮어쓰기 스타일을 넣는 위치입니다.
- 경로가 틀리면 HTML은 보이지만 Bootstrap 모양은 적용되지 않습니다.
- container, btn, text-primary 같은 클래스는 Bootstrap CSS가 있어야 의미가 있습니다.
2 기본 글꼴
원문은 Bootstrap의 기본 글꼴이 Helvetica Neue를 우선 사용하고, 없으면 Helvetica, Arial, sans-serif 계열로 내려간다고 설명합니다. Bootstrap 기본 본문은 읽기 쉬운 크기와 행간을 갖습니다.
| 항목 | 의미 | 주의 |
|---|---|---|
| font-family | Helvetica Neue, Helvetica, Arial, sans-serif 순서 | 운영체제에 따라 실제 글꼴은 달라질 수 있습니다. |
| font-size | 기본 본문 크기 | 버전마다 수치가 다를 수 있습니다. |
| line-height | 문단 행간 | 긴 문장 가독성에 영향을 줍니다. |
| color | 진한 회색 계열 | 완전 검정이 아닐 수 있습니다. |
3 heading 스타일
h1부터 h6까지는 Bootstrap CSS가 적용되며, 크기와 margin이 정리되어 있습니다. 원문은 영어 heading과 한글 heading을 나란히 출력해 기본 타이포그래피를 비교합니다.
- container 안에 h1부터 h6까지 작성합니다.
- 브라우저 기본 스타일과 Bootstrap 스타일 차이를 확인합니다.
- 한글 문단에서도 같은 행간과 색상이 적용되는지 봅니다.
- 필요하면 custom CSS로 글꼴만 덮어씁니다.
반응형
4 btn 기본 클래스
class="btn"만 붙이면 버튼의 padding, border, display, cursor 같은 기본 버튼 형태가 잡힙니다. 색상 의미를 붙이려면 btn-primary처럼 추가 클래스를 함께 씁니다.
| 항목 | 의미 | 주의 |
|---|---|---|
| button without class | 브라우저 기본 버튼 | Bootstrap 모양이 아닙니다. |
| btn | Bootstrap 버튼 기본 골격 | 색상 의미는 약합니다. |
| btn-default | 기본 버튼 스타일 | Bootstrap 3에서 자주 사용됩니다. |
| btn-link | 버튼을 링크처럼 표시 | 중요 액션에는 부적합합니다. |
5 버튼 색상 클래스
Bootstrap 버튼 색상은 단순 장식이 아니라 의미를 전달합니다. primary, success, info, warning, danger를 상황에 맞게 써야 사용자가 동작의 성격을 빠르게 이해합니다.
| 항목 | 의미 | 주의 |
|---|---|---|
| btn-primary | 주요 액션 | 한 화면에 너무 많이 쓰면 강조가 흐려집니다. |
| btn-success | 성공, 저장, 완료 | 삭제에는 쓰지 않습니다. |
| btn-info | 정보 제공 | 보조 안내에 적합합니다. |
| btn-warning | 주의 | 되돌릴 수 있는 위험에 적합합니다. |
| btn-danger | 위험, 삭제 | 파괴적 동작에만 신중히 씁니다. |
6 button, input, a 태그
원문은 button, input, a 세 태그에 같은 btn 클래스를 붙여 Bootstrap 버튼처럼 보이게 합니다. 외형은 비슷하지만 의미와 동작은 다릅니다.
- button은 일반 명령 실행에 적합합니다.
- input type=button은 폼 중심 예제에서 자주 보입니다.
- a 태그는 실제 이동 링크일 때 적합합니다.
- a를 버튼처럼 쓸 때는 role="button"을 붙이면 의미가 더 명확합니다.
7 버튼 크기
btn-lg, btn-sm, btn-xs는 버튼의 padding과 글자 크기를 바꿉니다. 원문은 큰 버튼, 기본 버튼, 작은 버튼, 아주 작은 버튼을 비교합니다.
| 항목 | 의미 | 주의 |
|---|---|---|
| btn-lg | 큰 버튼 | 대표 CTA나 넓은 영역에 적합합니다. |
| 기본 크기 | 일반 버튼 | 대부분의 폼에 적합합니다. |
| btn-sm | 작은 버튼 | 테이블 행 액션에 적합합니다. |
| btn-xs | 아주 작은 버튼 | Bootstrap 3 기준 클래스입니다. |
8 btn-block
btn-block은 버튼을 부모 컨테이너 너비 전체로 늘립니다. 모바일 화면이나 명확한 단일 액션에 적합하지만, 여러 버튼을 모두 block으로 만들면 화면이 길어질 수 있습니다.
<button type="button" class="btn btn-primary btn-lg btn-block">
화면 전체 버튼
</button>9 disabled 처리
disabled 속성은 button과 input에는 실제 비활성 상태를 적용합니다. a 태그에 disabled 속성을 써도 기본 링크 동작이 완전히 막히지 않을 수 있어 별도 처리나 .disabled 클래스 사용이 필요합니다.
| 항목 | 의미 | 주의 |
|---|---|---|
| button disabled | 클릭 불가 | 폼 제출도 막힙니다. |
| input disabled | 입력/클릭 불가 | 값 전송 여부도 달라집니다. |
| a disabled | 속성만으로 부족 | href 제거나 이벤트 차단을 고려합니다. |
| 시각 표시 | 회색 비활성 스타일 | 실제 동작 차단과 함께 확인합니다. |
10 text-primary
예제의 h4 class="text-primary"는 제목 텍스트를 Bootstrap의 primary 색상으로 표시합니다. 버튼뿐 아니라 텍스트에도 의미 색상 클래스를 사용할 수 있습니다.
- text-primary는 주요 정보 색상입니다.
- text-success는 성공 메시지에 적합합니다.
- text-warning은 주의 메시지에 적합합니다.
- text-danger는 오류나 위험 메시지에 적합합니다.
11 버전 차이 주의
원문 예제는 Bootstrap 3 스타일의 클래스가 많습니다. Bootstrap 4나 5에서는 btn-default가 btn-secondary로 바뀌는 등 일부 클래스와 동작이 달라질 수 있습니다.
| 항목 | 의미 | 주의 |
|---|---|---|
| btn-default | Bootstrap 3 기본 버튼 | Bootstrap 4/5에서는 btn-secondary를 주로 씁니다. |
| btn-xs | Bootstrap 3 초소형 버튼 | 상위 버전에서는 직접 CSS가 필요할 수 있습니다. |
| glyphicons | Bootstrap 3 포함 | 상위 버전에서는 빠졌습니다. |
| respond.js | IE8 대응 | 현대 프로젝트에서는 거의 쓰지 않습니다. |
12 검증 체크리스트
- bootstrap.min.css 경로가 실제 위치와 맞습니다.
- container 안에 예제 요소를 넣어 기본 여백을 확인합니다.
- btn에는 색상 클래스가 함께 붙었는지 확인합니다.
- a 버튼에는 role="button"과 href 의미를 확인합니다.
- disabled는 시각 효과와 실제 클릭 차단을 함께 테스트합니다.
- 사용 중인 Bootstrap 버전에 맞는 클래스인지 확인합니다.
13 실전 적용 순서
- CSS 확인: bootstrap.min.css가 먼저 로드되는지 확인합니다.
- 레이아웃 확인: container 안에 샘플 heading과 문단을 넣어 기본 타이포그래피를 봅니다.
- 기본 버튼 확인: btn만 붙인 버튼과 btn-primary를 붙인 버튼을 비교합니다.
- 태그 차이 확인: button, input, a가 같은 모양이어도 의미가 다르다는 점을 구분합니다.
- 상태 확인: disabled, btn-block, btn-lg 같은 추가 클래스가 실제 화면에서 어떻게 바뀌는지 확인합니다.
14 클래스 조합 예시
| 조합 | 결과 | 사용 상황 |
|---|---|---|
| btn btn-primary | 기본 크기의 주요 버튼 | 저장, 확인, 다음 단계 |
| btn btn-default | 기본 보조 버튼 | 취소, 닫기, 보조 작업 |
| btn btn-danger | 위험 동작 버튼 | 삭제, 초기화, 제거 |
| btn btn-primary btn-lg | 큰 주요 버튼 | 상단 대표 액션 |
| btn btn-default btn-sm | 작은 보조 버튼 | 테이블 행 작업 |
| btn btn-primary btn-block | 전체 폭 주요 버튼 | 모바일 폼 제출 |
15 접근성 점검
- 링크처럼 이동하는 요소는 a 태그를 사용하고, 동작 실행은 button 태그를 사용합니다.
- a 태그를 버튼처럼 보이게 할 때는 role="button"을 붙여 의미를 보완합니다.
- disabled 상태는 색상만 바꾸지 말고 실제 클릭 동작도 막아야 합니다.
- 색상 의미에만 의존하지 말고 버튼 문구로 동작을 분명하게 적습니다.
- 버튼 문구가 길면 btn-block이나 줄바꿈을 고려해 모바일에서 넘치지 않게 합니다.
16 Bootstrap 3 기준으로 읽기
원문 예제는 Bootstrap 3 문법을 기준으로 보는 것이 자연스럽습니다. IE8 대응 주석, btn-default, btn-xs 같은 요소가 그 힌트입니다.
| 단서 | 해석 | 최신 버전 사용 시 |
|---|---|---|
| btn-default | Bootstrap 3의 기본 버튼 | btn-secondary로 바꿔 검토합니다. |
| btn-xs | Bootstrap 3의 초소형 버튼 | 직접 CSS 또는 btn-sm 대체를 검토합니다. |
| respond.js | IE8 반응형 대응 | 대부분 제거해도 됩니다. |
| container | 중앙 정렬 컨테이너 | 최신 버전에서도 기본 개념은 유지됩니다. |
| btn-block | 전체 폭 버튼 | Bootstrap 5에서는 d-grid 등으로 대체할 수 있습니다. |
17 사용 판단표
| 목표 | 추천 클래스 | 이유 |
|---|---|---|
| 가장 중요한 제출 | btn btn-primary | 대표 액션임을 분명히 보여 줍니다. |
| 삭제 확인 | btn btn-danger | 위험한 동작을 색상으로 경고합니다. |
| 도움말 링크 | btn btn-link | 링크 성격을 유지하면서 버튼 위치에 둘 수 있습니다. |
| 모바일 전체 폭 제출 | btn btn-primary btn-block | 터치하기 쉬운 폭을 확보합니다. |
| 표 안의 작은 수정 | btn btn-default btn-sm | 행 높이를 크게 늘리지 않습니다. |
M 자주 하는 실수
| 실수 | 문제 | 해결 |
|---|---|---|
| bootstrap.min.css 경로 오류 | 클래스가 있어도 아무 스타일이 적용되지 않습니다. | 브라우저 개발자 도구 Network에서 CSS 로드를 확인합니다. |
| btn 없이 btn-primary만 사용 | 버튼 기본 골격이 빠질 수 있습니다. | btn btn-primary처럼 함께 씁니다. |
| a disabled만 믿음 | 링크가 여전히 동작할 수 있습니다. | href 제거나 이벤트 차단을 함께 처리합니다. |
| 버전이 다른 클래스 사용 | btn-default, btn-xs가 기대와 다르게 보일 수 있습니다. | 프로젝트 Bootstrap 버전을 먼저 확인합니다. |
| 색상 클래스를 장식으로만 사용 | 사용자에게 잘못된 의미를 전달할 수 있습니다. | 동작 의미에 맞는 색상을 고릅니다. |
핵심 한 줄 요약
typographyBootstrap은 기본 글꼴, heading, 문단 행간을 일관되게 맞춥니다.
buttonbtn 기본 클래스에 의미 색상과 크기 클래스를 조합해 버튼을 만듭니다.
versionBootstrap 3 예제 클래스는 최신 버전과 차이가 있을 수 있어 버전 확인이 필요합니다.
Tags
#Bootstrap#CSS#btn#btn-primary#btn-block#typography#container#button#disabled#티스토리
▼ 티스토리 태그 입력란 복사용
Bootstrap, CSS, btn, btn-primary, btn-block, typography, container, button, disabled, 티스토리
반응형
'php' 카테고리의 다른 글
| 부트스트랩 그리드 완전 정리 (0) | 2026.07.17 |
|---|---|
| 부트스트랩 폼 완전 정리 (0) | 2026.07.17 |
| localStorage 실습 앱 완전 정리 (0) | 2026.07.17 |
| 웹 스토리지 실습 완전 정리 (0) | 2026.07.17 |
| 오디오 플레이리스트 완전 정리 (0) | 2026.07.17 |
댓글