미디어 쿼리란 ?
회면 해상도, 기기의 방향 등 다양한 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 css의 속성
미디어 쿼리 기본문법
기본 문법 : @media [only or not] [미디어 유형] [and or ,] (조건문){실행문}
1. [only or not] *생략 가능
- only는 미디어쿼리를 지원하는 브라우저에서만 미디어 쿼리를 해석하게 해주는 키워드
- not은 not 다음에 따라오는 키워드를 부정하는 키워드
2. 미디어 유형
- all : 모든 장치
- print : 인쇄장치
- screen : 컴퓨터 화면 장치 or 스마트 기기
- 기타..
3. [and or ,] *생략가능
- and는 앞 뒤 조건이 모두 true 일 때 해석하라는 의미
- , (콤마)는 앞 뒤 조건 중 하나만 true 일 때 해석하라는 의미
4. 조건문
- width/ height : 웹 페이지의 가로/높이
- device-width/device-height : 기기의 가로/높이
- aspect-ratio : 화면 비율
- color : 기기의 비트 수
등을 활용하여 조건문을 작성하고 실행문을 작성
5. 적용 사항 및 주의 사항
- 링크 적용 방식 : <link href="미디어쿼리.css" rel="stylesheet">
- 주의 사항
- 띄어쓰기 주의 : [and or ,] 뒤에는 반드시 한칸을 띄어줘야하 함
- min/max : min을 사용할 때는 반드시 크기가 작은 순대로, max를 사용할 때는 크기가 큰 순으로 작성해야 함
뷰 포트
뷰 포트란 화면에서 실제 내용이 표시되는 영역으로 스마트 기기는 기본으로 설정되어 있는 값이 뷰 포트 영역이 된다. 이 때 기본으로 설정되어 있는 뷰 포트 영역으로 인하여 웹사이트의 모습이 작게 보일 때가 있다. 그리하여 <mata>태그를 활용하여 화면의 크기나 배율을 조절해야 한다.
기본 메타 태그 문법 : <meta name="viewport" content="width=device-width, intial-scale=1,
minimum-scale=1,maximum-scale=1, user-scalable=no">
- width/height : device-width/height or 양수 - 뷰 포트의 너비/높이 지정
- intial-scale : 양수 - 초기 배율 지정, 기본값은 1로 1을 기준으로 축소/확대된 페이지 표시
- user-scalable : yes or no - 확대/축소 여부 지정 , 기본값은 yes로 no 설정 시 확대 불가능
- minimum/maximum-scale : 뷰 포트의 최소/최대 축소/확대 비율 지정. 기본 값은 0.25/0.5
'HTML > CSS' 카테고리의 다른 글
css 초기화 (0) | 2022.08.03 |
---|---|
플렉서블 박스 (0) | 2022.07.28 |
가변 그리드 (0) | 2022.07.26 |
반응형 웹 기본 개념 (0) | 2022.07.19 |
CSS 명령어 (0) | 2021.09.16 |