인터랙티브 학습

디자인 가이드

프론트엔드 개발의 기초부터 실전 팁까지,
인터랙티브한 시각 자료와 함께 배워보세요.

웹페이지 기본 구조

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 종류, 에러 메시지 패턴, 즉각적 검증 피드백까지 폼 디자인을 배웁니다.

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