CSS 배워서 어디에 쓸까?

CSS3를 배우면 무엇을 만들 수 있을까요? 이 챕터에서는 CSS로 만들 수 있는 것들을 레벨별로 정리하고, 어디에 활용할 수 있는지, 어떻게 시작하는지 한눈에 보여드립니다.

🎨 CSS로 만들 수 있는 것들 — 레벨별 가이드

🟢 레벨 1: 입문 (HTML에 옷 입히기)

가장 기본적인 CSS 활용입니다. HTML 뼈대에 색상, 폰트, 간격을 추가합니다.

만들 수 있는 것:

• 색상과 폰트가 적용된 이력서 페이지
• 배경색 + 여백이 잡힌 블로그 글
• 밑줄 없는 링크, 동그란 프로필 이미지
• 간단한 카드 UI (border + padding + shadow)

핵심 속성: color, font-size, margin, padding, background, border, border-radius, box-shadow

🟡 레벨 2: 중급 (레이아웃 마스터)

웹 페이지의 구조를 잡는 단계입니다. 이것만 알면 대부분의 웹사이트 레이아웃을 만들 수 있습니다.

만들 수 있는 것:

• 2단/3단 레이아웃 (사이드바 + 메인 콘텐츠)
• 네비게이션 바 (수평 메뉴)
• 카드 그리드 (쇼핑몰 상품 목록)
• 반응형 레이아웃 (모바일/태블릿/데스크톱 자동 대응)
• 센터 정렬 (가로·세로 완벽 중앙)

핵심 속성: display: flex, display: grid, media queries, position, gap

🔵 레벨 3: 고급 (애니메이션 & 인터랙션)

자바스크립트 없이 CSS만으로 움직이는 UI를 만듭니다.

만들 수 있는 것:

• 버튼 호버 효과 (색상 변경, 크기 확대)
• 페이지 로딩 스피너
• 드롭다운 메뉴 (CSS only)
• 슬라이드 인/아웃 애니메이션
• 다크 모드 전환
• 스크롤 기반 애니메이션
• 3D 카드 플립 효과

핵심 속성: transition, animation, @keyframes, transform, :hover, :focus, prefers-color-scheme

🟣 레벨 4: 실전 (프레임워크 & 시스템)

대규모 프로젝트에서 CSS를 효율적으로 관리하는 단계입니다.

만들 수 있는 것:

• 디자인 시스템 (색상/폰트/간격 토큰)
• 재사용 가능한 컴포넌트 라이브러리
• Tailwind CSS 기반 프로덕션 UI
• CSS-in-JS (styled-components)
• 접근성 준수 디자인 (고대비, 포커스 스타일)

핵심 도구: Tailwind CSS, CSS Modules, CSS Variables, PostCSS

💼 CSS를 배우면 할 수 있는 일

취업

• 프론트엔드 개발자: HTML+CSS+JS 필수. CSS 없이 프론트엔드는 불가능.
• UI/UX 개발자: 디자인을 실제 웹으로 구현하는 전문가.
• 퍼블리셔/마크업 개발자: 디자인 시안을 정확한 CSS로 변환.
• 이메일 마케터: HTML 이메일 템플릿 제작 (CSS 제약이 독특해서 전문 수요 존재).

프리랜싱

• 소규모 웹사이트 제작: 프로젝트당 30~300만원
• 랜딩 페이지 전문: 한 페이지 50~150만원
• 기존 사이트 반응형 개선: 건당 30~100만원
• Tailwind CSS 커스텀 작업

1인 창업 & 사이드 프로젝트

• 자체 서비스의 UI를 직접 구현 (디자이너 비용 절약)
• 블로그/포트폴리오 → SEO → 광고 수익
• CSS 애니메이션 라이브러리 오픈소스 → 인지도 확보
• 디자인 템플릿 판매 (Gumroad/ThemeForest)

AI 시대에 더 중요해진 이유

AI(Cursor, Copilot)가 CSS 코드를 생성해주지만:

• AI가 생성한 CSS가 올바른지 판단하려면 CSS를 알아야 합니다
• 반응형이 깨졌을 때 고치려면 media query를 이해해야 합니다
• 접근성 문제를 발견하려면 포커스 스타일, 고대비를 알아야 합니다
• AI는 도구이고, CSS 지식은 그 도구를 지휘하는 능력입니다

🚀 지금 바로 시작하는 방법

💻 환경별 설정 가이드

🌐 공용 컴퓨터 / 설치 불가 환경

설치 없이 브라우저만으로 바로 시작할 수 있습니다:

1. CodePen (가장 추천): https://codepen.io

   • 회원가입 후 'New Pen' 클릭
   • HTML/CSS/JS 3칸 에디터 + 실시간 미리보기
   • 저장·공유 가능

2. JSFiddle: https://jsfiddle.net

   • 회원가입 없이 바로 사용 가능

3. StackBlitz: https://stackblitz.com

   • 전체 프로젝트(React+CSS) 가능

4. 이 사이트(OHS) 실습 페이지:

   • 각 챕터 하단 '실습 페이지로 이동' 클릭
   • 브라우저에서 바로 코드 수정 + 결과 확인

🪟 Windows

1. VS Code 설치: https://code.visualstudio.com
2. 추천 확장 프로그램:
   • Live Server (실시간 미리보기)
   • CSS Peek (CSS 정의로 이동)
   • IntelliSense for CSS class names
   • Tailwind CSS IntelliSense
   • Korean Language Pack
3. 폴더 생성 → index.html + style.css 만들기
4. Live Server로 브라우저 실시간 확인

🍎 macOS

1. VS Code 설치: https://code.visualstudio.com (또는 이미 설치된 Xcode의 텍스트 에디터 사용 가능)
2. 위 Windows와 동일한 확장 프로그램 설치
3. 터미널: mkdir my-css-project && cd my-css-project
4. code . 으로 VS Code 열기

📱 태블릿/모바일 (임시 학습용)

• Replit: https://replit.com (모바일 브라우저에서 코딩 가능)
• Chrome DevTools: 모바일 Chrome에서도 chrome://inspect 활용

☁️ GitHub Codespaces (어디서든 동일 환경)

1. GitHub 로그인 → 아무 저장소에서 . 키
2. 브라우저에서 VS Code가 열림
3. 확장 프로그램 설치 + 코딩 시작
4. 컴퓨터가 바뀌어도 환경 동일

📝 CSS 학습용 AI 프롬프트

🟢 기초 프롬프트

나는 CSS를 처음 배우는 학생이야.
box model(margin, padding, border)이 뭔지
택배 상자에 비유해서 설명해줘.
실제 코드 예시도 포함해줘.

🟡 중급 프롬프트

Flexbox와 Grid의 차이를 알려줘.
같은 레이아웃(헤더+사이드바+메인+푸터)을
Flexbox로 만든 코드와 Grid로 만든 코드를
나란히 비교해줘.
각각 언제 쓰는 게 좋은지 알려줘.

🔵 고급 프롬프트

자바스크립트 없이 CSS만으로
다크 모드 + 반응형 + 애니메이션이 있는
포트폴리오 사이트의 CSS 구조를 설계해줘.

포함:
- CSS Variables로 테마 관리
- prefers-color-scheme 미디어 쿼리
- 모바일 퍼스트 반응형 (375px→768px→1024px)
- 스크롤 기반 fadeIn 애니메이션
- 접근성 (focus-visible, reduced-motion)

🗺️ 학습 로드맵: CSS → 프로덕션 서비스

CSS3 (이 트랙) ← 지금 여기!
  ↓
Tailwind CSS (유틸리티 프레임워크)
  ↓
React/Vue + CSS Modules
  ↓
Next.js (풀스택)
  ↓
배포 (Vercel) → 수익화

CSS는 웹의 옷입니다. HTML이 뼈대라면 CSS는 디자인입니다. 이 트랙을 마치면 어떤 디자인이든 웹으로 구현할 수 있습니다.

💻 CSS 레벨별 데모 코드

/* CSS 레벨별 데모 — 한 파일로 체험 */

/* 🟢 레벨 1: 기본 스타일링 */
.card {
  background: #1e293b;
  color: #e2e8f0;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  max-width: 400px;
}

.card h2 {
  color: #10b981; /* OHS 그린 */
  font-size: 1.5rem;
  margin-bottom: 8px;
}

/* 🟡 레벨 2: Flexbox 레이아웃 */
.layout {
  display: flex;
  gap: 20px;
}

.sidebar {
  width: 250px;
  flex-shrink: 0;
}

.main {
  flex: 1; /* 남은 공간 전부 차지 */
}

/* 🟡 레벨 2: 반응형 (모바일 퍼스트) */
@media (max-width: 768px) {
  .layout {
    flex-direction: column; /* 모바일: 세로 쌓기 */
  }
  .sidebar {
    width: 100%;
  }
}

/* 🔵 레벨 3: 애니메이션 */
.button {
  background: #10b981;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease; /* 부드러운 전환 */
}

.button:hover {
  background: #059669;
  transform: translateY(-2px); /* 살짝 위로 */
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

/* 🔵 레벨 3: 로딩 스피너 (JS 불필요) */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #334155;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* 🔵 레벨 3: 다크 모드 자동 전환 */
:root {
  --bg: #ffffff;
  --text: #1e293b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --text: #e2e8f0;
  }
}

body {
  background: var(--bg);
  color: var(--text);
}

/* 🟣 레벨 4: CSS Variables 디자인 토큰 */
:root {
  --color-primary: #10b981;
  --color-bg: #0f172a;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --radius: 8px;
  --font-body: 'Pretendard', sans-serif;
}

/*
  💡 이 한 파일에 CSS 4단계가 모두 들어있습니다:
  레벨 1: color, padding, border-radius, box-shadow
  레벨 2: flex, gap, @media (반응형)
  레벨 3: transition, @keyframes, :hover, prefers-color-scheme
  레벨 4: CSS Variables (--custom-property)
  
  → 다음 챕터에서 기업들이 이 기술을 어떻게 사용하는지 봅니다!
*/