DAY 30. 반응형 웹 디자인(Responsive Web Design)

프밍/CSS

DAY 30. 반응형 웹 디자인(Responsive Web Design)

태영(泰伶) 2023. 1. 7. 15:14

반응형 웹 디자인_{responsive web design}

PC, 스마트폰, 태블릿 PC, 스마트 TV 등 다양한 화면 크기에 맞게 웹 요소를 재배치하고 표시 방법을 바꿔 웹 사이트를 구현하는 방법.

모바일에서 웹 사이트를 PC버전으로 접속했을 때 모든 내용이 작게 보이는 이유

∵ PC 화면에서의 픽셀 ≠ 모바일 화면에서의 픽셀

→ *뷰포트_viewport를 지정하면 접속한 기기의 화면에 맞게 확대/축소해서 표시할 수 있다.

^{* 뷰포트(viewport) : 스마트폰 화면에서 실제 내용이 표시되는 영역}

뷰포트 지정하는 방법

<!DOCTYPE html>
   <html>
      <head>
         <meta name="viewport" content="속성1=값1, 속성2=값2, ........">
      </head>
      <body>
      </body>
   </html>

위처럼 <head> tag 안의 <meta> tag를 이용해서 뷰포트를 지정해 준다.

**▼ content 안에 쓰는 뷰포트 속성**
속성	설명	사용 가능한 값	default 값
width	뷰포트 너비	device-width 또는 크기	브라우저 기본값
height	뷰포트 높이	device-height 또는 크기	브라우저 기본값
user-scalable	확대/축소 가능 여부	**yes 또는 no	yes
initial-scale	초기 확대/축소 값	1~10	1

^{** user-scalable=yes로 지정하게 되면, 처음 화면을 켰을 때에 제일 축소되어 있는 형태인 1로 간주하며, device-width와 device-height 값을 최고 많이 확대한 10으로 간주한다.}

제일 많이 쓰이는 뷰포트는 다음과 같다.

<meta name="viewport" content="width=device-width, initial-scale=1">

뷰포트 단위

안 그래도 UDEMY 부트캠프 강의를 들으면서 상대적 크기, 절대적 크기를 다룰 때 vw, vh.. 이런 것들이 나와서 무슨 뜻인가 찾아본 적이 있었다.

그땐 사실 이해 못 했는데, 이게 여기서 나올 줄이야..🙄

https://from-ms-to-developer.tistory.com/entry/Section-6-CSS-%EA%B8%B0%EC%B4%882

Section 6. CSS 기초(2)

06. 색상 시스템: RGB와 알려진 색상 색상은 배경 색, 테두리, 그림자 등등 많은 곳에 쓰이는 속성이기 때문에, 굉장히 자주 등장한다. 알려진 색상 이름으로 작성하는 방법 시중의 모든 브라우저

from-ms-to-developer.tistory.com

vw, vh를 다룬 부분은 윗 포스팅의 11. 에 적혀있다ㅎ

다시 한번 정리하자면,

⚬	vw	= viewport width	= 뷰포트 너비 × 1%
⚬	vh	= viewport height	= 뷰포트 높이 × 1%
⚬	vmin	= viewport minimum	= viewport width vs. viewport height 를 비교해서 작은 값 × 1%
⚬	vmax	= viewport maximum	= viewport width vs. viewport height 를 비교해서 큰 값 × 1%

만약 여기서 세로 화면 → 가로 화면으로 돌린다면

세로 화면의 vw → 가로 화면의 vh

세로 화면의 vh → 가로 화면의 vw

가 된다.

다만, vmin과 vmax는 가로와 세로 중에서 작은 값 / 큰 값을 의미하므로, 이 값들은 화면을 돌린다 해서 변하지는 않는다.

예제 1.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>viewport</title>
         <style>
            h1 {
               font-size: 5vw;/* 뷰포트의 너비의 5%*/
               text-align: center;
            }
         </style>
      </head>
      <body>
         <h1>안녕하세요?</h1>
      </body>
   </html>

↓

PC의 브라우저뿐만 아니라 스마트폰, 태블릿 PC 등등 기기들도 다양하고 그 화면의 크기 또한 천차만별이다.

하지만 각각의 기기에서 어떻게 보일까 테스트하기 위해서 모든 기기를 구비해놓을 수도 없는 법..!! (돈이...탈탈..??)

그럴 때는 Chrome 브라우저의 '디바이스 모드'를 사용하면 확인할 수 있다.

디바이스 모드

Step 1. Ctrl + Shift + I (또는 F12 )를 눌러 개발자 도구 창을 열어서 왼쪽에서 두 번째 아이콘(디바이스 모드)을 누른다.

개발자 도구 창을 연 후에 Ctrl + Shift + M (Toggle device toolbar)을 누르는 것도 가능!!

Step 2. 디바이스 모드의 상단에 Responsive 항목에서 현재 화면의 너비값, 높잇값을 알 수 있다.

너빗값, 높잇값 아래쪽 조금 더 진한 회색 부분에 비밀이 숨겨져(?) 있다ㅎㅎ

Step 3. 가장 작은 모바일 화면 320px에서부터 제일 넓은 화면까지 (내가 직접 크기 조정을 하지 않아도) 조금 더 진한 회색 부분을 클릭해보면서 미리 보기를 할 수 있다.

흰색 선으로 구분되어 있는 조금 더 진한 회색 부분을 Mobile S(320px) < Mobile M(375px) < Mobile L(425px) < Tablet(768px) < Laptop(1024px) < Laptop L(1440px) < 4K(2560px) 화면의 크기일 때 어떻게 보이는지 캡처한 동영상이다.

저작자표시 비영리 변경금지 (새창열림)

DAY 30. 반응형 웹 디자인(Responsive Web Design)

반응형 웹 디자인responsive web design

↓

반응형 웹 디자인_{responsive web design}