이론 반응형 웹 (Responsive Web Design)
페이지 정보
작성자 모던DS
조회 2회 작성일 26-02-26 03:55
조회 2회 작성일 26-02-26 03:55
본문
반응형 웹 (Responsive Web Design)
반응형 웹은 하나의 HTML 소스로 PC, 태블릿, 스마트폰 등 접속하는 기기의 화면 크기에 맞춰 레이아웃이 자동으로 변하는 웹 디자인 방식을 말합니다.
핵심 기술 3요소
가변 그리드 (Fluid Grid): 요소의 너비를 고정된 값(
px)이 아닌 백분율(%)이나vw,vh같은 가변 단위로 설정하여 화면 크기에 따라 유동적으로 변하게 합니다.가변 이미지 (Flexible Images): 이미지의 크기가 부모 요소보다 커지지 않도록
max-width: 100%설정을 사용하여 화면 너비에 맞게 조절합니다.미디어 쿼리 (Media Queries): 접속한 기기의 해상도(너비)를 감지하여 특정 범위마다 서로 다른 CSS 스타일을 적용합니다.
반응형 웹 구현 필수 코드 (Viewport)
모바일에서 화면을 올바르게 인식하게 하려면 <head> 태그 안에 반드시 아래의 메타 태그가 포함되어야 합니다.
뷰포트의 너비를 스마트폰 화면 너비에 맞추고 초기 화면 배율을 1로 지정
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
간단한 미디어 쿼리 예시
CSS
/* 기본 스타일 (모바일 우선) */
.box { width: 100%; background: lightblue; }
/* 화면 너비가 768px 이상일 때 (태블릿 등) */
@media (min-width: 768px) {
.box { width: 50%; background: lightgreen; }
}
/* 화면 너비가 1024px 이상일 때 (PC 등) */
@media (min-width: 1024px) {
.box { width: 25%; background: lightcoral; }
}
- 이전글기기의 화면 크기 - 휴대폰, 태블릿, 스마트워치, 노트북 등 26.02.26
- 다음글CSS 그러데이션(Gradients) 정리 26.02.26