HTML 여정의 일부인기여정CSS 배우기
무료 인터랙티브 CSS 강의입니다. 모든 레슨에서 실제 HTML에 직접 스타일을 입힙니다 - 선택자, 박스 모델, 색상, 폰트, flexbox, grid, 반응형 디자인 - 입력하는 즉시 실시간 미리보기로 확인하고, 완료하면 무료 수료증을 받습니다. 더 넓은 HTML 여정의 일부이므로 CSS에 필요한 마크업 맥락이 바로 함께 제공됩니다.
269,396+ 명의 codders가 등록함
- 초보자 환영
AI 코딩 도우미
실습 중심의 대화형 강의
모든 레슨에 음성 나레이션 제공
지식을 확인하는 퀴즈
무료 수료증
커리큘럼
이 섹션은 HTML 여정의 일부입니다. 전체 커리큘럼에는 더 많은 섹션이 있어요 - 아래 미리보기를 클릭하면 여정 페이지에서 확인할 수 있습니다.
- 섹션 1Fundamentals60 개 강의
섹션 2
Styling with CSS
섹션 시작하기시작펼치기접기Bring your web pages to life with colors, layouts, and styles소개
5 개 강의540- 01CSS란 무엇인가요?챌린지퀴즈
- 02CSS 구문챌린지퀴즈
- 03CSS 주석퀴즈
- 04Head 태그챌린지퀴즈
- 05Title 태그챌린지마스터리퀴즈
CSS 적용하기
4 개 강의725- 01인라인 CSS챌린지마스터리퀴즈
- 02내부 CSS챌린지마스터리퀴즈
- 03외부 CSS챌린지마스터리퀴즈
- 04기초 스타일링 챌린지챌린지
기본 선택자
7 개 강의1247- 01선택자 소개챌린지퀴즈
- 02타입 선택자챌린지마스터리퀴즈
- 03클래스 선택자챌린지마스터리퀴즈
- 04ID 선택자챌린지마스터리퀴즈
- 05그룹 선택자챌린지마스터리퀴즈
- 06전체 선택자챌린지마스터리퀴즈
- 07선택자 챌린지챌린지
텍스트 기초
8 개 강의1450- 01텍스트 색상챌린지마스터리퀴즈
- 02폰트 패밀리챌린지마스터리퀴즈
- 03폰트 크기챌린지마스터리퀴즈
- 04폰트 굵기챌린지마스터리퀴즈
- 05텍스트 정렬챌린지마스터리퀴즈
- 06텍스트 꾸미기챌린지마스터리퀴즈
- 07복습 챌린지 #1챌린지
- 08복습 챌린지 #2챌린지
색상과 배경
5 개 강의834- 01배경색챌린지마스터리퀴즈
- 02HEX 색상챌린지마스터리퀴즈
- 03RGB 색상챌린지마스터리퀴즈
- 04RGBA를 이용한 투명도챌린지퀴즈
- 05복습 챌린지 #1챌린지
카페 메뉴
프로젝트3 개 강의1- 01타이포그래피 기초챌린지
- 02텍스트 스타일링프로젝트
- 03색상과 배경프로젝트
박스 모델 파트 1
6 개 강의943- 01박스 모델이란?퀴즈
- 02패딩챌린지마스터리퀴즈
- 03마진챌린지마스터리퀴즈
- 04테두리챌린지마스터리퀴즈
- 05너비와 높이챌린지마스터리퀴즈
- 06복습 챌린지챌린지
박스 모델 파트 2
5 개 강의834- 01Box Sizing챌린지퀴즈
- 02Border Radius챌린지마스터리퀴즈
- 03Overflow챌린지마스터리퀴즈
- 04Box Shadow챌린지마스터리퀴즈
- 05복습 챌린지챌린지
Flex Box
6 개 강의943- 01Flex Box란 무엇인가요?챌린지퀴즈
- 02Flex Direction챌린지마스터리퀴즈
- 03Justify Content챌린지마스터리퀴즈
- 04Align Items챌린지마스터리퀴즈
- 05완벽한 중앙 정렬챌린지퀴즈
- 06Flex Box 챌린지챌린지
로그인 폼
프로젝트4 개 강의1- 01바디챌린지
- 02폼 컨테이너프로젝트
- 03인풋프로젝트
- 04버튼프로젝트
레이아웃 기법
7 개 강의1152- 01블록 vs 인라인 요소챌린지퀴즈
- 02포지셔닝 기초챌린지마스터리퀴즈
- 03Relative 포지셔닝챌린지마스터리퀴즈
- 04Absolute 포지셔닝챌린지마스터리퀴즈
- 05Fixed 포지셔닝챌린지마스터리퀴즈
- 06Z-Index 기초챌린지퀴즈
- 07복습 챌린지챌린지
반응형 디자인 기초
6 개 강의1052- 01반응형 디자인이란?챌린지퀴즈
- 02Viewport 메타 태그챌린지퀴즈
- 03유동형 레이아웃챌린지마스터리퀴즈
- 04Viewport 단위챌린지마스터리퀴즈
- 05Media Queries 기초챌린지마스터리퀴즈
- 06가변 이미지챌린지마스터리퀴즈
통가 웹페이지
프로젝트6 개 강의1- 01네비게이션 메뉴챌린지
- 02환영 헤더프로젝트
- 03소개 섹션프로젝트
- 04연락처 섹션프로젝트
- 05Viewport 태그프로젝트
- 06미디어 쿼리프로젝트
최종 도전 과제
4 개 강의4- 01아이템 배치하기챌린지
- 02영화 목록챌린지
- 03결혼 초대장챌린지
- 04플로팅 알림챌린지
섹션 3
CSS Mastery
섹션 시작하기시작펼치기접기Take you css skills to the next level!셀렉터 마스터 – 조합
6 개 강의539- 01소개퀴즈
- 02자손 셀렉터챌린지퀴즈
- 03자식 셀렉터챌린지퀴즈
- 04인접 형제 셀렉터챌린지퀴즈
- 05일반 형제 셀렉터챌린지퀴즈
- 06복습 챌린지챌린지
인터랙티브 가상 클래스
5 개 강의431- 01가상 클래스퀴즈
- 02호버 효과챌린지퀴즈
- 03포커스 효과챌린지퀴즈
- 04액티브 스타일챌린지퀴즈
- 05복습 챌린지챌린지
구조적 가상 클래스
5 개 강의432- 01구조적 가상 클래스퀴즈
- 02첫 번째 자식 요소 선택하기챌린지퀴즈
- 03마지막 자식 요소 선택하기챌린지퀴즈
- 04패턴의 힘: nth-child 사용하기챌린지퀴즈
- 05복습 챌린지챌린지
드롭다운 메뉴 프로젝트
4 개 강의4- 01서브메뉴 추가하기챌린지
- 02서브메뉴 표시하기챌린지
- 03스타일링 더하기챌린지
- 04Input과 버튼챌린지
시각 효과
5 개 강의536- 01그라디언트챌린지퀴즈
- 02CSS 필터챌린지퀴즈
- 03트랜스폼챌린지퀴즈
- 04트랜지션 및 호버 효과챌린지퀴즈
- 05복습 챌린지챌린지
랜딩 페이지
5 개 강의5- 01헤더 섹션 스타일링하기챌린지
- 02버튼 스타일링하기챌린지
- 03섹션 레이아웃챌린지
- 04카드 레이아웃챌린지
- 05마무리 작업하기챌린지
CSS Grid로 구축하기
4 개 강의426- 01Grid 기초챌린지퀴즈
- 02Grid-row 아이템 배치챌린지퀴즈
- 03이름이 지정된 영역챌린지퀴즈
- 04복습 챌린지챌린지
Flavor Fiesta 웹사이트
4 개 강의4- 01그리드 설정하기챌린지
- 02헤더챌린지
- 03메인 영역챌린지
- 04푸터챌린지
최종 챌린지
5 개 강의5- 01활성 메뉴 강조하기챌린지
- 02지브라 테이블 행챌린지
- 03버튼 호버 효과챌린지
- 04Grid 카드 레이아웃챌린지
- 05블러 처리된 Hero 이미지챌린지
- 섹션 4Practical Frontend35 개 강의
- 섹션 5JavaScript in Action27 개 강의
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에 공유하여 프런트엔드 포트폴리오의 일부로 활용할 수 있는, 검증 가능한 증거가 됩니다.
