FrontendDevGuide0003

🎨 FrontendDevGuide0003 — CSS 완전 정복 A-Z

💡 이 글을 읽고 나면...
CSS 기본 문법부터 선택자, 박스 모델, Flexbox, Grid, 반응형 디자인, 애니메이션, CSS 변수까지 —
현업에서 CSS를 자신 있게 작성할 수 있는 수준이 됩니다!

📌 예상 학습 기간: 2~3주  |  난이도: ⭐⭐⭐☆☆  |  선수 지식: HTML 기초 (Guide0002)

🎨 1. CSS란? — 웹의 화장사

CSS(Cascading Style Sheets)는 HTML로 만든 뼈대에 색, 크기, 배치, 애니메이션을 입히는 언어입니다.
"Cascading"이라는 이름처럼, 스타일이 위에서 아래로 흘러내려 적용됩니다.

🏠 집으로 비유하면:
HTML = 건물 골조 (뼈대)  |  CSS = 인테리어 (벽지, 페인트, 가구 배치)  |  JS = 전기·기능

📄 CSS를 HTML에 연결하는 3가지 방법:
① 외부 파일 (권장) — <link rel="stylesheet" href="style.css">
② 내부 스타일 — <style> 태그 안에 작성 (html 파일 내)
③ 인라인 스타일 — <h1 style="color:red"> (유지보수 힘들어 비권장)
→ 실무에서는 항상 외부 파일(①)로 분리해서 관리합니다!

📝 2. CSS 기본 문법 — 3가지만 기억하면 된다

📌 CSS 단위(Unit) 완전 정리:
px — 고정 픽셀 (1px = 화면 1픽셀)
% — 부모 요소 대비 비율 (width: 50% → 부모의 절반)
em — 부모 폰트 크기 기준 (1em = 부모 font-size)
rem — 루트(html) 폰트 크기 기준 → 반응형에서 가장 안전
vw/vh — 뷰포트(화면) 너비/높이 기준 (100vw = 화면 전체 너비)
fr — Grid에서만 사용하는 비율 단위 (1fr 1fr = 1:1 비율)
→ 실무 추천: px(고정) + rem(텍스트) + %(레이아웃) + vw/vh(전체 화면)

🎯 3. CSS 선택자 — 정확히 스타일을 적용하는 기술

선택자는 "어떤 요소에 스타일을 적용할지" 지정하는 패턴입니다.
선택자를 잘 알면 불필요한 class 추가 없이도 원하는 요소만 정확히 스타일링할 수 있습니다.

🔥 자주 쓰는 가상 클래스(Pseudo-class) 선택자:
:hover — 마우스를 올렸을 때
:focus — 포커스가 잡혔을 때 (input 클릭 시)
:active — 클릭하고 있는 순간
:nth-child(n) — n번째 자식 요소 (2n = 짝수, 2n+1 = 홀수)
:first-child / :last-child — 첫 번째 / 마지막 자식
:not(.active) — .active가 아닌 요소

⚠️ CSS 우선순위(Specificity) 법칙:
인라인 style > #id > .class > 태그 선택자
같은 우선순위면 나중에 작성된 것이 적용됩니다 (Cascade!)
!important는 모든 우선순위를 무시 — 남용하면 유지보수 지옥!

📦 4. 박스 모델 — CSS 레이아웃의 핵심

HTML의 모든 요소는 박스(Box) 형태로 구성됩니다.
박스 모델을 이해하면 여백 조정, 크기 계산이 훨씬 쉬워집니다.

💡 box-sizing: border-box — 실무 필수 설정!
기본값(content-box)은 width에 padding과 border가 포함되지 않아서 크기 계산이 복잡합니다.
아래 코드를 CSS 파일 최상단에 항상 추가하세요:
*, *::before, *::after { box-sizing: border-box; }
→ 이제 width: 200px → padding/border 포함 200px (직관적!)

📏 margin 단축 표기법:
margin: 10px; → 4방향 모두 10px
margin: 10px 20px; → 상하 10px, 좌우 20px
margin: 10px 20px 30px 40px; → 상 우 하 좌 (시계방향)
margin: 0 auto; → 좌우 auto = 가운데 정렬 (가장 많이 쓰는 패턴!)

🎨 5. 색상과 배경 — 디자인의 기본

🎨 CSS 색상 표현 방법:
이름 — color: red; color: blue; (약 140개 색상명)
HEX — color: #ff6b6b; (16진수, 가장 많이 사용)
RGB — color: rgb(255, 107, 107);
RGBA — color: rgba(255, 107, 107, 0.5); (투명도 0~1)
HSL — color: hsl(0, 100%, 71%); (색상각도, 채도, 밝기)
→ 실무에서는 HEX(#)와 RGBA를 가장 많이 씁니다

🌈 Gradient(그라디언트) — 세련된 배경 만들기:
선형: background: linear-gradient(135deg, #667eea, #764ba2);
방사형: background: radial-gradient(circle, #f093fb, #f5576c);
→ gradients.app, uigradients.com에서 예쁜 그라디언트 코드를 무료로 가져올 수 있어요!

🧱 6. Flexbox — 1차원 레이아웃의 왕

Flexbox는 요소들을 가로 또는 세로 한 방향으로 유연하게 배치하는 현대적 CSS 레이아웃 시스템입니다.
네비게이션 바, 카드 배치, 버튼 그룹 등 대부분의 1차원 레이아웃에 사용합니다.

📋 Flexbox 핵심 속성 총정리:
[컨테이너에 적용]
display: flex — Flexbox 활성화
flex-direction: row(기본) / column — 방향 설정
flex-wrap: nowrap / wrap — 줄 바꿈 여부
justify-content — 주축(기본:가로) 정렬
align-items — 교차축(기본:세로) 정렬
gap: 16px — 아이템 사이 간격 (margin 대신 사용 권장)

[아이템에 적용]
flex: 1 — 남은 공간을 균등하게 차지
flex: 0 0 200px — 고정 크기 200px
align-self: center — 개별 아이템만 세로 정렬 변경
order: 1 — 순서 변경 (작은 숫자가 먼저)

⭐ 완벽한 수직/수평 가운데 정렬 (가장 많이 검색하는 CSS!):
.container { display: flex; justify-content: center; align-items: center; }

🔲 7. CSS Grid — 2차원 레이아웃 마스터

CSS Grid는 행(row)과 열(column)을 동시에 제어하는 2차원 레이아웃 시스템입니다.
복잡한 페이지 전체 레이아웃(header/sidebar/main/footer)에 특히 강력합니다.

📋 Grid 핵심 속성:
display: grid — Grid 활성화
grid-template-columns: 1fr 1fr 1fr — 3열 균등 분할
grid-template-columns: 200px 1fr — 첫 열 고정 + 나머지 자동
grid-template-columns: repeat(3, 1fr) — repeat()로 간결하게
gap: 20px — 행/열 간격
grid-column: 1 / span 2 — 1번 열부터 2칸 차지
grid-template-areas — 이름으로 배치 (직관적!)

📍 8. Position — 요소 위치 완전 정복

position 속성은 요소를 일반 흐름에서 벗어나 원하는 위치에 배치할 때 사용합니다.
모달, 드롭다운, 툴팁, 고정 헤더 등을 만들 때 필수입니다.

position 5가지 값 완전 정리:
static (기본값) — 일반 흐름대로 배치, top/left 무시
relative — 자기 자신의 원래 위치 기준으로 이동 (공간은 유지)
absolute — 가장 가까운 relative 부모 기준 절대 위치 (공간 차지 안 함)
fixed — 브라우저 화면(뷰포트) 기준 고정 (스크롤해도 안 움직임)
sticky — 스크롤 전엔 relative, 임계점 지나면 fixed처럼 동작 (헤더에 많이 사용)

💡 absolute 사용 패턴 (가장 많이 쓰는 형태):
부모에 position: relative 설정 → 자식에 position: absolute 사용
→ 부모 안에서 원하는 위치로 자유롭게 배치 가능!

📱 9. 반응형 디자인 — 모든 화면에서 완벽하게

반응형 디자인(Responsive Design)은 화면 크기에 따라 레이아웃이 자동으로 조절되는 것입니다.
현재 모바일 트래픽이 50% 이상인 만큼, 반응형은 선택이 아닌 필수입니다!

📱 Media Query 사용법:
/* 767px 이하: 모바일 */
@media (max-width: 767px) { .container { flex-direction: column; } }

/* 768px ~ 1023px: 태블릿 */
@media (min-width: 768px) and (max-width: 1023px) { .grid { grid-template-columns: 1fr 1fr; } }

/* 1024px 이상: 데스크톱 */
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } }

📱 Mobile First vs Desktop First:
Mobile First — 모바일 기본, min-width로 확장 (Google 권장 방식)
Desktop First — 데스크톱 기본, max-width로 축소 (기존 방식)
→ 현업에서는 Mobile First가 표준입니다!

✨ 10. CSS 트랜지션 & 애니메이션

CSS만으로도 부드러운 애니메이션 효과를 줄 수 있습니다. JS 없이!

🌊 transition — 상태 변화를 부드럽게:
.btn { background: blue; transition: all 0.3s ease; }
.btn:hover { background: darkblue; transform: scale(1.05); }
→ 마우스 올리면 0.3초에 걸쳐 부드럽게 색상 + 크기 변화!

transition 단축 표기: transition: [속성] [시간] [타이밍함수]
타이밍 함수: ease(기본) / linear / ease-in / ease-out / ease-in-out

🎬 animation + keyframes — 반복/복잡 애니메이션:
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.box { animation: fadeIn 1s ease-in-out; }

animation 속성: 이름 / 시간 / 타이밍 / 딜레이 / 반복횟수(infinite) / 방향

🔄 transform — 변형 효과:
transform: scale(1.1) — 110%로 확대
transform: rotate(45deg) — 45도 회전
transform: translateX(20px) — 오른쪽으로 20px 이동
transform: translateY(-50%) — 세로 50% 위로 이동 (가운데 정렬에 활용!)

🎨 11. 실무에서 자주 쓰는 CSS 속성 총정리

🔧 12. CSS 변수(Custom Properties) — 현업 필수

CSS 변수를 쓰면 색상, 폰트 크기 등을 한 곳에서 관리할 수 있습니다. 실무에서 디자인 시스템의 기반입니다.

CSS 변수 사용법:
/* 변수 정의 (전역) */
:root { --primary: #667eea; --secondary: #764ba2; --font-size-base: 16px; --radius: 8px; }

/* 변수 사용 */
.btn { background: var(--primary); border-radius: var(--radius); }
.title { font-size: var(--font-size-base); color: var(--secondary); }

→ 나중에 브랜드 색상이 바뀌면 :root 한 곳만 수정하면 끝!

🏗️ 13. 현업 CSS 아키텍처 — BEM 방법론

팀 협업에서 CSS 클래스 이름이 충돌하거나 의미를 알 수 없으면 유지보수가 힘들어집니다. BEM은 이 문제를 해결하는 네이밍 규칙입니다.

🧩 BEM(Block-Element-Modifier) 네이밍:
Block — 독립적인 컴포넌트: .card, .button, .header
Element — 블록의 구성 요소: .card__title, .card__image
Modifier — 변형/상태: .button--primary, .card--featured

예시: <div class="card card--featured"><h2 class="card__title">...</h2></div>
→ 클래스 이름만 보고도 구조와 역할을 파악할 수 있습니다!

🛠️ CSS 방법론 비교:
BEM — 가장 많이 쓰이는 네이밍 규칙 (대형 프로젝트에 적합)
SCSS/SASS — CSS를 변수, 중첩, 믹스인으로 확장한 전처리기
CSS Module — 파일 단위 스코프 (React에서 많이 사용)
Tailwind CSS — 유틸리티 클래스 방식 (최근 가장 트렌디)

✅ 핵심 요약 & 학습 체크리스트

"CSS는 외워서 하는 게 아닙니다. 원리를 이해하고, 많이 만들어보면서 손에 익히는 것입니다.
복잡한 레이아웃도 결국 박스 + Flexbox + Grid 조합입니다."

📋 학습 완료 체크리스트:
☐ CSS 기본 문법(선택자, 속성, 값)을 이해했다
☐ px, %, rem, vw 단위의 차이를 안다
☐ 선택자 우선순위(specificity)를 설명할 수 있다
☐ 박스 모델(margin/border/padding/content)을 그릴 수 있다
☐ box-sizing: border-box의 의미를 안다
☐ Flexbox로 수직/수평 가운데 정렬을 할 수 있다
☐ Grid로 3열 레이아웃을 만들 수 있다
☐ position(relative/absolute/fixed)의 차이를 안다
☐ Media Query로 모바일/데스크톱 분기를 할 수 있다
☐ transition으로 hover 애니메이션을 만들었다
☐ CSS 변수(:root, var())를 사용해봤다
☐ BEM 네이밍 규칙을 적용해봤다

🎉 다음 단계: FrontendDevGuide0004 — JavaScript 기초 로 넘어가세요!
HTML/CSS로 멋진 화면을 만들었으니, 이제 동작을 추가할 차례입니다 ⚡