HTML·CSS

구조부터 레이아웃까지, 직접 태그를 쓰고 바로 렌더링된 결과를 봅니다.

총 26개 레슨

구조와 텍스트

제목과 문단 제목의 단계 h1~h6 강조하기 strong과 em

목록

순서 없는 목록 ul 순서 있는 목록 ol

링크와 이미지

링크 만들기 a 이미지 넣기 img

구조 나누기

div로 영역 나누기 class로 이름 붙이기

CSS 기초

style 태그로 CSS 연결하기 글자 스타일 박스 모델 — padding과 border 색 입히기 — color와 background-color 글자 크기와 정렬 둥근 모서리와 그림자

레이아웃

Flexbox로 가로 배치하기 flex 간격과 가운데 정렬 폼 만들기 input과 button

박스와 간격

margin과 padding의 차이 border와 border-radius 배경색과 width, height

반응형과 정렬

Flexbox로 가로 정렬하기 justify-content로 정렬 방향 정하기 이미지 max-width로 크기 맞추기 미디어 쿼리 기초

종합

종합 문제 — 미니 프로필 카드

어떻게 진행되나요

레슨마다 짧은 설명을 읽고, 바로 옆 편집기에 직접 코드를 씁니다. 실행하면 코드가 정말 돌아가고, 결과가 조건에 맞는지 그 자리에서 확인해 알려드립니다.

막히면 힌트를 4단계까지 볼 수 있습니다. 방향만 짚어주는 것부터 시작해서 마지막 단계는 정답 코드 그대로입니다.