개발 공부 기록하기

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) 화면의 크기일 때 어떻게 보이는지 캡처한 동영상이다.
저작자표시 비영리 변경금지

'프밍 > CSS' 카테고리의 다른 글

Section 8. CSS 박스 모델(2)  (0) 2023.01.09
Section 8. CSS 박스 모델(1)  (0) 2023.01.08
Section 7. CSS 선택자의 세계(3)  (1) 2023.01.04
Section 7. CSS 선택자의 세계(2)  (1) 2023.01.01
DAY 29. 단원 마무리 문제 풀기  (0) 2022.12.31
'프밍/CSS' Related Articles more
Comments