Grid System
페이지 전체를 설계하기 위한 디자인적 방법론
Grid System은 페이지 콘텐츠를 논리적이고 일관성 있는 질서와 구조로 디자인할 수 있도록 돕는 그래픽 시스템을 말한다.
여기서 그리드(Grid)는 사전적 의미로 '격자무늬' 또는 '격자판'을 의미하며, 격자 선에 맞춰 디자인에 규칙을 부여하여 페이지를 제작하는 데 도움을 주는 디자인적 방법론이다.
grid system의 중요한 개념
-
container : grid system이 적용되는 전체영역, 아래 예제에서의 하늘색영역
-
column : 전체영역 각각의 칸 (보통 12column사용), 아래 예제에서의 빨간색영역
-
gutter : column사이 간격, 아래 예제에서의 자주색영역
Bootstrap
grid system을 css로 쉽게 구현할 수 있는 css프레임워크
Bootstrap은 웹사이트를 쉽게 만들 수 있게 도와주는 CSS프레임워크이다.
하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동한다.
다양한 기능을 제공하며 반응형 grid system도 가능해 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다.
bootstrap 사용방법
-
bootstrap공식 홈페이지에 접속하여 CSS
<link>를 복사 -
HTML문서
<head>에 복사한<link>를 붙여넣기
Bootstrap이 제공하는 반응형 grid system 클래스
-
col-sm(small)-n : 화면크기가 576px이상일 경우 n개의 column으로 변화
-
col-md(medium)-n : 화면크기가 768px이상일 경우 n개의 column으로 변화 (태블릿)
-
col-lg(large)-n : 화면크기가 992px이상일 경우 n개의 column으로 변화 (데스크탑)
-
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는 재밌다 - 기초부터 실무 레벨까지
