(CSS) Grid System & Bootstrap

Mirrer·2022년 4월 30일
0

CSS

목록 보기
15/15
post-thumbnail

Grid System

페이지 전체를 설계하기 위한 디자인적 방법론

Grid System은 페이지 콘텐츠를 논리적이고 일관성 있는 질서와 구조로 디자인할 수 있도록 돕는 그래픽 시스템을 말한다.

여기서 그리드(Grid)는 사전적 의미로 '격자무늬' 또는 '격자판'을 의미하며, 격자 선에 맞춰 디자인에 규칙을 부여하여 페이지를 제작하는 데 도움을 주는 디자인적 방법론이다.

grid system의 중요한 개념

  1. container : grid system이 적용되는 전체영역, 아래 예제에서의 하늘색영역

  2. column : 전체영역 각각의 칸 (보통 12column사용), 아래 예제에서의 빨간색영역

  3. gutter : column사이 간격, 아래 예제에서의 자주색영역


Bootstrap

grid system을 css로 쉽게 구현할 수 있는 css프레임워크

Bootstrap은 웹사이트를 쉽게 만들 수 있게 도와주는 CSS프레임워크이다.

하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동한다.

다양한 기능을 제공하며 반응형 grid system도 가능해 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다.


bootstrap 사용방법

  1. bootstrap공식 홈페이지에 접속하여 CSS <link>를 복사

  2. HTML문서 <head>에 복사한 <link>를 붙여넣기


Bootstrap이 제공하는 반응형 grid system 클래스

  1. col-sm(small)-n : 화면크기가 576px이상일 경우 n개의 column으로 변화

  2. col-md(medium)-n : 화면크기가 768px이상일 경우 n개의 column으로 변화 (태블릿)

  3. col-lg(large)-n : 화면크기가 992px이상일 경우 n개의 column으로 변화 (데스크탑)

  4. col-xl(xlarge)-n : 화면크기가 1200px이상일 경우 n개의 column으로 변화

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Grid System</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <!-- 아래와 같은 형식을 반드시 지켜 코드를 작성 -->
  <!-- container > row > col-n > 요소 -->
  <div class="container">
    <div class="row">
      <!-- column이 몇칸을 차지할지 col-n으로 선언(보통 n : 1 ~ 12) -->      
      <div class="col-md-1"> <!-- 1칸을 차지하는 column -->        
        <p>col-1</p> <!-- column에 들어갈 요소 -->
      </div>      
      <div class="col-md-12"> <!-- 12칸을 차지하는 column -->
        <p>col-12</p> <!-- column에 들어갈 요소 -->
      </div>
    </div>
  </div>
</body>
</html>

Bootstrap이 제공하는 flex속성 클래스

bootstrap에서 제공하는 클래스들은 기본적으로 display: flex이므로 flex와 관련된 속성값을 클래스명으로 사용할 수 있다.

<section class="program">
    <div class="container">
      <!-- row -> 한줄에 col 요소들을 가로배치 -->
      <!-- justify-content-center -> 가로배치된 요소들을 가운데 배치 -->
	  <!-- css에 코드작성할 필요없이 해당 클래스에 클래스명만 추가해서 사용 -->
      <div class="row justify-content-center align-items-center">
        <div class="col-12 col-md-10">
          <strong class="section-category">
            Program
          </strong>
          <h1 class="section-title">
            Frontend Dev.<br />
            Immersive Course
          </h1>
          <p class="section-desc">
            Your best course for career transformation in front-end developement. 
			This full-time bootcamp features expert instruction, 
			one-on-one career coaching, and connections to top employers to get you hired.
          </p>
        </div>
      </div>
    </div>  
  </section>

bootstrap사용시 주의점

반응형 grid system에 사용하는 클래스를 제외하고 가급적이면 bootstrap에서 제공하는 클래스는 작업 시 변경하지 않는다.

변경, 수정하게 되면 grid system이 제공하는 기본 골격이 무너져서 Page Layout이 망가진다.


참고 자료

CSS_layout - CSS: Cascading Style Sheets | MDN
김버그의 CSS는 재밌다 - 기초부터 실무 레벨까지

profile
memories Of A front-end web developer

0개의 댓글