레이아웃 Flex와 Grid

1. 모던 CSS (Modern CSS)

 

현대 CSS의 주요 기능.

• CSS 변수 (Custom Properties) : --main-color: #3498ab; 와 같이 변수를 선언하고, var (--main-color) 로 재사용할 수 있음. 다크 모드 구현이나 전체적인 테마 변경이 매우 쉬워짐.
• Flexbox와 Grid : 복잡한 계산 없이도 유연하고 반응형인 레이아웃을 손쉽게 만들 수 있음. 
• 트랜지션(Transition)과 애니메이션(@keyframes) : 요소의 상태 변화나 복잡한 움직임을 부드러운 애니메이션으로 구현.
• 계산 함수 (`calc()`) : width: calc(100% - 80px); 처럼 서로 다른 단위(%, px, em 등)를 섞어서 동적으로 크기를 계산할 수 있어 반응형 디자인에 매우 유용.

HTML + CSS 만으로도 웹페이지를 만들 수 있다

JavaScript 가 없어도, CSS의 가상 클래스 (:hover, :focus 등) 와 다양한 속성을 조합하면 충분히 인터랙티브한 컴포넌트를 만들 수 있음.

 

과도한 JavaScript 사용의 단점

JavaScript는 강력하지만, 모든 것을 해결하기 위해 사용하는 것은 여러 단점을 야기함.

 

"구조는 HTML, 표현은 CSS, 동작은 JavaScript" 라는 웹의 기본 원칙을 지키는 것이 중요.

 

• 성능 저하 : 브라우저는 JavaScript 코드를 다운로드, 해석, 실행하기 전까지 페이지 랜더링을 멈춤. 불필요한 JS 파일이 많아질수록 초기 로딩 속도는 현저히 느려짐. CSS 애니메이션은 GPU 가속을 통해 더 부드럽게 동작하는 경우가 많음.
• 유지보수의 어려움 : 스타일과 관련된 코드가 CSS 파일과 JS 파일 양쪽에 흩어져 있으면, 코드를 이해하고 수정하기가 매우 어려워짐. 디자인 변경을 위해 JS 코드까지 분석해야 하는 상황이 발생.
• 견고함 부족 : 만약 JavaScript 파일 로딩에 실패하거나 코드 실행 중 에러가 발생하면, JS에 의존하는 모든 시각적 요소와 기능이 한꺼번에 망가질 수 있음. 반면, CSS로 구현된 부분은 JavaScript 의 동작 여부와 상관없이 안정적으로 화면에 표시.

2. Flexbox

1차원 레이아웃의 지배자, Flexbox

Flexbox 핵심 개념

Flexbox는 정렬하고 싶은 아이템들을 감싸는 부모 요소(Container)와, 정렬될 자식 요소(Items)라는 두 가지 개념으로 동작.

사용법은 부모 요소에 display: flex; 를 적용하는 것에서 시작.

 

축 (Axis)

Flexbox 에서 가장 중요한 것은 축을 이해하는 것임. 

중심 축 (Main Axis) : 아이템들이 배치되는 주된 방향. (기본값 : 가로 방향)

교차 축 (Cross Axis) : 중심 축과 수직을 이루는 축. (기본값: 세로 방향)

 

Container 속성 실습

Flexbox의 대부분의 정렬은 부모 요소인 Container에 속성을 지정하는 것으로 이루어짐.

 

display: flex; : 자식 요소들을 Flexxbox 레이아웃으로 만듬.

flex-direction: row | column; : 중심 축의 방향을 설정. ( row : 가로, column : 세로 )

• justify-content: ...; : 중심 축 (Main Axis) 방향으로 아이템들을 정렬. (가장 중요.)

•    flex-start : 시작점으로 정렬`
•    flex-end : 끝점으로 정렬
•    center : 중앙으로 정렬
•    space-between : 아이템들 사이에만 균등한 간격을 만듦
•    space-around : 아이템 둘레에 균등한 간격을 만듦

• align-items: ...; : 교차 축 (Cross Axis) 방향으로 아이템들을 정렬.

• stretch : 아이템들을 교차 축 방향으로 꽉 채움 (기본값)
• flex-start : 시작점으로 정렬
• center : 중앙으로 정렬

• flex-wrap: wrap; : 아이템들이 한 줄에 다 들어가지 않을 때, 줄바꿈을 허용.
• gap : 10px; : 아이템들 사이의 간격을 지정.

3. 2차원 레이아웃의 설계자, CSS Grid

 

Grid vs Flexbox: 어떤 상황에 어느것을 고를지?

 

Flexbox 와 Grid는 둘 다 강력한 레이아웃 도구, 하지만 목적이 다름.

 

특징	Flexbox (1차원)	Grid (2차원)
주요 목적	콘텐츠 (아이템) 정렬	레이아웃 (구조) 설계
차원	한 번에 한 방향 (가로 또는 세로)만 제어	가로(열)와 세로(행)를 동시에 제어
접근 방식	Content-first (내용물 우선)	Layout-first (구조 우선)

 

일반적으로, 페이지의 전체적인 큰 틀 (헤더, 사이드바, 본문 등)은 Grid로 잡고, 그 안의 개별 컴포넌트(내비게이션 메뉴 등)는 Flexbox로 정렬하는 방식을 많이 사용.

 

Grid 핵심 개념

Grid 역시 Flexbox처럼 부모 요소인 Container와 자식 요소인 Items로 구성.

 

• display : gridl; : 자식 요소들을 Grid 레이아웃으로 만듬.
• grid-template-columns / rows : Grid의 핵심 속성, 열(column)과 행(row)의 크기와 개수를 정의.

•  grid-template-columns: 200px 1fr 1fr; : 1열은 200px, 2열과 3열은 남은 공간을 1:1 비율로 나눠가짐
•  grid-template-row: 100px auto 100px; : 1행은 100px, 2행은 내용물 크기에 따라 자동 조절, 3행은 100px

• fr 단위 : `fraction(부분)`의 약자로, 사용 가능한 공간을 지정된 비율로 나누어 차지하는 유연한 단위.
• gap: 20px; : 아이템들 사이의 간격(여백)을 지정.

아이템 배치하기

Grid의 강력한 기능 중 하나, 특정 아이템이 여러 개의 열이나 행에 걸쳐 있도록 배치.

 

grid-column: 시작-라인 / 끝-라인; : 아이템이 위치할 열의 시작 선과 끝 선을 지정. (예: 1 / 3 은 1번 라인에서 시작해서 3번 라이엔에서 끝남 = 2칸 차지)

grid-row: 시작-라인 / 끝-라인; : 아이템이 위치할 행의 시작 선과 끝 선을 지정.

 

4. 반응형 디자인을 위한 미디어 쿼리

미디어 쿼리(Media Query) 는 CSS의 @media 규칙을 사용, 특정 조건 (예: 화면의 너비)에 따라 다른 CSS 스타일을 적용하는 기술. "만약 화면 너비가 768px 이상이라면, 이 스타일을 적용해라"와 같은 조건문을 CSS에 추가하는 것.

 

모바일 우선 (Mobile-First) 접근법

 현대 웹 개발에서는 작은 화면(모바일)의 스타일을 기본으로 먼저 작성, 미디어 쿼리를 이용해 화면이 커질수록 레이아웃을 추가하거나 변경하는 모바일 우선 접근법 권장. 코드가 더 간결해지고 유지보수가 쉬움.

 

유동적인 단위

px 과 같은 고정 단위만 사용하면 화면 크기가 변할 때 유연하게 대응하기 어려움. 상황에 따라 상대적인 크기를 갖는 유동적인 단위를 사용하면 더욱 자연스러운 반응형 디자인이 됨.

 

단위	설명	주요 사용처
%	부모 요소의 크기에 대한 백분율	요소의 너비 (width)
vw	화면(Viewport) 너비의 1/100	전체 화면을 차지하는 섹션, 유동적인 폰트 크기
vh	화면(Viewport) 높이의 1/100	전체 화면을 차지하는 섹션의 높이
rem	HTML 최상위 요소(root)의 폰트 크기에 대한 배수	폰트 크기, 여백(padding, margin)등 전반적인 간격

 

현대적인 반응형 기법

미디어 쿼리 남용시 코드가 복잡해짐. 최신 CSS는 미디어 쿼리 사용을 최소화하면서 유연하게 반응하는 레이아웃을 만들 수 있는 기능들을 제공.

 

• Flexbox / Grid의 유연함: flex-wrap: wrap; 이나 grid-template-columns: repeat (auto-fill, ...); 같은 속성은 아이템이 공간이 부족할 때 자동으로 줄바꿈되거나 열의 개수가 조절되게 하여, 그 자체로 반응현 디자인을 구현.
• clamp() 함수: clamp(최솟값, 기준값, 최댓값) 형태로 사용하여,, 값이 특정 범위 내에서만 유동적으로 변하도록 `제한`을 걸 수 있음.

[예시] font-size: clamp(16px, 4vw, 24px);

"폰트 크기는 화면 너비의 4%를 기준으로 하되, 아무리 작아져도 16px 밑으로 내려가지 말고, 아무리 커져도 24px를 넘어가지 마라" 는 의미. 미디어 쿼리를 줄이는데 탁월한 기능.

 

5. JavaScript 없는 인터랙션과 테마 구현

 

CSS 변수 (Custom Properties)

CSS 변수는 CSS 값 (색상, 폰트 크기 등)을 재사용할 수 있도록 `별명`을 붙여주는 기능.

프로젝트 전체의 테마 색상이나 공통 간격 등을 변수로 관리, 단 한 줄만 수정하여 사이트 전체의 디자인을 일관되게 변경할 수 있어 유지보수성이 향상됨.

 

• 선언: --변수이름: 값; 형태로, :root 선택자 안에서 선언해 전역 변수로 사용.
• 사용: var(--변수이름) 함수를 사용하여 변수의 값을 불러옴.

부드러운 변화, `transition`

 

transition 속성은 특정 CSS 속성의 값이 바뀔 때, 그 변화 과정을 부드러운 애니메이션처럼 보여줌.

주로 :hover 와 같이 요소의 상태가 변할 때 사용해 사용자 경험을 풍부하게 만듬.

 

다채로운 움직임, `transform`

 

transform 속성은 요소의 모양이나 위치를 변형시킴. 레이아웃의 흐름에 영향을 주지 않으면서 요소를 이동, 크기를 조절, 회전시킴. 다른 컨텐츠 위치는 그대로 유지.

 

• translate(x, y) : 요소를 수평(x), 수직(y)으로 이동.
• scale(배수) : 요소의 크기를 확대하거나 축소. (예: 1.1 은 110%  확대)
• rotate(각도) : 요소를 회전. (예: 10deg 는 10도 회전)