chapter★★★★★난이도 · 약 120분

CSS 기초

CSS 문법 · 셀렉터 · 색상/글꼴 · Box Model · box-sizing · 카드 UI — HTML에 스타일을 입힌다.

#CSS#셀렉터#Box Model#스타일

왜 배우는가

HTML만으로는 검은 글씨에 흰 배경뿐이다. CSS를 입히면 같은 HTML이 완전히 다른 모습으로 변한다. 셀렉터, Box Model, 단위를 이해하면 모든 레이아웃의 기초가 잡힌다.

Topics · 06

레슨 단위로 펼쳐 보기

TOPIC · 14 · 01★★
CSS란? — 옷을 입히자
CSS는 HTML에 색상, 크기, 배치를 부여하는 스타일 언어. 셀렉터 { 속성: 값; } 문법.
15min·3drillsREAD →
TOPIC · 14 · 02★★
셀렉터의 세계
요소, 클래스, ID 셀렉터를 구별하고 우선순위(특이성)를 이해한다.
15min·3drillsREAD →
TOPIC · 14 · 03
색과 타이포그래피
색상(이름, hex, rgb), font-family, font-size, line-height로 텍스트의 첫인상을 결정한다.
20min·3drillsREAD →
TOPIC · 14 · 04★★
모든 것은 박스다 — Box Model
content, padding, border, margin — CSS 박스 모델의 4계층 구조.
20min·3drillsREAD →
TOPIC · 14 · 05★★
box-sizing과 단위의 세계
border-box로 크기 계산 단순화. px, rem, %, vh/vw 단위를 상황에 맞게 사용한다.
15min·3drillsREAD →
TOPIC · 14 · 06
카드 UI 만들기
border-radius + box-shadow + padding — Box Model, 색상, 글꼴을 총동원하여 카드 UI를 완성한다.
20min·3drillsREAD →