17. 반응형 웹
- 반응형 웹
- 뷰포트(viewport)
- 미디어 쿼리
반응형 웹
- PC, TV, 스마트 기기 등 다양한 기기에 반응하는 웹 사이트
- 사용자가 접속하는 기기 또는 환경에 맞춰 화면의 크기가 자동으로 조절되어 최적화된 화면 레이아웃을 보여줌
- 사용자에게 편리한 웹 사이트를 제공하여 사용자가 웹 사이트의 내용을 제대로 보기 위해 스크롤 막대를 옮기거나 화면을 확대하는 수고를 최대한 줄일 수 있다.
모든 사이트를 반응형 웹 사이트로 만들 필요는 없고, 사이트의 사용 목적에 맞춰서 결정하면 된다.
반응형 웹 사이트에 적합한 경우 | PC용 웹 사이트 사용자와 모바일용 웹 사이트 사용자의 접속 빈도가 비슷한 경우
모바일용 사이트에 적합한 경우 | 사용자가 이동 중에 모바일 기기로 접속하는 경우가 많은 사이트 ex.) 포털 사이트, 쇼핑몰 사이트, 어플 등
반응형 웹의 장점
- 기기의 화면 크기나 해상도에 영향을 받지 않음
웹 브라우저가 포함된 기기라면 어떤 기기에서나 화면 크기와 해상도에 상관없이 알맞은 웹 사이트 레이아웃을 보여줌 - 화면 변화에 즉시 반응
브라우저 화면 크기를 바꾸면 바뀐 화면 크기에 맞게 사이트 레이아웃이 변경됨 - 어느 기기에서도 사이트 주소가 동일
모바일 주소를 따로 만들지 않아도 됨 cf.) 도메인 앞에 m이 붙은 것들은 따로 비용을 들인 것. 이 경우에 해당이 되지 않는다. - 유지 관리가 편함
기기마다 따로 페이지를 만드는 것이 아니기 때문에 코드와 콘텐츠 유지가 간단하고 편리
뷰포트(viewport) | 스마트폰 화면에서 실제 내용이 표시되는 영역
pc 화면에 맞춰 제작한 사이트를 모바일 기기에서 확인 시 문제점이 발생한다. 모바일 기기에서 글자가 아주 작게 표시되는 경우가 대표적인데 이는 pc 화면과 모바일 화면의 픽셀 표시 방법이 다르기 때문이다. 따라서 뷰포트를 지정하면 기기의 화면 크기에 맞춰 내용을 확대 및 축소해서 표시 가능하다.
뷰포트 작성 방법 | <head> 안에 <meta name="viewport">를 이용하여 작성한다.
<meta name="viewport" content="속성1=값1, 속성2=값2, … ">
뷰포트 속성
| 종류 | 설명 | 사용 가능한 값 | 기본값 |
| width | 뷰포트 너비 | device-width 또는 크기 | 브라우저 기본값 |
| height | 뷰포트 높이 | device-height 또는 크기 | 브라우저 기본값 |
| user-scalable | 확대/축소 가능 여부 | yes 또는 no | yes |
| initial-scale | 초기 확대/축소 값 | 1~10 | 1 |
사용 예시
<!-- 모바일에서 이 페이지를 열었을 때 1.0(원본 사이즈)로 보여준다 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
뷰포트 단위
| vw(viewport width) | 1vw는 뷰포트 너비의 1%와 같음 |
| vh(viewport height) | 1vh는 뷰포트 높이의 1%와 같음 |
| vmin(viewport minimum) | 뷰포트의 너비와 높이 중에서 작은 값의 1%와 같음 |
| vmax(viewport maximum) | 뷰포트의 너비와 높이 중에서 큰 값의 1%와 같음 |
뷰포트의 너비가 1000px, 높이가 800px일 때
1vw = 10px
1vh = 8px
1vmin = 8px
1vmax = 10px
cf.) 브라우저는 10px이하의 글자의 경우 10px로 고정한다.
미디어 쿼리 | 사이트에 접속하는 기기별로 적용할 스타일 파일을 다르게 지정해 주는 CSS의 모듈. 미디어 쿼리를 사용해 적용하는 스타일을 기기마다(화면 크기마다) 전환할 수 있다.
@media [only 또는 not][미디어 유형][and 또는 ,] (조건문) {
실행문
}only의 경우 요즘 대부분의 사이트가 미디어 쿼리를 지원하기 때문에 작성하는 의미가 없어졌으므로 생략 가능. not은 특정 미디어 유형을 제외하고 싶을 때. ex.) not tv (tv는 제외하고 다른 기기에서는 미디어 쿼리 적용)
미디어 유형은 all, print(인쇄 장치), screen(컴퓨터 화면 장치 또는 스마트 기기의 화면), tv(영상과 음성이 동시에 출력되는 장치)가 있다. 주로 사용하는 건 screen.
[and 또는 ,(콤마)] (조건문) 에서 ,는 or의 기능을 한다고 보면 된다.
@media screen and (min-width:768px) and (max-width:1439px) {
스타일 작성
}
cf.) 화면 회전 속성
orientation | 속성 값으로는 landscape(가로 모드, 기본값) 과 portrait(세로 모드) 가 있다.
/* iPhoneX를 가로로 돌릴 때 */
@media screen and (min-divice-width: 812px) and (orientation: landscape) {}
※ 미디어 쿼리 작성 시 주의사항
- 논리 연산자 and 구문을 사용할 때 and 구문 뒤에 항상 공백을 한 칸 띄워줘야 한다.
- min을 사용 시, 크기가 작은 순서대로 작성
- max를 사용 시, 크기가 큰 순서대로 작성
/* min 구문을 사용할 때 */
@media all and (min-width:320px) { 실행문 } /* 320px 이상일 때 */
@media all and (min-width:768px) { 실행문 } /* 768px 이상일 때 */
@media all and (min-width:1024px) { 실행문 } /* 1024px 이상일 때 */
/* 위 코드의 min을 max로 바꾼다면 각각의 픽셀 이하일 때 스타일을 적용하는 것이다. */
/* max의 경우는 픽셀이 큰 숫자가 먼저 */
미디어 쿼리 적용 방법
<!-- <link> 이용 -->
<link rel="stylesheet" media="미디어 쿼리 조건" href="css_파일_경로">
<link rel="stylesheet" media="screen and (max-width: 768px)" href="mystyle.css" />
<!-- <style> 이용 -->
@import url("css_파일_경로") 미디어_쿼리_조건
'새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 2주차 블로그 포스팅'
'새싹 프론트엔드' 카테고리의 다른 글
| [새싹 프론트엔드] 10/28 (그리드 레이아웃) (0) | 2022.10.28 |
|---|---|
| [새싹 프론트엔드] 10/27~28 (플렉스 박스) (0) | 2022.10.27 |
| [새싹 프론트엔드] 10/24~25 (테이블, 목록, 폼) (0) | 2022.10.24 |
| [새싹 프론트엔드] 10/18~24 (CSS) (0) | 2022.10.18 |
| [새싹 프론트엔드] 10/17 (HTML 기초) (0) | 2022.10.17 |