무료 자료실

Header, Main, Section, Footer와 시맨틱 태그들로 이루어진 웹페이지의 기본 구조를 배웁니다.

제목, 문단, 강조 등 HTML 텍스트 태그의 역할부터 크기, 줄간격, 대비 등 읽기 편한 스타일링 규칙까지 한번에 배웁니다.

CSS의 핵심 개념! Content, Padding, Border, Margin으로 이루어진 박스 모델을 이해하고, max-width와 섹션 여백 규칙까지 배웁니다.

한 줄 배치의 마법! 가로/세로 정렬, 간격 조절 등 Flexbox 핵심 개념을 배웁니다.

2차원 배치의 마법! 행과 열을 자유롭게 다루는 Grid 핵심 개념을 배웁니다.

모바일부터 데스크톱까지! 모든 화면에서 완벽하게 보이는 반응형 웹사이트를 만드는 방법을 배웁니다.

3색 규칙으로 톤 통일! 컬러 토큰, WCAG 대비 기준, 이미지 최적화, 아이콘 스타일까지 시각 요소를 정리합니다.

링크는 이동, 버튼은 행동! Primary/Secondary 버튼, CTA 배치, hover/focus/active 상태까지 인터랙션 디자인을 배웁니다.

웹 UI의 대부분을 차지하는 패턴! 카드 구성, 리스트, 가격표, 그리고 Loading/Empty/Error/Success 상태까지 다룹니다.

입력 + 라벨 + 에러 = 세트! label 연결, input 종류, 에러 메시지 패턴, 즉각적 검증 피드백까지 폼 디자인을 배웁니다.

지금까지 배운 모든 규칙을 하나로! 컬러/타이포/간격 토큰, 컴포넌트 규칙, 네비게이션 패턴을 정리하는 캡스톤 가이드입니다.