jonbeo 님의 블로그

반응형 웹디자인 ✅ 모바일 퍼스트 전략과 실무 설계법

요즘 웹사이트는 모바일 사용률이 70% 이상입니다.그래서 이제는 “데스크탑 기준으로 줄여가는 방식”이 아니라👉 모바일 기준으로 확장해가는 설계 (Mobile First) 가 표준입니다.🌱 1. 모바일 퍼스트란?모바일 퍼스트(Mobile First) 는 디자인과 개발을 “가장 작은 화면”에서 시작하여,점점 화면이 커질 때마다 스타일을 확장하는 접근 방식입니다. 📌 핵심 개념:❌ “큰 화면을 줄이는 것” → ✅ “작은 화면을 확장하는 것”📏 2. 기본 단위 설계 – 뷰포트 기준 html { font-size: 16px; /* 기준 단위 */}.container { width: 100%; max-width: 1200px; margin: 0 auto;} 📌 모바일에서는 항상 100% 기반 레이아..

반응형 디자인은 하나의 코드로 다양한 화면 크기를 지원하는 방법입니다.사용자가 어떤 기기를 쓰든지, 최적화된 UI/UX를 제공할 수 있도록 만드는 것이 목표입니다.🧩 1. 미디어쿼리(Media Query)📌 기본 문법 @media (조건) { /* 적용할 CSS */}예제 – 화면 크기에 따른 스타일 변경 .container { width: 100%;}@media (min-width: 768px) { .container { width: 750px; }}@media (min-width: 1200px) { .container { width: 1140px; }} 👉 화면 크기에 따라 유동적으로 레이아웃 변경 가능📱 2. 모바일 퍼스트 전략기본 스타일 = 모바일 기준큰 화면(태블릿/..

👀 이런 경험, 있지 않으셨나요?데스크톱에서는 완벽하던 웹페이지가 모바일에서는 글씨가 넘치고, 버튼이 겹치고, 이미지가 너무 작게 나오는 상황!그럴 때 필요한 것이 바로 ‘반응형 웹’과 ‘미디어쿼리(Media Query)’ 입니다.✅ 반응형 웹이란?반응형 웹(Responsive Web) 은 화면 크기나 디바이스 종류에 따라 웹사이트의 레이아웃, 글꼴, 이미지 크기 등이 유연하게 조정되는 웹 디자인 기법이에요.📱 PC, 태블릿, 스마트폰 등 어떤 환경에서도 웹페이지가 잘 보이도록 만드는 것이 목표!🧠 왜 필요할까?사용자 디바이스가 다양해짐 (예: 4.7인치 스마트폰 ~ 27인치 모니터까지!)화면 크기마다 보여주는 방식이 다르면 더 보기 편하고 터치도 쉬워요SEO(검색 최적화)에도 도움됨🎯 핵심 도구..