HTML·CSS · 중급
HTML·CSS 중급 단계에 공개된 학습 글입니다. 단계별 목표를 참고해 필요한 글부터 읽어 보세요.
단계별 학습 목표
각 단계의 학습 목표입니다. 공개된 글은 위의 단계별 링크에서 바로 볼 수 있습니다.
초급 목표
HTML의 의미와 CSS 배치 원리를 익혀, 문서 구조가 명확하고 다양한 화면에서 읽기 편한 페이지를 만드는 방법을 다룹니다.
학습 주제
- 시맨틱 HTML
- 박스 모델과 배치
- 반응형 기초
중급 목표
접근성과 반응형 요구를 함께 고려하여, 반복되는 화면 요소를 일관되게 구현하고 실제 표시 문제를 해결하는 방법을 다룹니다.
학습 주제
- 키보드 접근성
- 반응형 레이아웃 조합
- 재사용 스타일 구조
고급 목표
복잡한 화면의 유지보수와 성능을 함께 고려하여, 스타일 구조와 디자인 시스템의 선택 근거를 설명하는 설계를 다룹니다.
학습 주제
- 디자인 토큰 설계
- CSS 구조와 변경 비용
- 렌더링 성능 점검
단계 안에서는 학습 순서대로 표시합니다. 선택 참고는 필수 진도에 포함하지 않습니다.
중급 5개
학습 6 / 11 · 필수 학습
CSS Grid 실습: Flex 학습 카드로 열 맞추기와 auto-fit 비교학습 7 / 11 · 필수 학습
CSS overflow 해결: 긴 텍스트·min-width: 0·말줄임 실습학습 8 / 11 · 필수 학습
HTML 표 만들기: caption·scope로 비교표를 읽기 쉽게, 모바일에서는 표만 스크롤하기학습 9 / 11 · 필수 학습
Container Query 실습: 같은 카드를 본문과 사이드바에 배치하기학습 10 / 11 · 필수 학습
HTML CSS 종합 실습: 소개·카드·이미지·요금표·문의 폼·FAQ가 있는 반응형 서비스 페이지
이 단계의 학습 글은 준비 중입니다.
개념·참고 3개
참고 1 / 4 · 필수 선수
HTML CSS 이미지 문제 해결 실습: 경로·비율·잘림·흐림·CLS참고 2 / 4 · 선택 참고
CSS Baseline 보는 법: 지원 범위와 폴백을 직접 확인하기참고 3 / 4 · 필수 선수
웹 접근성 기초 점검: 키보드 순서·초점 표시·확대 화면을 직접 확인하는 체크리스트
이 단계의 학습 글은 준비 중입니다.