학습 센터로 돌아가기

📱 반응형 웹 디자인 실전

미디어 쿼리, 플렉스박스, 그리드를 활용한 반응형 레이아웃을 실습으로 구현합니다

뷰포트 시뮬레이터

1200px
1200 x 800 (desktop)

Interactive Flexbox Playground

Container Properties

Live Preview

Item 1
flex: 0 1 auto
Item 2
flex: 0 1 auto
Item 3
flex: 0 1 auto
Generated CSS:
.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
}

자주 사용하는 Flexbox 패턴

Flexbox 축 시각화

주축 (Main Axis)
교차축 (Cross Axis)
아이템 1
1
아이템 2
2
아이템 3
3
현재 설정값
flex-direction:row
justify-content:flex-start
align-items:stretch
주축 (Main Axis):flex 아이템들이 배치되는 기본 축입니다. (가로 방향)
교차축 (Cross Axis):주축에 수직인 축입니다. (세로 방향)

• justify-content는 주축을 따라 아이템을 정렬합니다(flex-start)

• align-items는 교차축을 따라 아이템을 정렬합니다(stretch)

🎯 실습 과제

  1. 1. Flexbox를 사용해 반응형 네비게이션 바 만들기
  2. 2. CSS Grid로 반응형 갤러리 레이아웃 구현하기
  3. 3. 미디어 쿼리로 모바일/태블릿/데스크톱 레이아웃 전환하기
  4. 4. 터치 친화적인 모바일 인터페이스 설계하기
🧑‍💻

1nnovator 김민성

JavaScript 학습 센터 개발자

기술 블로그•Interactive JavaScript Learning Platform

🌟 이 프로젝트가 도움이 되셨다면 블로그에서 더 많은 개발 이야기를 확인해보세요!

🤖이 페이지는 생성형 AI의 도움을 받아 제작되었습니다.