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

CSS 배우기

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

학습 시작(무료)
커리큘럼 보기CSS로 스타일링하기 플레이그라운드

336,814+ 명의 codders가 등록함

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

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

커리큘럼

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

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

  1. 섹션 1기초60 개 강의
  2. 섹션 2

    CSS로 스타일링하기

    섹션 시작하기시작펼치기접기    색상, 레이아웃, 스타일로 웹 페이지를 생동감 있게 만드세요76 개 강의100 챌린지418 문제3 프로젝트

    소개

    5 개 강의540

    CSS 추가

    4 개 강의725

    기본 선택자

    7 개 강의1247

    텍스트 기초

    8 개 강의1450

    색상과 배경

    5 개 강의834

    카페 메뉴

    프로젝트3 개 강의1

    박스 모델 1부

    6 개 강의943

    박스 모델 2부

    5 개 강의833

    Flex Box

    6 개 강의943

    로그인 폼

    프로젝트4 개 강의1

    레이아웃 기법

    7 개 강의1151

    반응형 디자인 기초

    6 개 강의1052

    Tonga 웹페이지

    프로젝트6 개 강의1

    최종 과제

    4 개 강의4
  3. 섹션 3

    CSS 마스터

    섹션 시작하기시작펼치기접기    CSS 실력을 다음 단계로 끌어올리세요!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. 섹션 4실전 프론트엔드35 개 강의
  5. 섹션 5JavaScript 실전27 개 강의
HTML 여정 전체 커리큘럼 보기
제공되는 것
코딩을 배우기 위해 사용할 모든 것

해보면서 배우기

실제 코드를 작성하고, 데이터베이스를 쿼리하고, 웹사이트를 구축하고, AI 프롬프트를 마스터하세요. 인터랙티브 레슨으로 현대 개발자에게 필요한 모든 기술을 다룹니다.

playground.js
코드 편집기
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
테스트 #1test Case Success icon
테스트 #2test Case Success icon
테스트 #3test Case Failure icon
입력
"Alex"
출력
"Hello, Coddy! Alex"

연속 기록을 쌓아보세요

꾸준히 하고 성장하는 모습을 지켜보세요! 매일 코딩 습관을 추적하고, 동결 기능으로 연속 기록을 보호하고, 매일 참여해서 보상을 받으세요.

12 일 연속

내일도 돌아와서 연속 기록을 유지하세요!

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

더블 오어 낫싱

7일 중 5일차

fire Freeze icon

연속 기록 동결

2 left

어디서나 코딩하세요

코딩 여정을 함께 하세요! 설정도, 다운로드도 필요 없이 바로 열어서 코딩을 시작하세요. iOS, Android, 웹에서 4.9점 평점으로 이용 가능합니다.

Python
7스트릭
250점수
5에너지
변수
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
계속하기
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
여정
목표
리더보드
프로필
4.9
별별별별별
평점

당신은 혼자가 아닙니다

글로벌 리더보드에서 경쟁하고, 친구를 초대해서 보상을 받고, 서로의 성공을 축하하세요. 코딩은 친구와 함께하면 더 좋아요!

챌린저 리그
챌린저 리그상위 7명 승급
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 icon승급 구역leaderboard Arrow Up icon

모든 방식으로 학습

읽고, 듣고, 스스로 확인하고, AI에게 묻고, 이미 배운 내용을 찾아보세요. 모든 수업이 당신에게 맞춰집니다.

변수 입문
오디오

변수는 나중에 프로그램에서 참조할 값을 저장하는, 이름이 있는 컨테이너입니다.

Python에서는 이름, 등호, 저장할 값을 차례대로 써서 만듭니다.

값은 시간이 지나며 바뀔 수 있습니다. 재할당하면 그 이름이 새로운 값을 가리킵니다.

1xSarah

수료증을 받으세요

완료한 모든 코스에 대해 인증서를 받으세요. LinkedIn 프로필과 이력서에 추가하여 고용주에게 코딩 전문성을 보여주세요.

Coddy수료증
이 인증서는홍길동성공적으로 완료했음을 증명합니다
python iconPython 기초
인증됨
날짜2026년 1월
LinkedInLinkedIn에 추가

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 프로그래밍 언어 일러스트

Coddy와 함께 CSS로 스타일링하기 배우기

시작하기