스파르타 AI-8기 TIL(1/11)-TeamProject

오늘은 boostrap에 대해 공부해 봅시다.

기본 개념들

1. 레이아웃 시스템
그리드 시스템 (Grid System)

행(row)과 열(column)의 개념.
Breakpoints (sm, md, lg, xl, xxl)와 반응형 클래스.
Nesting(중첩 그리드)와 Offset(열 이동).
Container

Fixed width container (container).
Fluid container (container-fluid).
Breakpoint별로 조정 가능한 컨테이너 (container-md, container-xl 등).

Bootstrap의 핵심 요소

1. 텍스트 스타일
1.1 헤딩 스타일 (<h1>~<h6>)
Bootstrap은 기본 HTML 헤딩 태그(<h1> ~ <h6>)를 지원하며, 각 태그는 크기와 굵기가 다릅니다.

<div>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
</div>​

각 헤딩 태그는 글꼴 크기와 굵기가 점점 작아지며, <h1>이 가장 크고 <h6>이 가장 작습니다.

1.2 리드 텍스트 (.lead)
리드 텍스트는 강조된 큰 텍스트를 나타냅니다. 주로 소개나 강조해야 하는 문구에 사용됩니다.

<p class="lead">This is a lead paragraph. It's larger and stands out more.</p>​

 

참고로 여기서 <p>는 HTML의 **단락(paragraph)**을 표시하는 태그입니다.

class="lead"란?
Bootstrap에서 제공하는 미리 정의된 CSS 클래스입니다.

---

Bootstrap의 클래스 사용 이유
Bootstrap은 이런 과정을 효율적이고 표준화된 방식으로 처리하기 위해 만들어졌습니다:

미리 정의된 스타일 제공:
Bootstrap은 lead처럼 미리 작성된 스타일을 제공합니다. 이 스타일은 CSS 파일에 이미 정의되어 있으며, HTML에 클래스 이름만 추가하면 바로 적용됩니다.
개발자는 더 빠르게 작업할 수 있고, 디자인이 일관성 있게 유지됩니다.

추가 기능 제공:
단순히 디자인(크기, 색상)뿐 아니라, 반응형 디자인(화면 크기에 따라 다른 스타일)을 기본으로 지원합니다.
class="lead"를 사용하면, 예를 들어 화면이 작아질 때도 글씨 크기와 줄 간격이 자동으로 조정됩니다.

코드 재사용성:
같은 클래스를 여러 요소에 반복해서 사용할 수 있습니다.
이를 통해 CSS를 새로 작성할 필요 없이 일관된 스타일을 쉽게 유지할 수 있습니다.

Bootstrap에는 lead 외에도 다양한 클래스가 준비되어 있습니다.
1. 텍스트 관련 클래스
텍스트 스타일, 색상, 정렬, 크기 등을 설정할 수 있는 클래스입니다.

2. 배경색 관련 클래스
요소의 배경색을 설정할 때 사용합니다.

3. 테두리 관련 클래스
요소에 테두리를 추가하거나 색상, 모양 등을 설정할 때 사용합니다.

4. 크기와 간격 관련 클래스
요소의 여백(margin)과 패딩(padding)을 설정할 수 있습니다.

5. 버튼 관련 클래스
버튼의 색상, 크기, 스타일 등을 설정할 수 있습니다.

6. 디스플레이 관련 클래스
디스플레이 관련 클래스는 HTML 요소의 표시 방법을 조정하는 데 사용됩니다. 이를 통해 요소가 어떻게 보일지, 즉 블록 형태인지, 인라인 형태인지, Flexbox나 Grid 레이아웃으로 배치할지를 설정할 수 있습니다.

7. Flexbox 관련 클래스
Flexbox는 레이아웃을 만드는 데 매우 강력한 도구입니다. Flexbox 관련 클래스는 요소를 가로, 세로로 정렬하고 배치하는 방법을 제공합니다. 이것은 부모 요소와 자식 요소들 간의 관계를 설정하는 데 사용됩니다.

8. 애니메이션 클래스
애니메이션 클래스는 웹 페이지에서 동적인 효과를 제공하는 데 사용됩니다. 요소가 나타나거나 사라질 때, 움직일 때 등 시각적 변화를 줄 수 있습니다.

9. 상태 관련 클래스
상태 관련 클래스는 요소의 상태를 정의하거나 변화를 나타내는 데 사용됩니다. 예를 들어 버튼이 활성화되었을 때, 비활성화되었을 때, 체크된 상태일 때 등을 제어할 수 있습니다.

10. 기타 자주 쓰이는 클래스
기타 자주 쓰이는 클래스들은 레이아웃, 디자인, 사용자 인터페이스(UI)에서 필수적인 부분입니다. 

왜 한 클래스에 여러 속성을 쓰는가?
클래스를 한꺼번에 여러 개 사용하는 이유는 모듈화와 재사용성 때문입니다:
모듈화:
클래스별로 특정 스타일만 적용합니다. 예를 들어:
border: 테두리 추가
border-primary: 테두리 색상
rounded: 모서리를 둥글게
이렇게 하면 하나의 클래스로 불필요하게 복잡한 스타일을 정의하지 않아도 됩니다.

재사용성:
여러 클래스를 조합하면 다양한 스타일을 만들 수 있습니다.
예를 들어 border border-primary rounded는 테두리, 색상, 둥근 모양을 모두 포함합니다.

구조:
각 클래스는 하나의 역할을 담당하므로 읽기 쉽고, 필요한 스타일만 선택적으로 추가할 수 있습니다.