HTML 여정의 일부여정CSS 배우기
무료 인터랙티브 CSS 강의입니다. 모든 레슨에서 실제 HTML에 직접 스타일을 입힙니다 - 선택자, 박스 모델, 색상, 폰트, flexbox, grid, 반응형 디자인 - 입력하는 즉시 실시간 미리보기로 확인하고, 완료하면 무료 수료증을 받습니다. 더 넓은 HTML 여정의 일부이므로 CSS에 필요한 마크업 맥락이 바로 함께 제공됩니다.
13,993+ 명의 codders가 등록함
119 개 강의114 챌린지582 퀴즈 문제
- 초보자 환영
AI 코딩 도우미
실습 중심의 대화형 강의
지식을 확인하는 퀴즈
무료 수료증
커리큘럼
이 섹션은 HTML 여정의 일부입니다. 전체 커리큘럼에는 더 많은 섹션이 있어요. 아래 미리보기를 클릭하면 여정 페이지에서 확인할 수 있습니다.
- 섹션 1기초60 개 강의
섹션 2
CSS로 스타일링하기
섹션 시작하기시작색상, 레이아웃, 스타일로 웹 페이지를 생동감 있게 만드세요소개
5 개 강의540CSS 추가
4 개 강의725기본 선택자
7 개 강의1247텍스트 기초
8 개 강의1450색상과 배경
5 개 강의834Flex Box
6 개 강의943레이아웃 기법
7 개 강의1151반응형 디자인 기초
6 개 강의1052섹션 3
CSS 마스터
섹션 시작하기시작CSS 실력을 다음 단계로 끌어올리세요!구조적 가상 클래스
5 개 강의432시각 효과
5 개 강의536랜딩 페이지
5 개 강의5CSS Grid로 구축하기
4 개 강의426최종 챌린지
5 개 강의5- 섹션 4실전 프론트엔드35 개 강의
- 섹션 5JavaScript 실전27 개 강의
해보면서 배우기
실제 코드를 작성하고, 데이터베이스를 쿼리하고, 웹사이트를 구축하고, AI 프롬프트를 마스터하세요. 인터랙티브 레슨으로 현대 개발자에게 필요한 모든 기술을 다룹니다.
연속 기록을 쌓아보세요
꾸준히 하고 성장하는 모습을 지켜보세요! 매일 코딩 습관을 추적하고, 동결 기능으로 연속 기록을 보호하고, 매일 참여해서 보상을 받으세요.
12 일 연속
내일도 돌아와서 연속 기록을 유지하세요!
January 2026
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
더블 오어 낫싱
7일 중 5일차
연속 기록 동결
2 left
어디서나 코딩하세요
코딩 여정을 함께 하세요! 설정도, 다운로드도 필요 없이 바로 열어서 코딩을 시작하세요. iOS, Android, 웹에서 4.9점 평점으로 이용 가능합니다.
당신은 혼자가 아닙니다
글로벌 리더보드에서 경쟁하고, 친구를 초대해서 보상을 받고, 서로의 성공을 축하하세요. 코딩은 친구와 함께하면 더 좋아요!
1
2
3
승급 구역모든 방식으로 학습
읽고, 듣고, 스스로 확인하고, AI에게 묻고, 이미 배운 내용을 찾아보세요. 모든 수업이 당신에게 맞춰집니다.
변수는 나중에 프로그램에서 참조할 값을 저장하는, 이름이 있는 컨테이너입니다.
Python에서는 이름, 등호, 저장할 값을 차례대로 써서 만듭니다.
값은 시간이 지나며 바뀔 수 있습니다. 재할당하면 그 이름이 새로운 값을 가리킵니다.
수료증을 받으세요
완료한 모든 코스에 대해 인증서를 받으세요. LinkedIn 프로필과 이력서에 추가하여 고용주에게 코딩 전문성을 보여주세요.
수료증Python 기초
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에 공유하여 프런트엔드 포트폴리오의 일부로 활용할 수 있는, 검증 가능한 증거가 됩니다.
