📅 2025-09-10

➡️ CSS Grid와 Bootstrap에 대해 새롭게 알게 된 것 또는 헷갈리는 부분 정리

---

🔎 학습 리마인드

📌 Grid

display: grid;
grid-template-columns: repeat(3, minmax(200px, 1fr));
grid-template-rows: 150px 200px;

• 화면 너비가 작아지더라도 컬럼의 너비는 200px보다 작아지지 않음

• 화면 너비가 넓어지면 컬럼의 너비는 1:1:1 비율로 늘어남

• 그리드 나누기

  • grid-template-columns: 컬럼을 정의 (열)
  • grid-template-rows: 로우를 정의 (행)

• 유연한 크기 단위

  • fr 단위를 사용하면 flex box처럼 전체 크기에 대해 상대적인 값을 지정할 수 있음

• 반복되는 값을 한 번에 쓰기

  • repeat(반복횟수, 사이즈) : 반복할 횟수와 값 작성

• 최소, 최대값으로 크기 정하기

  • minmax(최소크기, 최대크기) : 최소값과 최대값을 지정하여 유연하게 그리드 셀의 크기 조절

• 간격

  • gap

---

🌱 Grid 연습하기: Grid Garden

---

💡 그리드 라인 번호

• column : 왼쪽 → 오른쪽
• row : 위 → 아래

💡 배치하기

• grid-column : 어느 열만큼 배치할지 /로 구분으로
  • grid-column: 2/4 → 2~4번 컬럼
• grid-row : 어느 열만큼 배치할지 /로 구분
  • grid-row: 1/-1 → 1번 ~ -1번(마지막) 로우
• span 키워드를 통해 여러 라인을 차지하도록 할 수 있음
  • grid-column: span 2 → 가로 2칸 차지

---

📌 Grid System

• 화면을 column, row 단위로 나눠서 컨텐츠를 정렬, 배치하기 쉽게 만드는 가이드라인

💡 필요성

• 일관성
• 정렬, 가동성
• 반응형 디자인

💡 기본구조

• 대부분 프론트엔드 프레임워크( bootstrap , tailwindCSS 등) 12컬럼 시스템 사용
  

---

📌 CSS 심화 - Media Query 이해하기

• 기기의 화면 너비/해상도에 따라 CSS를 다르게 적용할 수 있게 해주는 규칙

💡 문법의 기본 구조

@media [미디어타입] and ([조건]) {
  /* 조건이 참일 때만 적용할 CSS */
}

💡 실무에서의 팁

• 모바일 퍼스트
  작은 화면에서부터 시작하면 관리가 더 쉽고, 사용자 접근성에 대해 신경 쓸 수 있는 작업 시간이 늘어남
• 브레이크 포인트들을 정하고 시작
  디자인 시스템을 통해 미리 브레이크 포인트들을 정해놓고 작업하는 것이 유리. 서로 겹치지 않게 관리할 수 있음

---

📌 부트스트랩(Bootstrap)

📎 Bootstrap

• CSS 프레임워크
• 특징
  • 반응형 웹 디자인 지원
  • 미리 정의된 스타일
  • 일관성
  • 확장성

💡 사용 방법

• 설치
  • CDN

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous"></script>

  • 로컬
  • Package Manager

---