부트스트랩 그리드 완전 정리

 

 

Bootstrap Grid

부트스트랩 그리드 완전 정리

12컬럼 그리드, row/col 구조, 중첩 레이아웃 샘플을 Bootstrap 3 기준으로 정리합니다.

0 오늘 분석할 코드

<div class="container">
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3">menu</div>
    <div class="col-md-9">
      <div class="row">
        <div class="col-md-7">content</div>
        <div class="col-md-5">side</div>
      </div>
    </div>
  </div>
</div>

containerBootstrap 콘텐츠 폭을 잡는 레이아웃 박스입니다.

row컬럼을 담는 한 줄입니다.

col-md-*md 화면 이상에서 적용되는 컬럼 폭 클래스입니다.

12 columns한 줄을 12칸으로 나누는 규칙입니다.

gutter컬럼 사이 여백입니다.

nested grid컬럼 안에 다시 row와 col을 넣는 구조입니다.

col-xs-*가장 작은 화면부터 적용되는 Bootstrap 3 컬럼입니다.

container-fluid전체 폭을 쓰는 컨테이너입니다.

---

1 Bootstrap 그리드 구조

Bootstrap 3 그리드는 12칸을 기준으로 레이아웃을 나눕니다. 원문은 col-md-1을 12개 배치하고, 8+4, 4+4+4, 6+6 조합을 보여 줍니다.

• container는 전체 레이아웃 폭을 잡습니다.
• row는 컬럼들을 담는 한 줄입니다.
• col-md-*는 중간 화면 이상에서 적용되는 컬럼 폭입니다.
• 한 row 안의 컬럼 숫자 합은 12를 기준으로 계산합니다.

---

2 12컬럼 계산

클래스	의미	주의
col-md-1 x 12	1칸씩 12개	그리드 기본 단위를 확인합니다.
col-md-8 + col-md-4	8칸과 4칸	본문과 사이드 영역에 적합합니다.
col-md-4 x 3	3등분	카드 목록에 적합합니다.
col-md-6 x 2	2등분	좌우 비교 영역에 적합합니다.

---

3 container와 row

container는 좌우 여백과 반응형 폭을 제공하고, row는 컬럼의 음수 margin과 gutter를 맞춥니다. col-*를 row 밖에 두면 간격이 어색해질 수 있습니다.

1. container를 만듭니다.
2. 그 안에 row를 만듭니다.
3. row의 직접 자식으로 col-md-*를 둡니다.
4. 필요하면 컬럼 안에 다시 row를 넣어 중첩합니다.

---

 

반응형

 

4 시각화용 CSS

원문 grid system 예제는 모든 col 클래스에 빨간 border와 padding을 주어 칸을 눈으로 확인하게 합니다. 학습용으로는 좋지만 실제 페이지에서는 콘텐츠 디자인에 맞는 스타일로 바꿔야 합니다.

그리드 디버깅 중에는 임시 border를 켜고, 배포 전에는 제거하는 식으로 쓰면 구조 파악이 쉽습니다.

---

5 중첩 그리드 샘플

샘플 페이지는 header, 왼쪽 nav, 오른쪽 content, footer 구조입니다. 오른쪽 col-md-9 안에 다시 row를 만들고 col-md-7과 col-md-5로 나눕니다.

클래스	의미	주의
col-md-3	왼쪽 메뉴	전체 12칸 중 3칸
col-md-9	본문 컨테이너	나머지 9칸
내부 row	중첩 그리드	컬럼 안에서 다시 12칸 계산
col-md-7 + col-md-5	본문 내부 분할	합이 12

---

6 header와 footer

샘플은 header와 footer를 container 안에 두고, header에는 배경색, border-radius, padding, margin, font-family, text-align을 적용합니다. Bootstrap 그리드와 직접 관련 없지만 페이지 구조를 완성합니다.

• header는 페이지 제목 영역입니다.
• footer는 하단 안내 영역입니다.
• nav 목록은 왼쪽 컬럼에 들어갑니다.
• 본문은 중첩 row 안에서 다시 나뉩니다.

---

7 반응형 기준

col-md-*는 md 이상에서 지정 폭으로 동작하고, 그보다 좁은 화면에서는 기본적으로 세로로 쌓입니다. 모바일에서도 가로 분할을 유지하려면 col-xs-*를 함께 써야 합니다.

클래스	의미	주의
col-xs-*	모바일부터 적용	항상 가로 분할이 필요할 때
col-sm-*	태블릿 이상	작은 화면 일부 분할
col-md-*	데스크톱 전후	원문 주요 예제
col-lg-*	큰 데스크톱	넓은 화면 전용

---

8 그리드 합계 초과

한 row에서 컬럼 합이 12를 넘으면 초과한 컬럼은 다음 줄로 내려갑니다. 의도한 줄바꿈이면 괜찮지만, 계산 실수라면 레이아웃이 깨진 것처럼 보입니다.

• 8+4는 한 줄입니다.
• 6+6은 한 줄입니다.
• 4+4+4는 한 줄입니다.
• 9+4는 13이라 줄바꿈이 발생합니다.

---

9 실전 배치 패턴

패턴	사용 예	설명
3+9	사이드 메뉴와 본문	관리자 화면
4+8	보조 정보와 주요 콘텐츠	프로필 화면
6+6	좌우 비교	가격 비교
12	전체 폭	상단 소개나 표
7+5	본문과 요약	중첩 콘텐츠

---

10 검증 체크리스트

• container 안에 row가 있는지 확인합니다.
• row의 직접 자식이 col-*인지 확인합니다.
• 컬럼 합이 12를 넘지 않는지 확인합니다.
• 중첩 그리드는 컬럼 안에 새 row를 만드는지 확인합니다.
• 모바일에서 세로로 쌓이는 동작이 의도한 것인지 확인합니다.
• Bootstrap 3 기준 클래스인지 확인합니다.

---

11 개선 과제

과제	목표	메모
container-fluid	전체 폭 레이아웃 실험	넓은 대시보드에 적합
col-xs 추가	모바일에서도 2열 유지	작은 화면 가독성 확인
offset 사용	컬럼 들여쓰기	중앙 배치 실험
push/pull	컬럼 순서 변경	Bootstrap 3 기능
디버그 border 토글	구조 확인	개발용 CSS로 분리

---

12 실전 디버깅

1. 브라우저 폭을 줄여 컬럼이 언제 쌓이는지 확인합니다.
2. 개발자 도구에서 row와 col의 computed width를 봅니다.
3. 임시 border를 켜서 gutter 위치를 확인합니다.
4. 중첩 row가 container 밖으로 삐져나오지 않는지 봅니다.
5. 콘텐츠가 컬럼 폭보다 길 때 줄바꿈되는지 확인합니다.

---

13 레이아웃 설계 순서

1. 영역 나누기: header, nav, main, aside, footer처럼 큰 영역을 먼저 정합니다.
2. 비율 계산: 각 row에서 필요한 폭을 12칸 기준으로 계산합니다.
3. 브레이크포인트 선택: xs, sm, md, lg 중 어느 화면부터 가로 배치할지 정합니다.
4. 중첩 여부 결정: 컬럼 안을 다시 나눌 때만 내부 row를 추가합니다.
5. 모바일 확인: 좁은 화면에서 세로 순서가 자연스러운지 확인합니다.

---

14 샘플 페이지 해석

영역	클래스	해석
전체	container	페이지 폭과 중앙 정렬을 담당합니다.
상단	header	Bootstrap 그리드 밖의 일반 구조 영역입니다.
왼쪽 메뉴	col-md-3	md 이상에서 3칸 폭을 차지합니다.
본문	col-md-9	나머지 9칸을 차지합니다.
본문 내부	col-md-7 + col-md-5	중첩 row 안에서 다시 12칸으로 나눕니다.
하단	footer	그리드 아래 전체 폭 안내 영역입니다.

---

15 유지보수 팁

• 그리드 확인용 border CSS는 별도 debug 클래스로 분리합니다.
• 콘텐츠 컬럼 이름은 cont보다 main-content처럼 역할이 보이는 이름이 좋습니다.
• 중첩 row가 많아지면 레이아웃을 섹션 단위로 나눠 읽기 쉽게 만듭니다.
• 메뉴와 본문 순서가 모바일에서 어떻게 쌓이는지 확인합니다.
• Bootstrap 3의 push/pull을 쓰기 전에는 DOM 순서가 논리적인지 먼저 봅니다.

---

16 자주 쓰는 조합표

조합	합계	사용 예
col-md-12	12	상단 배너, 전체 폭 표
col-md-6 + col-md-6	12	좌우 비교, 2단 카드
col-md-4 + col-md-4 + col-md-4	12	3개 특징 소개
col-md-3 + col-md-9	12	사이드 메뉴와 본문
col-md-8 + col-md-4	12	주요 콘텐츠와 보조 패널

---

17 모바일 점검

• col-md만 사용하면 모바일에서는 각 컬럼이 한 줄씩 쌓이는지 확인합니다.
• 모바일에서도 2열이 필요하면 col-xs-6 같은 클래스를 함께 붙입니다.
• 왼쪽 메뉴가 본문보다 먼저 나오는 순서가 모바일에서도 적절한지 확인합니다.
• 긴 단어와 긴 URL이 컬럼 밖으로 넘치지 않는지 확인합니다.
• 중첩 그리드 안쪽 콘텐츠도 바깥 컬럼 폭에 맞게 줄어드는지 확인합니다.
• 이미지에는 max-width: 100% 같은 반응형 처리가 필요한지 확인합니다.
• 표처럼 넓은 콘텐츠는 responsive wrapper가 필요한지 확인합니다.
• 컬럼 내부 padding이 디자인 의도와 맞는지 확인합니다.
• row 사이 간격은 margin utility나 별도 클래스로 일관되게 관리합니다.
• 콘텐츠 순서가 스크린리더와 키보드 탐색에서도 자연스러운지 확인합니다.
• 디자인 시안의 비율을 그대로 픽셀로 옮기기보다 12칸 비율로 환산합니다.
• 중첩 그리드가 3단 이상 깊어지면 구조를 단순화할 수 있는지 검토합니다.
• 같은 패턴이 반복되면 공통 섹션 클래스로 묶어 유지보수를 줄입니다.

---

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#grid#container#row#col-md#responsive#layout#12columns#Bootstrap3#티스토리

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

Bootstrap, grid, container, row, col-md, responsive, layout, 12columns, Bootstrap3, 티스토리