[TIL][240820] Bootstrap - Grid system

어떤 문제가 있었나?

예전 프로젝트를 진행할 때, Bootstrap을 처음 사용하는 과정에서 그리드 시스템을 이해하기 어려웠다. 특히 화면 크기에 따라 레이아웃이 어떻게 변화하는지 명확하지 않았다.

---

무엇을 시도했나?

• 기본 HTML 설정
  Bootstrap을 프로젝트에 포함시키기 위해 CDN 링크를 사용하여 기본 HTML 템플릿을 작성하였다.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

• 그리드 시스템
  - 2개와 3개의 열로 구성된 레이아웃을 만들어 봤고, 화면 크기에 따라 레이아웃이 어떻게 변하는지 확인하기 위해 브라우저 개발자 도구를 사용했다.

<div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-4 bg-success text-white p-3">Column 1</div>
        <div class="col-sm-12 col-md-4 bg-warning text-white p-3">Column 2</div>
        <div class="col-sm-12 col-md-4 bg-danger text-white p-3">Column 3</div>
    </div>
</div>

• 구성 요소 사용
  다양한 스타일의 버튼, 네비게이션 바, 카드, 폼 등을 만들어 Bootstrap의 기본 구성 요소를 익혔다.

<!-- 기본 버튼 -->
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>

<!-- 네비게이션 바 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    ...
</nav>

<!-- 카드 컴포넌트 -->
<div class="card" style="width: 18rem;">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">Some quick example text...</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

---

어떻게 해결됐는가?

• 브라우저 개발자 도구를 사용하여 반응형 디자인이 어떻게 작동하는지 직접 확인했다. 다양한 디바이스 모드를 확인하면서 레이아웃의 변화를 이해할 수 있었다.
• Bootstrap 문서를 참고하여 그리드 시스템과 각 구성 요소의 사용법을 익히고, 예제를 통해 익히도록 노력했다.

---

새로 알게 된 점은 무엇인가?

• 그리드 시스템: Bootstrap의 그리드 시스템이 화면 크기에 따라 레이아웃을 자동으로 조정해 준다는 점이 매우 유용하다는 것을 알게 되었다.
• 구성 요소 활용: Bootstrap의 미리 정의된 구성 요소를 사용하면 일관된 디자인을 유지하면서 웹 페이지를 구성할 수 있다는 것을 알게 되었다.
• 반응형 디자인: 다양한 디바이스에 적응하는 반응형 디자인의 중요성을 느꼈다. Bootstrap의 유틸리티 클래스를 통해 이를 쉽게 구현할 수 있었다.

---

무엇을 느꼈고 내일은 무엇을 할까?

이 밖에도 프론트에 관한 기본적인 것들이 특강 내용에 있었지만 프로젝트 준비로 정리를 많이 하지 못했다. 프로젝트를 빨리 마무리하고 다시 공부해봐야겠다.