1. CSS Grid
CSS Grid는 2차원 레이아웃을 지원하는 강력한 CSS 모듈이다.
이를 통해 우리는 HTML 요소를 행(row)과 열(column) 모두에서 자유롭게 배치할 수 있다.
Flexbox가 단방향 레이아웃에 최적화되어 있다면, Grid는 복잡한 2차원 레이아웃을 쉽게 다룰 수 있도록 설계되었다.
쉽게 말해서 엑셀 시트!
가로(열, column)와 세로(행, row)로 나누고, 그 안에 있는 칸마다 요소를 배치할 수 있는 것이다.
1. 그리드의 기본 규칙
1. 그리드 컨테이너: 그리드를 적용할 큰 틀을 만든다.
• display: grid;를 사용해 활성화.
2. 그리드 아이템: 그 안에 들어갈 요소들을 배치한다.
• 그리드 컨테이너 안의 모든 자식 요소가 그리드 아이템이 된다.
2. 그리드 속성, 딱 세 가지만 기억하자 (외우자..)
(1) grid-template-columns
• 열(column)을 정의한다.
• 예시: grid-template-columns: 1fr 1fr;
→ 두 개의 열을 동일한 비율로 나눈다.
(2) grid-template-rows
• 행(row)을 정의한다.
• 예시: grid-template-rows: 100px auto;
→ 첫 번째 행은 100px, 두 번째 행은 콘텐츠 크기에 맞춘다.
(3) gap
• 아이템 사이의 간격을 만든다.
• 예시: gap: 10px;
→ 모든 행과 열 사이에 10px 간격을 만든다.
3. 그리드 기본 예제: 따라 해보기
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Sidebar</div>
<div class="item3">Main</div>
<div class="item4">Footer</div>
</div>
<style>
.grid-container {
display: grid; /* 그리드 활성화 */
grid-template-columns: 1fr 2fr; /* 첫 번째 열: 1 비율, 두 번째 열: 2 비율 */
grid-template-rows: auto auto; /* 두 행: 높이는 자동 */
gap: 10px; /* 간격 10px */
height: 100vh; /* 전체 화면 높이 */
}
.grid-container div {
background-color: lightgray;
text-align: center;
padding: 20px;
border: 1px solid black;
}
.item1 {
grid-column: span 2; /* 첫 번째 행, 두 열 전체 차지 */
}
.item4 {
grid-column: span 2; /* 마지막 행, 두 열 전체 차지 */
}
</style>+----------------+----------------+
| Header | Header |
+----------------+----------------+
| Sidebar | Main |
+----------------+----------------+
| Footer | Footer |
+----------------+----------------+
4. 왜 그리드를 써야 할까?
• CSS Flexbox는 1차원(가로 또는 세로) 레이아웃에 적합.
• CSS Grid는 2차원(가로 + 세로) 레이아웃에 강력.
예를 들어, 위의 레이아웃을 Flexbox로 구현하려면 훨씬 복잡해진다. 반면, 그리드는 몇 줄의 코드로 해결 가능하다.
그리드의 핵심은 2차원(행과 열) 배치!
• 세 가지 속성만 기억하자.
1. grid-template-columns → 열 정의
2. grid-template-rows → 행 정의
3. gap → 간격 설정
작은 화면에서도 보기 좋게 레이아웃을 변경하려면 Media Query를 함께 사용한다. 쉽게 말해 반응형!
바로 살펴보자.
1. Media 쿼리의 구조
미디어 쿼리는 조건에 따라 CSS를 적용한다. 기본 구조는 다음과 같다.
@media (조건) {
/* 조건에 만족하면 적용할 CSS */
}
예시: 화면 너비가 768px 이하일 때
@media (max-width: 768px) {
body {
background-color: lightgray;
}
}위 코드는 화면 너비가 768px 이하일 때 body의 배경색을 lightgray로 변경한다.
2. Media 쿼리의 주요 조건
(1) max-width와 min-width
• max-width: 조건에서 최대 너비를 지정.
• 예: max-width: 768px; → 화면 너비가 768px 이하일 때 적용.
• min-width: 조건에서 최소 너비를 지정.
• 예: min-width: 769px; → 화면 너비가 769px 이상일 때 적용.
(2) 장치 종류에 따라
• screen: 일반 화면(모니터, 스마트폰, 태블릿 등).
• print: 인쇄 장치.
(3) 해상도와 픽셀 밀도
• resolution: 화면의 해상도를 기준으로 스타일을 적용.
• 예: @media (min-resolution: 300dpi) → 300dpi 이상의 고해상도 화면에만 적용.
3. Grid와 Media 쿼리로 반응형 디자인 만들기
아래 코드로 웹페이지를 실행시켜보면 위 처럼 뜬다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid와 Media Query 예제</title>
<link rel="stylesheet" href="example.css">
</head>
<body>
<div class="grid-container">
<header>Header</header>
<nav>Navigation</nav>
<main>Main Content</main>
<aside>Sidebar</aside>
<footer>Footer</footer>
</div>
</body>
</html>
/* 기본 스타일 */
body {
margin: 0;
font-family: Arial, sans-serif;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: auto auto auto;
gap: 10px;
padding: 10px;
}
header {
grid-column: span 2;
background-color: lightblue;
text-align: center;
padding: 20px;
}
nav {
background-color: lightgreen;
padding: 20px;
}
main {
background-color: lightcoral;
padding: 20px;
}
aside {
background-color: lightgoldenrodyellow;
padding: 20px;
}
footer {
grid-column: span 2;
background-color: lightgray;
text-align: center;
padding: 20px;
}
/* 반응형 디자인 */
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
nav, main, aside, footer {
grid-column: span 1;
}
}
4. Media 쿼리를 더 똑똑하게 쓰는 방법
(1) 조건을 여러 개 지정하기
미디어 쿼리에서 조건을 and, or로 조합 가능하다.
@media (min-width: 768px) and (max-width: 1024px) {
body {
background-color: lightgreen; /* 너비가 768px~1024px일 때 */
}
}
(2) 미디어 쿼리 분기점(Breakpoint)
• 분기점(Breakpoint)은 디자인을 변경하는 지점을 의미한다. 예를 들어:
• 데스크톱: 1200px 이상
• 태블릿: 768px ~ 1199px
• 모바일: 0 ~ 767px
모바일 기기는 사양마다 다르니 체크할 것.
(3) CSS 변수와 결합
미디어 쿼리에서도 CSS 변수를 사용하면 유지보수가 쉬워진다.
:root {
--main-font-size: 16px;
}
@media (max-width: 768px) {
:root {
--main-font-size: 14px;
}
}
body {
font-size: var(--main-font-size);
}
자 그래서..
Media 쿼리란? 화면 크기, 해상도 등 조건에 따라 CSS를 다르게 적용하는 도구.
• 주요 조건
• max-width, min-width: 화면 너비 기준.
• screen, print: 장치 타입 기준.
• resolution: 화면 해상도 기준.
• 반응형 디자인의 핵심
• 모바일 우선 접근 방식을 활용해 점진적으로 디자인을 확장.
• 공통 스타일은 기본에, 변경사항은 미디어 쿼리에 작성.
참고 사이트
'개발하는 디자이너 > 01. 디자이너가 알아두면 좋을 개발 상식' 카테고리의 다른 글
| 프로덕트 디자이너가 알아두면 좋을 개발 상식 08. CSS Animation (0) | 2024.11.20 |
|---|---|
| 프로덕트 디자이너가 알아두면 좋을 개발 상식 07. CSS 실습 (3) | 2024.11.18 |
| 프로덕트 디자이너가 알아두면 좋을 개발 상식 05. CSS 기본 개념과 문법 이해하기 (0) | 2024.11.12 |
| 프로덕트 디자이너가 알아두면 좋을 개발 상식 04. Figma에서 UX/UI 디자이너가 개발자와 소통 잘하는 법 (컴포넌트 네이밍) (1) | 2024.11.11 |
| 프로덕트 디자이너가 알아두면 좋을 개발 상식 03. HTML으로 웹페이지 기본 구조 작성해보기 (1) | 2024.11.08 |