오늘날 대부분의 사용자 스마트 폰으로 웹을 사용하십시오. 따라서 웹 페이지를 만들 때 모바일 반응 형 디자인 (반응 형 웹 디자인)은 필수입니다. 이 기사에서는 HTML 및 CSS 만 있습니다 모바일에 최적화 된 반응 형 웹 페이지를 만드는 방법을 소개합니다.
반응 형 웹은 무엇입니까?
화면의 크기에 따라 내용 크기를 자동으로 배포하고 조정하는 웹 디자인 방법입니다. | 기능 | 설명 | | —— | —— | | 하나의 HTML을 사용한 다양한 장치 지원 | 사용자 경험 개선 (UX) | Google 검색에서 모바일 최적화 우선적 처리 📌 반응 유형도 PC, 태블릿 및 스마트 폰에 있습니다. 동일한 주소 (URL)를 사용하십시오.
반응 형 웹의 핵심 요소
뷰포트 설정 (메타 태그) 미디어 쿼리 유연한 레이아웃 (Fercent, Flex, Grid) 이미지 크기 자동 조정
1. 뷰포트 설정
HTML “HTML”에 포함되어야합니다. 🧩 모바일에서 줌 비율과 기본 크기를 설정하는 필수 요소입니다.
2. 유체 레이아웃
❗ 고정 대신 흐름 (% 또는 vw) 장치 사용 (PX)
“CSS.Container {너비 : 90%; 최대 width : 1200px; 마진 : 0 Auto;}”
3. 미디어 쿼리를 적용하십시오
화면 크기에 따라 다른 스타일 :“CSS @Media (max-width : 768px) {.nav-menu {flex-direction : column;} .Banner h1 {font-size : 1.4rem;} “| 조건 | 설명 | | —— | —— | | 맥스 폭 | 화면이 작아지면 | 최소 폭 | 화면이 커지면 적용됩니다
4. 이미지 반응성 처리
“CSS IMG {너비 : 100%; 높이 : 자동;}”🖼️ ALT 태그 예 :
5. Flexbox & Grid를 사용하십시오
“`CSS .flex-container {display : flex; flex-wrap : 랩; 갭; 갭 : 16px;}“`css .grid-container {display : grid; grid-template-columns : 반복 (Auto-Fit, minmax (200px, 1fr)); 자동 결제는 반응 형 레이아웃 구성에 매우 유용합니다
실제 예제 요약
“`html”“css @media (max-width : 600px) {h1 {font-size : 1.5rem;}}“}
반응성 테스트 도구
| 도구 | url | | —— | – | – | | 크롬 개발자 도구 | F12 →“장치 도구 모음 토글”| 반응 적으로 앱 | 실시간 다중보기 확인 | 스크린 플라이 | 온라인 장치 테스트
마치다
모바일 반응 형 웹은 옵션이 아니라 필수입니다. 각 장치마다 다른 사용자 경험을 고려하지 않으면 고객 이탈, 순위 검색 및 접근성 문제로 이어질 수 있습니다. 오늘 배운 설정 만 기억하더라도 모바일 친화적 인 웹 페이지를 구현할 수 있습니다. 🔎 다음 게시물 주제 추천 → No. 12 : CSS Flexbox 및 그리드 완벽한 이해 → No. 36 : 10 버튼 효과 CSS와 함께 구현되었습니다.
참조
https://developer.mozilla.org/ko/docs/learn/css/csslayout/mediaqueries https://responsively.app/