TIL 10___CSS basic 6(반응형 웹, 미디어 쿼리)

Young A·2021년 11월 7일
0

css

목록 보기
6/6

  • 반응형 웹 디자인은 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현해준다.

1. 모바일 기기를 위한 뷰포트

뷰포트란 스마트폰 화면에서 실제 내용이 표시되는 영역

뷰포트는 <meta> 태그를 이용해 <head></head>태그 사이에 작성한다.
PC에 맞게 제작한 웹 사이트를 모바일 기기에서 접속해 보면 모든 내용이 작게 표시된다.즉, PC화면과 모바일 화면에서 표시되는 픽셀의 차이 때문인데, 뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소해서 표시할 수 있다.

<meta name="viewport" content="속성1=값1", "속성2=값2",...">

🔹 viewport 단위

vw(viewport width) 1vw는 뷰포트 너비의 1%와 같다.
vh(viewport height) 1vh는 뷰포트 높이의 1%와 같다.
vmin(viewport minimum) 뷰포트의 너비와 높이 중에서 작은 값의 1%와 같다.
vmax(viewport maximum) 뷰포트의 너비와 높이 중에서 큰 값의 1%와 같다.


2. 미디어 쿼리(media queries)

사이트에 접속하는 장치에 따라 특정한 CSS스타일을 사용하는 방법. 미디어 쿼리를 사용하면 접속하는 기기의 화면 크기에 따라 레이아웃이 달라진다.

@media screen and (min-width:768px){
  .container {
   width: 50%;
  }
}
/* 미디어 유형이 screen이면서 최소 너비가 768px 이상일때, 
컨테이너의 50% 너비를 차지할 수 있게 해준다.

🔹 @media 속성의 미디어 유형

all 모든 미디어 유형에서 사용할 CSS를 정의한다.
print 인쇄 장치가 대상이다.
screen 주로 화면이 대상이다.
speech 음성합성장치가 대상이다.

🔹 화면 회전 속성

orientation: portrait 단말기의 세로 모드를 지정한다.
orientation: landscape 단말기의 가로 모드를 지정한다.

👉 스마트폰: min-width의 세로와 가로를 각각
portrait 320px, landscape 480px로 지정한다.

👉 태블릿: min-width의 세로와 가로를 각각
portrait 768px, landscape 1024px로 지정한다.

👉 데스크탑: landscape 1024px 이상으로 지정한다.


[참조 링크 1]
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

[참조 링크 2 / 모바일 기기의 viewport]
https://yesviz.com/devices.php

profile
야금야금. 즐겁게, 개발 🙂

0개의 댓글