-
02-6⠀CSS 반응형 웹과 뷰포트 / 미디어쿼리web/HTML + CSS 2022. 3. 1. 15:58
< 반응형 웹 responsive web design >
웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현해줌
< 뷰포트 viewport >
모바일 기기 화면에 실제 내용이 표시되는 영역
<meta name="viewport" content= "속성=속성값, 속성=속성값 ...... ">
<head> 와 </head> 사이에 태그를 이용하여 뷰포트 지정
*속성값
뷰포트 너비 : width="device-width" 또는 "크기"
뷰포트 높이 : height="device-height" 또는 "크기"
확대 / 축소 여부 : user-scalable="yes(=1,device-width=10,device-height=10 으로 간주)" 또는 "no"
초기 확대 / 축소 값 : lnitial-scale="1~10" (기본값은 1)
*가장 많이 사용하는 속성
<meta name="viewport" content="width=device-width, initial-scale=1">
(웹 페이지 뷰포트의 너비를 스마트폰 화면 너비에 맞추고 초기 화면 배율을 1로 지정)
*메타 뷰포트가 지정되어야 미디어쿼리가 실행됨
*vw / vh / vmin / vmax
뷰포트를 기준으로 하는 단위
vw : 1vw는 뷰포트 너비의 1% 와 같음 (width=1000px, 1vw=10px)
vh : 1vh는 뷰포트 높이의 1%와 같음 (height=800px, 1vh=8px)
vmin : 뷰포트 너비와 높이중 작은 값의 1%
vmax : 뷰포트 너비와 높이중 큰 값의 1%
< 미디어쿼리 media quary >
사이트에 접근하는 기기의 해상도에 따라 서로 다른 스타일 시트를 적용해 주는 CSS모듈
<style>^@media only/not 미디어유형 and (속성:속성값) and (속성:속성값) { ...... }^</style>
특정 미디어에서 어떤 css 모듈을 적용할 것인지 지정하는 미디어쿼리 조건문
*only/not
only: 미디어쿼리를 지원하지 않는 웹 브라우저에서는 미디어쿼리 실행x
not : 뒤에 오는 미디어유형을 제외시킴 (not tv:tv제외한 모든 미디어유형에 적용)
*미디어유형
all : 모든 미디여 유형에서 사용
print : 인쇄 장치에서 사용
screen : 컴퓨터 / 스마트폰 스크린에서 사용
tv : 음성, 영상 동시출력 tv 에서 사용
aural : 화면을 읽고 소리로 출력되는 음성 합성 장치에서 사용
braille : 점자 표시 장치에서 사용
handheld : 패드 (pad) 등 들고 다니는 장치에서 사용
projection : 프로젝터에서 사용
tty : 디스플레이 기능 제한된 장치에서 사용 (px단위 사용x)
embossed : 점자 프린트에서 사용
*속성
- 웹 페이지의 너비 / 높이 지정
width / height : 웹 페이지의 너비 / 높이 지정
min-width / min-height : 웹 페이지의 최소 너비 / 높이 지정
max-width / max-height : 웹 페이지의 최대 너비 / 높이 지정
- 단말기의 너비 / 높이 지정
device-width / device-height : 단말기의 너비 / 높이 지정
min-device-width / min-device-height : 단말기의 최소 너비 / 높이 지정
max-device-width / max-device-height : 단말기의 최대 너비 / 높이 지정
- 단말기의 화면 회전 속성
orientation : portrait
단말기의 세로 모드를 지정
orientation : landscape
단말기의 가로 모드를 지정
*기기 유형별 너비
max-width:1900px (1281~1900)
와이드 pc
max-width:1280px (1025~1280)
일반 px
max-width:1024px (769~1204)
태블릿
max-width:768px (641~768)
중형 태블릿
max-width:640px (320~640px)
소형 태블릿 및 모바일
max-width:320px
최소 모바일
https://bortfolio.tistory.com/50 < 미디어쿼리의 중단점 >
화면 크기에 따라 css모듈을 다르게 적용
일반적으로 모바일기기 / 테블릿 / 데스크톱 정도로만 구분
*모바일 퍼스트 기법 mobile first
모바일을 먼저 고려하여 미디어 쿼리를 작성하는 것
< 미디어 쿼리 적용하기 >
미디어쿼리 조건문 : only/not 미디어유형 and (속성:속성값) and (속성:속성값)
*외부 css 파일 연결
<link rel="stylesheet" madia="미디어쿼리 조건문" href="파일/파일경로"> -주로사용
@import url("파일/파일경로") 미디어쿼리 조건문
*직접 <style></style> 태그에 정의
<style media=미디어쿼리 조건문>{......}</style>
<style>@media 미디어쿼리 조건문;{......}</style> -주로사용
'web > HTML + CSS' 카테고리의 다른 글
02-8⠀CSS 그리드 레이아웃 (css grid layout) (0) 2022.03.05 02-7⠀CSS 플렉서블 박스 레이아웃 (flex box layout) (0) 2022.03.01 02-5⠀CSS 트랜지션 / 애니메이션 (0) 2022.02.23 02-4⠀CSS 고급 선택자 / 가상 클래스 / 가상 요소 (0) 2022.02.23 02-3⠀CSS 배경 / 그라데이션 (0) 2022.02.18