Menu
Coddy logo textTech
학습 시작하기
flag Ko icon한국어down icon
html iconHTML 여정의 일부인기여정

CSS 배우기

무료 인터랙티브 CSS 강의입니다. 모든 레슨에서 실제 HTML에 직접 스타일을 입힙니다 - 선택자, 박스 모델, 색상, 폰트, flexbox, grid, 반응형 디자인 - 입력하는 즉시 실시간 미리보기로 확인하고, 완료하면 무료 수료증을 받습니다. 더 넓은 HTML 여정의 일부이므로 CSS에 필요한 마크업 맥락이 바로 함께 제공됩니다.

학습 시작(무료)
커리큘럼 보기Styling with CSS 플레이그라운드

281,604+ 명의 codders가 등록함

119 개 강의104 챌린지583 퀴즈 문제

  • 초보자 환영
  • sparkles iconAI 코딩 도우미
  • hint icon실습 중심의 대화형 강의
  • volume On icon모든 레슨에 음성 나레이션 제공
  • quiz icon지식을 확인하는 퀴즈
  • certificate icon무료 수료증

커리큘럼

2 섹션3 프로젝트119 개 강의104 챌린지583 퀴즈 문제

이 섹션은 HTML 여정의 일부입니다. 전체 커리큘럼에는 더 많은 섹션이 있어요 - 아래 미리보기를 클릭하면 여정 페이지에서 확인할 수 있습니다.

  1. 섹션 1Fundamentals60 개 강의
  2. 섹션 2

    Styling with CSS

    섹션 시작하기시작펼치기접기    Bring your web pages to life with colors, layouts, and styles76 개 강의100 챌린지419 문제3 프로젝트

    소개

    5 개 강의540

    CSS 적용하기

    4 개 강의725

    기본 선택자

    7 개 강의1247

    텍스트 기초

    8 개 강의1450

    색상과 배경

    5 개 강의834

    카페 메뉴

    프로젝트3 개 강의1

    박스 모델 파트 1

    6 개 강의943

    박스 모델 파트 2

    5 개 강의834

    Flex Box

    6 개 강의943

    로그인 폼

    프로젝트4 개 강의1

    레이아웃 기법

    7 개 강의1151

    반응형 디자인 기초

    6 개 강의1052

    통가 웹페이지

    프로젝트6 개 강의1

    최종 도전 과제

    4 개 강의4
  3. 섹션 3

    CSS Mastery

    섹션 시작하기시작펼치기접기    Take you css skills to the next level!43 개 강의40 챌린지164 문제

    셀렉터 마스터 – 조합

    6 개 강의539

    인터랙티브 가상 클래스

    5 개 강의431

    구조적 가상 클래스

    5 개 강의432

    드롭다운 메뉴 프로젝트

    4 개 강의4

    시각 효과

    5 개 강의536

    랜딩 페이지

    5 개 강의5

    CSS Grid로 구축하기

    4 개 강의426

    Flavor Fiesta 웹사이트

    4 개 강의4

    최종 챌린지

    5 개 강의5
  4. 섹션 4Practical Frontend35 개 강의
  5. 섹션 5JavaScript in Action27 개 강의
HTML 여정 전체 커리큘럼 보기
제공되는 것
코딩을 배우기 위해 사용할 모든 것

Learn by Doing

Write real code, query databases, build websites, and master AI prompts. Our interactive lessons cover every skill modern developers need.

playground.js
Code Editor
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
Test #1test Case Success icon
Test #2test Case Success icon
Test #3test Case Failure icon
Input
"Alex"
Output
"Hello, Coddy! Alex"

Build Your Coding Streak

Stay consistent and watch your progress grow! Track your daily coding habit, protect your streak with freeze days, and earn rewards for showing up every day.

12 days streak

Return tomorrow to keep your streak!

fire Filled icon
left icon

January 2026

right icon

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

21

22

23

24

25

26

27

28

29

30

product Double Or Nothing icon

Double or Nothing

Day 5 of 7

fire Freeze icon

Streak Freeze

2 left

Code Anywhere, Anytime

Take your coding journey on the go! No setup, no downloads - just open and start coding. Available on iOS, Android and Web with 4.9 star ratings.

Python
7Streak
250Score
5Energy
Variables
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Right Done icon
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Left Done icon
journey Hex Active Base iconjourney Hex Active Shadow iconjourney Hex Active Top iconjourney Lesson Theory Challenge icon
CONTINUE
journey Path Right icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson Theory Challenge icon
journey Path Left icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson All icon
Journey
Goals
Leaderboard
Profile
4.9
StarStarStarStarStar
Rating

You're Not Alone in This

Compete on global leaderboards, invite friends to earn rewards, and celebrate each other's wins. Coding is better with friends!

Challenger League
Challenger LeagueTop 7 advance
leaderboard First icon1
avatar 1 icon
fire Filled icon
Alex7+ Days
2840
leaderboard Second icon2
avatar 2 icon
fire Filled icon
Jordan7+ Days
2650
leaderboard Third icon3
avatar 3 icon
fire Filled icon
Sam7+ Days
2420
4
avatar 4 icon
Casey
2180
5
avatar placeholder icon
fire Filled icon
Morgan7+ Days
1950
leaderboard Arrow Up iconPromotion zoneleaderboard Arrow Up icon

Every way to learn

Read, listen, test yourself, ask the AI, or look up anything you've already covered. Every lesson meets you where you are.

Intro to Variables
Audio

A variable is a named container that stores a value you can reference later in your program.

In Python, you create one by writing the name, an equals sign, then the value you want to store.

The value can change over time - reassigning the name simply points it to a new value.

1xSarah

Prove Your Skills

Earn certificates for every course you complete. Add them to your LinkedIn profile and resume to showcase your coding expertise to employers.

CoddyCertificate of Completion
This certifies thatJohn Doehas successfully completed
PythonPython Fundamentals
Verified
DateJan 2026
LinkedInAdd to LinkedIn

Coddy로 CSS를 배워야 하는 이유

  • 브라우저에서 CSS를 작성하고 페이지가 실시간으로 다시 스타일링되는 모습을 지켜보세요. 빌드 단계도, 에디터 설정도 없습니다. 선택자나 속성을 바꿀 때마다 즉시 반영되어 각 규칙이 실제로 무엇을 하는지 직접 확인할 수 있습니다.
  • 핵심 CSS: 선택자와 명시도, 박스 모델, 포지셔닝, flexbox, CSS grid, 트랜지션, 미디어 쿼리, 그리고 반응형 디자인. 모든 프런트엔드 개발자가 매일 사용하는 CSS입니다.
  • AI 힌트는 항상 사람들을 헷갈리게 하는 것들 - 명시도로 인한 의외의 결과, 레이아웃 오버플로, 이상한 flexbox 동작 - 을 정답을 미리 알려주지 않으면서 디버깅하도록 도와줍니다. 그래서 CSS가 마법처럼 느껴지는 대신 직관적으로 다가옵니다.
  • 섹션을 완료하면 무료 CSS 수료증을 받습니다. HTML, JavaScript 강의와 자연스럽게 어우러져 탄탄한 프런트엔드 기초를 완성합니다.

CSS 학습에 관한 자주 묻는 질문

CSS란 무엇인가요?

CSS(Cascading Style Sheets)는 HTML 페이지가 어떻게 보일지를 제어하는 언어입니다 - 색상, 폰트, 간격, 레이아웃, 애니메이션, 그리고 화면 크기에 따른 반응형 동작까지요. HTML은 페이지에 무엇이 있는지를 정의하고, CSS는 그것이 어떻게 표현되는지를 정의합니다.

CSS는 배우기 어렵나요?

기본적인 CSS - 선택자, 색상, 폰트, 박스 모델 - 는 몇 시간이면 쉽게 익힐 수 있습니다. 더 어려운 부분은 나중에 나옵니다: 명시도 규칙, flexbox와 grid 레이아웃, 그리고 모든 화면 크기에서 보기 좋게 만드는 일이죠. 이 강의는 실시간 미리보기와 함께 작은 단계로 이것들을 소개하므로, 각 규칙이 정확히 무엇을 하는지 직접 확인할 수 있습니다.

CSS보다 HTML을 먼저 배워야 하나요?

네. HTML은 페이지의 구조를 정의하고, CSS는 그것에 스타일을 입힙니다. HTML이 없으면 스타일을 입힐 대상도 없습니다. 이 CSS 섹션이 HTML 여정의 일부인 이유가 바로 그것입니다 - HTML 기초 섹션이 먼저 나오고, 그다음 여정의 대부분을 그것에 스타일을 입히며 보냅니다.

CSS, Flexbox, Grid의 차이는 무엇인가요?

Flexbox와 Grid는 CSS 안의 레이아웃 모듈입니다 - 별개의 기술이 아니라 CSS의 기능이죠. Flexbox는 1차원 레이아웃(카드 한 줄, 내비게이션 바)에 가장 적합합니다. Grid는 2차원 레이아웃(페이지 전체, 복잡한 카드 배치)에 가장 적합합니다. 실제 사이트 대부분은 둘 다 사용하며, 이 강의는 각각을 언제 꺼내 써야 하는지 다룹니다.

CSS를 온라인에서 무료로 배울 수 있나요?

네. 인터랙티브 CSS 섹션은 무료입니다 - 전체 레슨, 코딩 연습, 실시간 미리보기, 그리고 수료증까지요. 모든 것이 브라우저에서 실행되므로 시작하기 위해 에디터나 도구를 설치할 필요가 없습니다.

CSS 강의를 마치면 수료증을 받나요?

네. CSS 섹션을 완료하면 무료 수료 증명서를 받습니다. 이력서에 추가하거나 HTML, JavaScript 수료증과 함께 LinkedIn에 공유하여 프런트엔드 포트폴리오의 일부로 활용할 수 있는, 검증 가능한 증거가 됩니다.
Coddy programming languages illustration

Learn Styling with CSS with Coddy

시작하기