- 미디어 쿼리 : 미디어 타입에 따라 CSS를 적용할 수 있는 기능
- 반응형 웹 : 웹 페이지 하나로도 데스크톱, 테블릿 등에 맞게 디자인이 자동으로 변경 → 미디어 쿼리 사용
- 뷰포트 설정
- meta 태그 : 웹 페이지에 추가 정보를 제공할 때 사용
- view port meta 태그 : name 속성에 viewport가 입력된 meta 태그
<meta name="viewport" content="user-scalable=no, initial-scale=1,maximum-scale=1">
| 값 | 설명 | 예 |
| width | 화면 너비 | width=240 |
| height | 화면 높이 | height=800 |
| initial-scale | 초기 확대 비율 | initial-scale=2.0 |
| user-scalable | 확대 및 축소 가능 여부 | user-scalable=no |
| minimum-scale | 최소 축소 비율 | minimum-scale=2.0 |
| maximum-scale | 최대 확대 비율 | maximum-scale=2.0 |
| target-densitydpi | DPI 지정 | target-denistydpi=medium-dpi |
- 뷰포트 메타 태그에 입력할 수 있는 값
| width | 화면 너비 |
| height | 화면 높이 |
| initial-scale | 초기 확대 비율 |
| user-scalable | 확대 및 축소 가능 여부 |
| minumun-scale | 최소 축소 비율 |
| maximum-scale | 최대 확대 비율 |
| target-densitydpi | DPI 지정 |
- 미디어 쿼리 설정
@-규칙 @-rule
- 스타일시트 내부에서 특정한 규칙을 표현하는 데 사용
- @import 규칙 - 외부 스타일을 가져옴
- @font-face 규칙 - 글꼴을 추가로 정의
@media (<미디어 쿼리>) {
<CSS 코드>
}media 속성
link 태그에 입력해서 해당 쿼리 조건에 맞는 장치에서만 CSS파일 불러옴
<link rel="stylesheet" href="<파일 이름>" media="<미디어 쿼리>">
<link rel="stylesheet" href="screen.css" media="screen" />- 모니터,프린터,테블릿,스마트폰,데스크톱 구분
<style>
@media screen {
body { background-color: red; }
}
@media print {
body { background-color: green; }
}
@media (max-width: 499px) {
body { background: red; }
}
@media (min-width: 500px) and (max-width: 799px) {
body { background: green; }
}
@media (min-width: 800px) {
body { background: blue; }
}
</style>
- 지원하는 미디어 타입
| 미디어 타입 | 설명 |
| all | 모든 장치 |
| aural | 음성 장치 |
| braile |
표시 전용 점자 장치 |
| handheld |
손으로 들고 다니는 작은 장치 |
| 프린터 | |
| projection | 프로젝터 |
| screen | 화면 |
| tty | 텔레비전 |
| embossed | 인쇄 전용 점자 장치 |
- 미디어 타입 연산자
| 연산자 | 설명 |
| only | '해당 장치에서만'을 나타냄 |
| not | '해당 장치를 제외한'을 나타냄 |
- 미디어 타입과 특징
- orientation을 제외한 모든 속성은 min 접두사와 max 접두사를 붙일 수 있음
- and 연산자를 사용해 조건을 합칠 수도 있음 즉, 반응형 웹도 구축할 수 있음
- 일반적인 미디어 쿼리 작성 순서는 데스크톱 전용을 만든 후에 태블릿이나 스마트폰 순서
| 미디어 특징 | 설명 |
| width | 화면 너비 |
| height | 화면 높이 |
| device-width device-height |
장치 너비 장치 높이 |
| orientation | 장치 방향 |
| divce-aspect-ratio | 화면 비율 |
| color | 장치 색상 비트 |
| color-index | 장치에서 표현 가능한 최대 색상 개수 |
| monochrome | 흑백 장치의 픽셀당 비트 개수 |
| resolution | 장치 해상도 |
- 화면 방향 전환
@media screen and (orientation: portrait) { // 세로
body { background-color: red; }
}
@media screen and (orientation: landscape) { // 가로
body { background-color: green; }
}- 반응형 웹 패턴 규칙
- HTML 태그 구성은 모바일 장치를 기준으로 함
- float 태그의 left와 right를 활용해 적당한 위치에 놓음
본문과 메뉴 두 가지로 구성된 페이지를 스마트폰과 데스크톱일 때의 위치 지정
모두 모바일 사이트에서는 width 속성과 float 속성 등 스타일을 해제하는 형태이다.
<head>
<title>패턴1</title>
<meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1">
<style>
* {
margin:0;
padding: 0;
}
body {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
#menu {
width: 260px;
float: left;
}
#section {
width: 700px;
float: right; /* left로 입력해도 상관 없습니다. */
}
@media screen and (max-width: 767px) {
/* 스마트폰 사이즈에서는 전부 해제합니다. */
body { width: auto }
#menu { width: auto; float: none; }
#section { width: auto; float: none; }
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>메뉴A</li>
<li>메뉴B</li>
<li>메뉴C</li>
</ul>
</div>
<div id="section">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</body>
@import 규칙 : 외부 스타일을 가져옴
@font-face 규칙 : 글꼴을 추가로 정의
@media 규칙 : 미디어 쿼리 조건에 맞는 경우 css 적용
'WEB > CSS' 카테고리의 다른 글
| [CSS] CSS 레이아웃 (0) | 2022.01.27 |
|---|---|
| [CSS] CSS 박스 모델 (0) | 2022.01.27 |
| [CSS] 색상과 배경을 위한 스타일 (0) | 2022.01.27 |
| [CSS] 텍스트 관련 스타일 (0) | 2022.01.20 |
| [CSS] font-family 속성 - 구글 웹 폰트 사용하기 (0) | 2022.01.20 |
댓글