SKIP TO CONTENT
INTERMEDIATE
1.5 hours4 chapters

Responsive Design

Make your website look good on every device, whether it is a big desktop computer, a tablet, or a small smartphone. We will take it one gentle step at a time.

Vibe Coding Academy Avatar
Progress: 0%In progress

What You'll Learn

휴대폰, 태블릿, 컴퓨터의 화면 크기가 왜 서로 다른지
페이지가 어떤 화면에든 맞게 "늘어나는" 방법
읽기 쉽고 누르기 쉽도록 글자와 버튼을 충분히 크게 만들기
실제 휴대폰으로 결과를 확인하기

Description

성인 학습자를 위해 만든 명확하고 친절한 설명으로, 자신만의 속도에 맞춰 반응형 디자인을 배워 보세요. 모든 개념을 작고 편안한 단계로 나누고, 일상생활의 예를 사용하며, 헷갈리는 전문 용어는 건너뜁니다. 서두를 것도, 외울 것도 전혀 없습니다.

이 튜토리얼 내내 Vibe Coding Academy 아바타가 부드러운 예시와 간단한 연습, 실생활 팁과 함께 곁에서 함께 걸으며, 작은 성공을 하나씩 쌓아 자신감을 기르도록 도와드립니다.

끝까지 마치면 웹사이트가 큰 화면에서도 작은 화면에서도 어떻게 꼭 맞게 보이는지 이해하게 되고, 복잡한 설정 없이 직접 확인하는 방법도 알게 됩니다.

What's Inside

Four short chapters, about 1.5 hours in total. Take a break whenever you like; the page will remember where you are.

  • 1.다정한 환영 인사와 "반응형"의 진짜 의미
  • 2.화면 크기가 왜 이렇게 다양한지
  • 3.어떤 화면에도 맞도록 유연하게 만들기
  • 4.내 휴대폰으로 페이지 테스트하기
Vibe Coding Academy Avatar
"Take your time, and remember: you cannot break anything by trying. I'll be with you the whole way."