✅ 반응형 웹이란?
- 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린, 디바이스 종류)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미
- 하나의 소스 코드로 모든 스크린에 최적화된 웹 사이트를 구축할 수 있는 방법론
- 디바이스 종류에 따라 웹 페이지의 크기가 자동으로 재조정
모바일 퍼스트
- 사용자 경험(UX)을 디자인할 때 모바일일 경우에 최우선으로 초점을 맞춰 디자인하는 것
반응형 웹의 특징
- 하나의 URL을 기반으로 화면이 바뀐다.
- 유연한 레이아웃에 대응하여 항상 최적의 화면을 제공함으로써 다양한 스크린 사이즈를 지닌 디바이스에 적응할 수 있다.
❌ 별도의 URL이 있다면 반응형 웹이라고 부르지 않습니다.
Ex) m.domainname.com 같은 식으로, 도메인 앞에 모바일을 의미하는 “m”을 붙임으로써 구분할 경우, 반응형 웹이 아니다.
반응형 웹의 장점
- 효율적인 유지보수 : 하나의 HTML 소스만 있다.
- 검색엔진 최적화 유리 : 하나의 URL 기반으로 사용자 접속을 효율적으로 관리
반응형 웹의 단점
- 사이트의 속도 저하 : 모바일 전용 사이트에 비해 무겁다.
- 웹 브라우저 호환성 문제 : 브라우저마다 호환성 문제가 있을 수 있으므로 100% 맞춤 디자인이 어렵다.
✅ 미디어 쿼리
- CSS2.1 부터 미디어 타입으로 단말기 종류에 따라 각각 다른 스타일을 적용시키는 게 가능하다.
- 뷰포트(브라우저 창)의 크기에 따라 서로 다른 조판을 생성할 수 있다.
미디어 쿼리 적용법
- CSS 파일을 HTML 파일에 적용하던 것처럼
<head>태그 안에<link>태그를 위치 시킨다. - 다른 css 파일을 적용할 때와 다른 점은 미디어 속성을 사용하여 조건을 지정한다는 점
- 미디어 속성 내 해당 조건을 만족할 때만 해당 css 파일을 불러오게 된다.
<link href="css파일이름.css" media="screen and (min-width: 400px) and (max-width: 1000px)" rel="stylesheet">- HTML 파일 내
<head>태그 안에서<style>태그를 열어 미디어 쿼리를 작성할 수도 있다. - 방법도 미디어 속성 내 해당 조건을 만족할 때에만 해당 스타일을 적용하게 된다.
<style type="text/css" media="screen and (min-width: 400px) and (max-width: 1000px)">
/* 여기 css를 작성합니다. */
</style>
매일매일