코드프렌즈
강의 목록
체험하기
프로젝트
수강료 안내
더 보기
로그인
학습자료
입문
5 챕터 · 58 수업
웹사이트를 어떻게 꾸밀까?
웹사이트의 옷, CSS를 적용하는 방법
시작하기
내 강의
Chapter 1
CSS 개요
Lessons
CSS 시작하기
CSS 기본 구조
주석(Comment)
클래스(Class)
가상 클래스(Pseudo-class)
선택자(Selector) - 스타일 적용 대상 지정하기
선택자(Selector) - 고급
선택형 퀴즈
CSS를 불러오는 방법
너비(Width)와 높이(Height)
RGB 컬러 시스템
헥스 코드(Hex code)
빈칸 채우기 퀴즈
Chapter 2
CSS 기본 문법과 속성
Lessons
픽셀(px)
em과 rem
vw와 vh
배경(Background)
선택형 퀴즈
외곽선(Border)
여백(Margin)
패딩(Padding)
박스 모델(Box model)
박스 모델 활용 레이아웃 디자인
선택형 퀴즈
Chapter 3
폰트 및 CSS 심화 개념
Lessons
폰트(font)
폰트 불러오기 (구글 웹폰트)
글자 크기(font-size)
글자 두께(font-weight), 글자 기울임(font-style)
빈칸 채우기 퀴즈
텍스트 정렬(text-align), 텍스트 장식(text-decoration)
자주 사용하는 CSS 속성
위치 지정(Positioning)
여러 HTML 요소 간 위치 지정
빈칸 채우기 퀴즈
결합자(Combinator)
디스플레이(Display)
선택형 퀴즈
Chapter 4
Flex & Grid 레이아웃
Lessons
플렉스박스(Flexbox) - 기본
플렉스박스로 레이아웃 구성하기
빈칸 채우기 퀴즈
플렉스박스(Flexbox) - 심화
선택형 퀴즈
그리드(Grid)
그리드(Grid)로 복잡한 레이아웃 구성하기
빈칸 채우기 퀴즈
그리드 고급 활용
선택형 퀴즈
Chapter 5
자주 사용하는 CSS 속성 & 반응형 웹 디자인
Lessons
z-index
투명도(Opacity)
가로세로비(aspect-ratio)
경계 처리(overflow)
애니메이션 기본
애니메이션 활용
선택형 퀴즈
미디어 쿼리(Media Query)
미디어 쿼리 응용
Reset CSS
CSS 총정리