10-1. CSS 반응형 웹, 뷰포트, 미디어쿼리, 미디어 쿼리 유용한 사이트

10-1. CSS 반응형 웹, 뷰포트, 미디어쿼리, 미디어 쿼리 유용한 사이트

2021. 10. 17. 12:42ㆍHTML + CSS + JS

728x90

1. 반응형 웹

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

2. 뷰포트

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

뷰포트는 <head> 태그 사이에 <meta> 태그를 사용해서 작성한다.

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

뷰포트 단위

1️⃣ vw(viewport width) : 1vw는 뷰포트 너비의 1%

2️⃣ vh(viewport height) : 1vh는 뷰포트 높이의 1%

3️⃣ vmin (viewport minimum) : 뷰포트 너비와 높이 중에서 작은 값의 1%

4️⃣ vmax (viewport maximum) : 뷰포트 너비와 높이 중에서 큰 값의 1%

3. 미디어쿼리

CSS모듈인 미디어 쿼리는 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하는 방법이다.

미디어 쿼리를 사용하면 접속하는 기기의 화면 크기에 따라 레이아웃이 달라진다.

즉 사용자가 어떤 미디어를 사용하는가에 따라 사이트의 형태가 바뀌도록 CSS를 작성하는 방법을 미디어 쿼리라고 한다.

@media [only | not] 미디어 유형 [and 조건] * [and 조건]

-> only : 미디어 쿼리를 지원하지 않는 웹 브라우저는 미디어 쿼리를 무시하고 실행하지 않는다.

-> not : 다음에 지정하는 미디어 유형을 제외한다.

1️⃣ 미디어 유형의 종류

all : 모든 미디어 유형에서 사용할 css를 정의한다.

print : 인쇄장치에서 사용할 css를 정의한다.

screen : 컴퓨터 스크린에서 사용할 css를 정의하고, 스마트폰 스크린도 포함된다.

tv : 음성과 영상이 동시에 출력되는 tv에서 사용할 css를 정의한다.

aural : 음성 합성 장치에서 사용할 css를 정의한다.

braile : 점자 표시 장치에서 사용할 css를 정의한다.

handheld : 패드처럼 손에서 들고 다니는 장치를 위한 css 를 정의한다.

projection : 프로젝터를 위한 css를 정의한다.

try : 디스플레이 기능이 제한된 장치에 맞는 css를 정의한다.

embossed : 점자 프린터에서 사용할 css를 정의한다.

2️⃣ 웹 문서의 가로너비와 세로 높이 지정

width, height : 웹 페이지의 가로 너비, 세로 높이를 지정한다.

min-width, min-height : 웹 페이지의 최소 너비, 최소 높이를 지정한다.

max-width, max-height: 웹 페이지의 최대 너비, 최대 높이를 지정한다.

3️⃣ 단말기의 가로 너비와 세로 높이 지정

device-width, device-height : 단말기의 가로 너비, 세로 높이를 지정한다.

min-device-width, min-deivce-height : 단말기의 최소 너비, 최소 높이를 지정한다.

max-device-width, max-device-height : 단말기의 최대 너비, 최대 높이를 지정한다.

4️⃣ 화면 회전 속성

orientation 속성을 사용하면 기기의 방향을 확인할 수 있다.

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

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

5️⃣ 미디어 쿼리의 중단점

미디어 쿼리를 작성할 때 화면 크기에 따라 서로 다른 css를 적용할 분기점을 중단점이라고 한다.

대부분 기기의 화면 크기를 기준으로 한다,

데스크톱 : 화면 크기가 1024px 이상이면 데스크톱으로 설정한다.

태블릿 : 화면 크기가 768px 이상이면 태블릿으로 지정한다.

https://yesviz.com/devices.php

Viewport Size, Resolution, Screen Sizes, CSS PPI and CSS media queries for popular Devices | YesViz

A Useful database contains Viewport Size, Resolution, Screen Sizes, CSS PPI and CSS media queries for popular devices including phones, tablets, smart watches and laptops.

yesviz.com

여기 가면 미디어 쿼리를 작성하는데 필요한 뷰 포트의 크기값이 정리된 사이트를 볼 수 있다.

4. 미디어 쿼리 적용하기

1️⃣ 외부 CSS 파일 연결하기

<link rel = "stylesheet" media = "미디어 쿼리 조건" href = "css 파일 경로" >

@import url (css 파일 경로) 미디어 쿼리 조건

-> CSS 파일이 많고 규모가 큰 사이트를 개발한다면 <link> 태그를 주로 사용한다.

2️⃣ 웹 문서에 직접 정의하기

<style media = "<조건>" {

<스타일 규칙 >

}

</style>

<style>

@media <조건> {

<스타일 규칙>

}

</style>

728x90

'HTML + CSS + JS' 카테고리의 다른 글

10-3. CSS 그리드 레이아웃 (0)	2021.10.17
10-2. CSS 플렉스 박스 레이아웃 (flex-direction, flex-flow, flex-wrap, justify-content, align-content, align-self, align-items) (0)	2021.10.17
9-4. CSS 트랜지션과 애니메이션 연습문제 1,2 (0)	2021.10.15
9-3. CSS 애니메이션 사용하기 (animation,@keyframs, animation-duration, ..) (0)	2021.10.15
9-2. CSS 트랜지션 (transition-property, transition-duration, transition-timing-function, transition-delay) (0)	2021.10.15

💖💗

💖💗

태그

최근글

댓글

공지사항

아카이브

'HTML + CSS + JS' 카테고리의 다른 글

관련글

티스토리툴바