🖋️ CSS 의 Flex 와 Grid 로 반응형 레이아웃 설계 기록하기
FLEX"한 방향 레이아웃"
Flex Container
- Flexbox 레이아웃을 적용할 부모 요소
- "display: flex" 또는 "display: inline-flex" 지정
Flex Items
- Flex Container 내부의 직접적인 자식 요소들
- Flex Container 내부의 직접적인 자식 요소들
주 축과 교차 축
- Flex Box 의 레이아웃 방향을 결정
- 주 축은 "flex-direction" 속성으로 설정
- 교차 축은 주 축에 수직
@ 설계 방법
- 핵심 요소 정의
- flex-container 와 flex-items 결정
- 레이아웃 방향 설정
- flex-direction 을 사용하여 주 축의 방향 설정
- row 또는 column
- 공간 분배
- justify-content, align-items, align-content 를 사용하여 항목 간 간격과 정렬 조정
- 항목 크기 조정
- flex-grow, flex-shrink, flex-basis 를 사용하여 flex items 의 확장 및 축소 비율 조정
- 핵심 요소 정의
// App.js
import React from 'react';
import './App.css';
function App() {
return (
<div className="flex-container">
<header className="header">Header</header>
<aside className="sidebar">Sidebar</aside>
<main className="content">Content</main>
<footer className="footer">Footer</footer>
</div>
);
}
export default App;/* App.css */
.flex-container {
display: flex; /* Flexbox 레이아웃 정의 */
flex-direction: column; /* 자식 요소들을 세로로 정렬 */
min-height: 100vh; /* 최소 높이를 뷰포트의 100%로 설정 */
}
.header, .footer {
background-color: #f3f3f3; /* 배경색 설정 */
text-align: center; /* 텍스트를 가운데 정렬 */
padding: 1rem; /* 내부 여백을 설정 */
}
.content {
flex: 1; /* 나머지 공간을 모두 차지하도록 설정 */
background-color: #fff; /* 배경색을 흰색 */
padding: 1rem; /* 내부 여백을 설정 */
}
.sidebar {
background-color: #e9e9e9; /* 배경색 설정 */
padding: 1rem; /* 내부 여백을 설정 */
order: -1; /* 기본 순서보다 먼저 표시되도록 설정 */
}
/* 화면 너비가 768px 이상일 때 */
@media (min-width: 768px) {
/* 자식 요소들을 가로로 정렬 */
.flex-container {
flex-direction: row;
}
/* 컨텐츠와 사이드바가 공간을 동등하게 차지하도록 설정 */
.content, .sidebar {
flex: 1;
}
}GRID"두 방향 레이아웃"
Grid Container
- Grid 레이아웃을 적용할 부모 요소
- "display: grid" 또는 "display: inline-grid" 지정
Grid Lines
- Grid의 행과 열을 구분하는 선
- 항목을 배치할 때 이 선을 기준
Grid Tracks
- Grid 선 사이의 공간 (행 또는 열)
- Grid 선 사이의 공간 (행 또는 열)
Grid Cells
- Grid의 단일 단위 공간
- Grid 아이템이 위치할 수 있는 가장 작은 단위
Grid Areas
- 여러 개의 Grid Cell을 결합한 영역
- 복잡한 레이아웃을 쉽게 구성
@ 설계 방법
- 그리드 구조 정의
- grid-template-rows, grid-template-columns를 사용
- 그리드의 행과 열 크기를 정의
- 항목 배치
- grid-row, grid-column, grid-area 속성을 사용
- grid items를 정확한 위치에 배치
- 반응형 디자인
- auto-fill, auto-fit과 같은 키워드와 함께 minmax() 함수를 사용
- 유연한 그리드 트랙 크기를 정의하고, 다양한 화면 크기에 맞게 레이아웃을 조정
- 그리드 구조 정의
// App.js
import React from 'react';
import './App.css';
function App() {
return (
<div className="grid-container">
<header className="header">Header</header>
<aside className="sidebar">Sidebar</aside>
<main className="content">Content</main>
<footer className="footer">Footer</footer>
</div>
);
}
export default App;/* App.css */
.grid-container {
display: grid; /* Grid 레이아웃 정의 */
grid-template-columns: 1fr; /* 한 열만 있는 그리드 구조를 생성 */
/* 행의 크기를 헤더와 푸터는 내용에 맞게 */
/* 본문은 나머지 공간을 차지하도록 설정 */
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header"
"content"
"footer"; /* 그리드 영역 이름 설정 */
min-height: 100vh; /* 최소 높이를 뷰포트의 100%로 설정 */
}
.header {
grid-area: header; /* 헤더 영역을 지정 */
background-color: #f3f3f3; /* 배경색 설정 */
text-align: center; /* 텍스트를 가운데 정렬 */
padding: 1rem; /* 내부 여백을 설정 */
}
.content {
grid-area: content; /* 본문 영역을 지정 */
background-color: #fff; /* 배경색을 흰색으로 설정 */
padding: 1rem; /* 내부 여백을 설정 */
}
.sidebar {
grid-area: sidebar; /* 사이드바 영역을 지정 */
background-color: #e9e9e9; /* 배경색 설정 */
padding: 1rem; /* 내부 여백을 설정 */
display: none; /* 초기 상태에서는 사이드바를 숨기기 */
}
.footer {
grid-area: footer; /* 푸터 영역을 지정 */
background-color: #f3f3f3; /* 배경색 설정 */
text-align: center; /* 텍스트를 가운데 정렬 */
padding: 1rem; /* 내부 여백을 설정 */
}
/* 화면 너비가 768px 이상일 때 */
@media (min-width: 768px) {
.grid-container {
/* 1열은 사이드바, 3열은 컨텐츠 영역으로 분할 */
/* 사이드바가 컨텐츠보다 상대적으로 좁게 설정 */
grid-template-columns: 1fr 3fr;
/* 헤더와 푸터는 내용에 따라 높이가 자동으로 조정 */
/* 본문(content) 영역은 남은 공간을 모두 차지하도록 설정 */
grid-template-rows: auto 1fr auto;
/* 그리드 영역 재배치 */
grid-template-areas:
/* 헤더 영역을 두 열 모두 차지하도록 설정 */
"header header"
/* 사이드바와 컨텐츠를 옆으로 배치 */
"sidebar content"
/* 푸터 영역을 두 열 모두 차지하도록 설정 */
/* 헤더와 푸터는 전체 너비를 사용 */
/* 사이드바와 컨텐츠는 옆으로 나란히 배치 */
"footer footer";
}
.sidebar {
display: block; /* 사이드바 표시 */
}
}
일단 한다