Flutter 기반 크로스 플랫폼 웹 개발

아토믹데브_8_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발

atomicdev 2024. 8. 15. 05:39
728x90

8강: Bootstrap 그리드 시스템 이해하기

내용 요약

  1. Bootstrap의 그리드 시스템 개념:
    • Bootstrap 그리드 시스템은 레이아웃을 구성하는 데 사용되는 12열 기반의 시스템입니다. 각 열은 화면 크기에 따라 자동으로 크기가 조정되며, 반응형 웹 디자인을 쉽게 구현할 수 있게 해줍니다.
    • 그리드는 container, row, col 클래스를 사용하여 구성됩니다. col 클래스에는 col-sm-, col-md-, col-lg-, col-xl-와 같은 접두사가 붙어 특정 화면 크기에서 열의 크기를 정의할 수 있습니다.
  2. 그리드 시스템을 사용한 반응형 웹 디자인:
    • 반응형 웹 디자인은 다양한 화면 크기(예: 모바일, 태블릿, 데스크탑)에서 일관된 사용자 경험을 제공하기 위해 레이아웃이 자동으로 조정되는 디자인입니다.
    • 그리드 시스템을 사용하면, 각 열의 크기를 화면 크기에 맞게 설정할 수 있으며, 이를 통해 페이지의 콘텐츠가 유연하게 배치됩니다.

실습

1. Flutter 프로젝트에서 Bootstrap 그리드 시스템 사용해보기

  • Bootstrap 추가하기:
    • Flutter의 웹 프로젝트에서 Bootstrap을 사용하려면 index.html 파일에 Bootstrap CSS를 추가해야 합니다.
    • web/index.html 파일의 <head> 태그 내에 다음 코드를 추가합니다: 
      <!-- Bootstrap CSS --> 
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  • web/index.html 파일의 <head>태그 내에 추가한 bootstrap css 코드

    그리드 시스템 레이아웃 구성    :
    • index.html 파일에 Bootstrap의 그리드 시스템을 사용하여 반응형 레이아웃을 구성하는 코드를 작성합니다: 
      <div class="container mt-5">
  <div class="row">
    <div class="col-sm-12 col-md-6 col-lg-4">
      <div class="p-3 bg-primary text-white text-center">
        Column 1
      </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4">
      <div class="p-3 bg-success text-white text-center">
        Column 2
      </div>
    </div>
    <div class="col-sm-12 col-md-12 col-lg-4">
      <div class="p-3 bg-warning text-white text-center">
        Column 3
      </div>
    </div>
  </div>
</div>
      index.html 파일에 Bootstrap의 그리드 시스템을 사용하여 반응형 레이아웃을 구성하는 코드

    • 코드 설명:
      • container 클래스: 그리드를 포함하는 컨테이너로, 페이지의 중앙에 여백을 두고 콘텐츠를 정렬합니다.
      • row 클래스: 그리드를 구성하는 행으로, 그 안에 열(col)을 배치합니다.
      • col-sm-12, col-md-6, col-lg-4: 화면 크기에 따라 각 열의 크기를 조정합니다.
        • 작은 화면(col-sm-)에서는 열이 전체 너비(12)를 차지합니다.
        • 중간 화면(col-md-)에서는 열이 화면의 절반(6)을 차지합니다.
        • 큰 화면(col-lg-)에서는 열이 화면의 3분의 1(4)을 차지합니다.
      • 색상 및 텍스트 정렬: bg-primary, bg-success, bg-warning 클래스를 사용하여 각 열의 배경색을 지정하고, text-center 클래스를 사용하여 텍스트를 중앙에 정렬했습니다.

2. 다양한 화면 크기에서 반응형 레이아웃 구성

  • 프로젝트 실행 및 반응형 테스트:
    • Flutter 웹 프로젝트를 실행하고, 웹 브라우저에서 결과를 확인합니다. 
      flutter run -d chrome
      Flutter 웹 프로젝트 실행 명령 코드
    • 브라우저 창의 크기를 조정하면서 각 열이 어떻게 반응하는지 확인합니다. 작은 화면에서는 열이 세로로 쌓이고, 큰 화면에서는 가로로 배치됩니다.

      프로젝트 실행 결과 기본 화면

      작은 화면에서의 화면


  • 추가 연습:
    • 다른 그리드 조합을 시도해보세요. 예를 들어, 한 열을 4개의 작은 열로 나누거나, 특정 열을 특정 화면 크기에서만 표시하거나 숨길 수 있습니다.

 

하나의 열을 4개의 작은 열로 나눈 모습

 

 

하나의 열을 4개의 작은 열로 나눈 예제 코드

 

 

작은 화면 크기에서 첫번째 열을 숨긴 화면
d-none d-sm-block 클래스를 사용하여 sm 화면 크기에서 해당 열이 숨겨지도록 설정.


스크린샷

  1. 그리드 시스템 설명 삽화:
    • 12열 기반의 Bootstrap 그리드 시스템을 설명하는 다이어그램 또는 스크린샷을 제공합니다.
  2. 반응형 레이아웃 예제 화면:
    • 브라우저에서 실행된 Flutter 웹 프로젝트의 화면을 캡처합니다. 다양한 화면 크기에서 레이아웃이 어떻게 반응하는지 보여주는 스크린샷을 포함합니다.

이 강의를 통해 여러분은 Bootstrap의 그리드 시스템을 사용하여 반응형 웹 디자인을 구현하는 방법을 배웠습니다. Flutter 웹 프로젝트에 Bootstrap을 적용하면 다양한 화면 크기에 적응하는 유연한 UI를 쉽게 구축할 수 있습니다. 앞으로의 강의에서는 이러한 기술을 활용하여 더욱 복잡한 레이아웃과 사용자 인터페이스를 구성해 보겠습니다.

728x90

'Flutter 기반 크로스 플랫폼 웹 개발' 카테고리의 다른 글

아토믹데브_10_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발  (26) 2024.08.15
아토믹데브_9_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발  (28) 2024.08.15
아토믹데브_7_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발  (28) 2024.08.15
아토믹데브_6_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발  (28) 2024.08.15
아토믹데브_5_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발  (30) 2024.08.15

'Flutter 기반 크로스 플랫폼 웹 개발'의 다른글

  • 현재글아토믹데브_8_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발

관련글

티스토리툴바