CSS 배우기 - 코딩 강좌

첫 번째 선택자부터 반응형 레이아웃, 애니메이션과 현대적인 웹 디자인까지 CSS를 단계별로 학습하세요. CSS 한 줄을 입력하고 휴대폰에서 페이지가 바뀌는 모습을 확인하세요. 편집기에는 HTML과 CSS가 나란히 표시되고 실시간 미리보기가 제공됩니다.

이 CSS 튜토리얼은 초보자를 위해 만들어졌으며 여러분의 실력에 맞춰 함께 발전합니다. 각 강좌는 하나의 실제 주제를 다루고, 각 레슨은 짧으며, 편집기를 언제나 한 번만 탭하면 열 수 있으므로 방금 읽은 내용을 읽기만 하지 않고 바로 연습할 수 있습니다.

포함된 내용

• 초급(A1)부터 고급(C1)까지 40개 강좌와 159개의 짧은 레슨

• 빠른 실험과 나만의 페이지 제작을 위한 즉시 미리보기가 제공되는 실시간 HTML 및 CSS 편집기

• 툴바, 카드 그리드, 고정 헤더, 맥동하는 버튼 등을 한 단계씩 만들어 보는 20개의 웹 디자인 프로젝트

• 열보다 42px 더 넓은 카드, 휴대폰에서 절대 실행되지 않는 미디어 쿼리, 페이지 뒤에 갇힌 모달 등을 해결하는 20개의 버그 찾기 미션

• 최종 시험과 수료 인증서

• 앱은 22개 언어로 제공됩니다

초급부터 고급까지 이어지는 완벽한 학습 과정

• 문법과 선택자, 색상, 배경 및 타이포그래피

• 박스 모델, display, 위치 지정, 단위 및 값

• 의사 클래스와 의사 요소

• Flexbox 기초와 고급 Flexbox

• Grid 기초, 그리드 영역 및 고급 그리드 레이아웃

• 반응형 디자인, 미디어 쿼리 및 컨테이너 쿼리

• 사용자 지정 속성(변수), 함수, 명시도, 캐스케이드 및 @layer

• 트랜지션, 변형, 키프레임 애니메이션, 필터 및 블렌드 모드

• 다크 모드와 색상 구성표, 스크롤 및 오버플로, clip-path 및 도형

• DevTools를 활용한 디버깅, BEM 아키텍처, Sass, PostCSS 및 디자인 토큰

• 컴포넌트 패턴, 현대적인 레이아웃 패턴, 성능 및 Houdini

꾸준히 이어지는 연습

• 배운 내용을 확인하는 퀴즈

• 속성, 선택자 및 레이아웃 문법 69개 항목이 담긴 치트 시트

• 프론트엔드 또는 웹 개발자 면접 전에 유용한, 명확한 답변이 포함된 면접 질문 50개

• 열어서 편집할 수 있는 짧은 예제 코드 라이브러리

• 나만의 코드, 메모 및 즐겨찾는 레슨 저장

• World Coding Challenge: Python, JavaScript 및 기타 언어로 해결하는 하루 세 번의 글로벌 라운드

• 연속 학습 기록, XP, 리더보드 및 매일 연습을 이어 가도록 돕는 알림

AI 멘토

• 레이아웃이나 속성에서 막혔나요? 개념, 오류 또는 자신의 코드에 대해 AI 멘토에게 질문하세요

• AI 플레이그라운드: 페이지를 설명하면 HTML과 CSS가 만들어지는 모습을 확인하세요

• 무료 사용자는 매일 AI 사용량을 제공받고, Pro에서는 무제한으로 이용할 수 있습니다

대상 사용자

• 웹 개발의 첫걸음을 시작하는 완전 초보자

• 목업을 전달하는 대신 직접 페이지를 꾸미고 싶은 디자이너

• 웹 디자인 과정과 함께 추가 연습을 하고 싶은 학생

• HTML과 CSS를 어느 정도 알고 Flexbox와 Grid를 마침내 이해하고 싶은 개발자

• 프론트엔드 직무를 준비하는 커리어 전환자

무료 및 Pro

첫 번째 강좌, 첫 번째 가이드 프로젝트, 두 개의 미션 및 실시간 편집기는 매일 제공되는 AI 멘토 사용량과 함께 무료입니다. Pro에서는 모든 강좌, 전체 프로젝트와 미션, 인증서 시험 및 무제한 AI가 잠금 해제되며 광고가 제거됩니다.

오늘 시작하여 자신의 속도로 CSS를 배우고 몇 분 만에 첫 페이지를 꾸며 보세요.