본문으로 건너뛰기

HTML·CSS

웹 페이지의 내용은 HTML로, 모양과 배치는 CSS로

레슨 93개 · 단원 연습 문제 15개 · 섞어 풀기 3개

처음부터 · 레슨 1웹 페이지가 화면에 나오기까지읽음 0 / 93

1부 첫 페이지 만들기

1단원레슨 6

웹 페이지와 첫 HTML 파일

  1. 1웹 페이지가 화면에 나오기까지
  2. 2HTML·CSS·JavaScript가 맡는 일
  3. 3준비: VS Code와 작업 폴더
  4. 4문서 뼈대
  5. 5고친다 → 저장한다 → 새로고침한다
  6. 6개발자 도구로 요소 나무 보기
2단원레슨 7

글을 담는 태그

  1. 7요소·태그·속성
  2. 8요소 안의 요소
  3. 9제목 h1~h6
  4. 10문단과 강조
  5. 11목록 ul·ol·li
  6. 12공백 규칙과 특수 문자
  7. 13검사기로 틀린 HTML 찾기
  8. 단원 연습 문제
3단원레슨 5

링크와 그림

  1. 14링크 a
  2. 15경로 읽기
  3. 16같은 페이지 안에서 옮겨 가기
  4. 17그림 넣기 img
  5. 18그림 형식과 figure
  6. 단원 연습 문제
4단원레슨 6

CSS 첫걸음

  1. 19규칙의 모양
  2. 20CSS 연결하기
  3. 21색 쓰기
  4. 22글자 꾸미기
  5. 23브라우저 기본 스타일과 Styles 창
  6. 24레시피 한 페이지 만들기
  7. 단원 연습 문제
  8. 단원 1~4 섞어 풀기

2부 구조와 폼

5단원레슨 5

구조와 이름표

  1. 25시맨틱 요소
  2. 26article과 section 가르기
  3. 27div·span과 블록·인라인
  4. 28id와 class
  5. 29표 table
  6. 단원 연습 문제
6단원레슨 7

폼

  1. 30폼과 제출
  2. 31name과 value
  3. 32label로 칸에 이름 붙이기
  4. 33입력 칸의 종류
  5. 34여러 줄 글과 고르는 칸
  6. 35브라우저가 해 주는 검사
  7. 36단추의 type
  8. 단원 연습 문제
7단원레슨 6

누구나 쓸 수 있는 HTML

  1. 37화면 읽기 프로그램이 읽는 페이지
  2. 38alt 제대로 쓰기
  3. 39링크와 단추 가르기
  4. 40키보드로 다니기
  5. 41글자 없는 단추와 숨긴 라벨
  6. 42Accessibility 창과 점검 목록
  7. 단원 연습 문제

3부 CSS 다루기

8단원레슨 6

선택자

  1. 43태그·클래스·ID 선택자
  2. 44하위·자식·형제 선택자
  3. 45조건 겹치기와 속성 선택자
  4. 46마우스와 키보드 상태
  5. 47자리로 고르기
  6. 48골라진 칸과 :has()
  7. 단원 연습 문제
9단원레슨 4

규칙이 겹칠 때

  1. 49명시도
  2. 50나중에 쓴 규칙
  3. 51물려받기
  4. 52!important 대신
  5. 단원 연습 문제
  6. 단원 1~9 섞어 풀기
10단원레슨 7

박스 모델

  1. 53상자 네 겹
  2. 54블록과 인라인 display
  3. 55너비와 box-sizing
  4. 56가운데 모으기
  5. 57여백 짧게 적기
  6. 58둥근 모서리·그림자·넘치는 내용
  7. 59배경 그림과 그러데이션
  8. 단원 연습 문제
11단원레슨 4

단위와 변수

  1. 60글자 크기는 rem
  2. 61단위마다 기준
  3. 62반투명한 색
  4. 63CSS 변수
  5. 단원 연습 문제

4부 배치와 반응형

12단원레슨 7

한 줄로 나란히: flex

  1. 64flex는 부모에
  2. 65주축과 교차축
  3. 66주축 정렬
  4. 67교차축 정렬
  5. 68gap과 flex: 1
  6. 69자리가 모자라면 다음 줄로
  7. 70자주 쓰는 세 모양
  8. 단원 연습 문제
13단원레슨 5

격자로 배치: grid

  1. 71flex 여러 줄과 grid
  2. 72열 만들기
  3. 73들어가는 만큼 열 만들기
  4. 74칸 여러 개 차지하기
  5. 75영역에 이름 붙이기
  6. 단원 연습 문제
14단원레슨 5

겹치고 고정하기: position

  1. 76일반 흐름과 position
  2. 77기준 상자와 absolute
  3. 78sticky 머리글과 z-index
  4. 79overflow: hidden으로 자르기
  5. 80.sr-only 한 줄씩
  6. 단원 연습 문제
15단원레슨 5

화면 폭에 맞추기

  1. 81meta viewport
  2. 82모바일 먼저와 미디어 쿼리
  3. 83유연한 그림
  4. 84그림을 칸에 맞추기: aspect-ratio·object-fit
  5. 85가로 스크롤 원인 찾기
  6. 단원 연습 문제
16단원레슨 4

움직임과 다크 모드

  1. 86transition
  2. 87transform으로 옮기고 키우기
  3. 88움직임 줄이기
  4. 89변수만 바꾸는 다크 모드
  5. 단원 연습 문제
  6. 단원 1~16 섞어 풀기

5부 종합 실습

17단원레슨 4

할 일 목록 화면 만들기

  1. 90완성 화면을 영역으로 나누기
  2. 91이름표를 맞춘 HTML
  3. 92CSS 열두 구역
  4. 93두 폭·두 테마 점검과 다음 과목