CSS 배우기 - 코딩 강좌

휴대폰으로 CSS 배우기를 시작하세요. 선택자부터 반응형 레이아웃, 애니메이션, 현대적인 웹 디자인까지 배울 수 있습니다. 한 주제에 집중한 짧은 수업으로 학습하고, 탭 한 번으로 여는 편집기에서 HTML과 CSS를 나란히 편집하며 실시간 미리보기를 확인하세요.

포함된 내용

• 40개 과정, 159개 수업: 입문(A1)부터 고급(C1)까지

• 실시간 HTML 및 CSS editor: 즉시 미리보기, 코드 실험, 나만의 페이지 제작

• 안내에 따라 만드는 웹 디자인 프로젝트 20개: 도구 모음, 카드 그리드, 고정 헤더, 맥박처럼 뛰는 버튼

• 버그 찾기 미션 20개: 너비가 42px 더 넓은 카드, 휴대폰에서 작동하지 않는 미디어 쿼리, 페이지 뒤에 가려진 모달

• 최종 시험과 수료증

• 22개 언어

입문부터 고급까지, 완전한 학습 경로

• 문법, 선택자, 색상, 배경, 타이포그래피, 박스 모델, 표시 방식, 위치 지정, 단위, 값

• 가상 클래스, 가상 요소, CSS flexbox, CSS grid: 기초부터 고급 레이아웃까지

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

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

• 전환, 변형, 키프레임 애니메이션, 필터, 혼합 모드

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

• 개발자 도구 디버깅, BEM 구조, Sass, PostCSS, 디자인 토큰

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

기억에 남는 실습

• 퀴즈, 69개 항목의 핵심 요약표, 명확한 답변이 포함된 프런트엔드 또는 웹 개발자 면접 질문 50개

• 편집 가능한 코드 라이브러리와 코드, 메모, 즐겨찾는 수업 저장

• 세계 코딩 챌린지: Python, JavaScript 등 다양한 언어로 하루 세 차례 진행되는 글로벌 라운드

• 연속 학습 기록, XP, 순위표, 일일 알림

AI 멘토

• 개념, 오류, 레이아웃, 속성 또는 내 코드에 관해 AI에게 질문

• 페이지 설명으로 HTML과 CSS를 만드는 AI 플레이그라운드

• 매일 제공되는 무료 AI 이용량, Pro에서는 무제한

이런 분들을 위한 앱

• 웹 개발과 CSS 배우기를 시작하는 입문자

• 시안을 전달하는 대신 직접 페이지를 꾸미려는 디자이너

• 웹 디자인 수업과 병행해 실습하는 학생

• CSS flexbox와 CSS grid를 배우는 HTML 및 CSS 개발자

• 프런트엔드 취업을 준비하는 경력 전환자

이용 방법

1. 무료로 CSS 배우기 시작: 문법과 선택자 익히기

2. editor에서 값을 바꾸고 미리보기 확인하기

3. 박스 모델, 플렉스박스, 그리드, 반응형 디자인, 애니메이션 배우기

4. 안내에 따라 프로젝트를 만들고 레이아웃 버그 수정하기

5. 최종 시험에 합격하고 수료증 받기

무료 및 Pro

무료: 첫 번째 과정, 첫 번째 가이드 프로젝트, 미션 2개, 실시간 editor, 일일 AI 멘토 이용량. Pro: 모든 과정, 모든 프로젝트와 미션, 수료증 시험, 무제한 AI, 광고 제거.