HTML·CSS

학습 목표: 시맨틱 HTML과 접근 가능한 폼, 반응형 CSS 레이아웃을 직접 구성합니다. 선수 지식: 코드 편집기에서 파일을 만들고 브라우저로 열 수 있으면 시작할 수 있습니다. 초급·중급·고급의 목표를 확인하고 현재 공개된 글부터 학습하세요. 빈 단계는 계획을 유지하며 내용을 차례로 보강합니다.

단계별 학습 목표

각 단계의 학습 목표입니다. 공개된 글은 위의 단계별 링크에서 바로 볼 수 있습니다.

초급 목표

HTML의 의미와 CSS 배치 원리를 익혀, 문서 구조가 명확하고 다양한 화면에서 읽기 편한 페이지를 만드는 방법을 다룹니다.

학습 주제

  • 시맨틱 HTML
  • 박스 모델과 배치
  • 반응형 기초

중급 목표

접근성과 반응형 요구를 함께 고려하여, 반복되는 화면 요소를 일관되게 구현하고 실제 표시 문제를 해결하는 방법을 다룹니다.

학습 주제

  • 키보드 접근성
  • 반응형 레이아웃 조합
  • 재사용 스타일 구조

고급 목표

복잡한 화면의 유지보수와 성능을 함께 고려하여, 스타일 구조와 디자인 시스템의 선택 근거를 설명하는 설계를 다룹니다.

학습 주제

  • 디자인 토큰 설계
  • CSS 구조와 변경 비용
  • 렌더링 성능 점검

HTML·CSS 학습 목록

읽음 — / 전체 15개 · 필수 13개

학습 시작

단계 안에서는 학습 순서대로 표시합니다. 선택 참고는 필수 진도에 포함하지 않습니다.

초급 5개

  1. 학습 1 / 11 · 필수 학습

    HTML 입문: 시맨틱 문서와 접근 가능한 폼 만들기

  2. 학습 2 / 11 · 필수 학습

    CSS 입문: 박스 모델·선택자·캐스케이드 직접 확인하기

  3. 학습 3 / 11 · 필수 학습

    CSS Flex와 미디어 쿼리 입문: 반응형 카드 페이지 만들기

  4. 학습 4 / 11 · 필수 학습

    CSS position 완전 이해: relative·absolute·fixed·sticky 실습

  5. 학습 5 / 11 · 필수 학습

    HTML details와 summary로 접근 가능한 FAQ 만들기

중급 5개

  1. 학습 6 / 11 · 필수 학습

    CSS Grid 실습: Flex 학습 카드로 열 맞추기와 auto-fit 비교

  2. 학습 7 / 11 · 필수 학습

    CSS overflow 해결: 긴 텍스트·min-width: 0·말줄임 실습

  3. 학습 8 / 11 · 필수 학습

    HTML 표 만들기: caption·scope로 비교표를 읽기 쉽게, 모바일에서는 표만 스크롤하기

  4. 학습 9 / 11 · 필수 학습

    Container Query 실습: 같은 카드를 본문과 사이드바에 배치하기

  5. 학습 10 / 11 · 필수 학습

    HTML CSS 종합 실습: 소개·카드·이미지·요금표·문의 폼·FAQ가 있는 반응형 서비스 페이지

고급 1개

  1. 학습 11 / 11 · 필수 학습

    CSS z-index가 안 먹힐 때: stacking context와 부모 층 디버깅

개념·참고 4개

  1. 참고 1 / 4 · 필수 선수

    HTML CSS 이미지 문제 해결 실습: 경로·비율·잘림·흐림·CLS

  2. 참고 2 / 4 · 선택 참고

    CSS Baseline 보는 법: 지원 범위와 폴백을 직접 확인하기

  3. 참고 3 / 4 · 필수 선수

    웹 접근성 기초 점검: 키보드 순서·초점 표시·확대 화면을 직접 확인하는 체크리스트

  4. 참고 4 / 4 · 선택 참고

    프론트엔드 SEO 기초: HTML 구조와 이미지 성능 진단하기
읽음 기록 설정

읽음 기록은 이 브라우저에만 저장됩니다.

전체 기술 학습 가이드