공부했던 자료 정리하는 용도입니다.
재배포, 수정하지 마세요.
반응형 웹 디자인(Responsive Web Design)
: 화면 크기에 따라 화면 요소들을 다르게 보여주도록 디자인된 웹 페이지
미디어 쿼리 : CSS모듈 중 하나로 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 해주는 기능
ex) @media [only | not] 미디어유형 [and 조건] * [and 조건]
@media screen and (min-width:200px) and (max-width:360px)
: 화면의 최소 너비가 200px이고 최대 너비가 360px일 경우 미디어 쿼리를 사용한다.
* 미디어 유형 종류
| all | 모든 미디어 유형 |
| 인쇄 장치 | |
| screen | 컴퓨터 스크린(스마트폰의 스크린도 포함) |
| tv | tv |
| aural | 음성 합성 장치(주로 화면을 읽어 소리로 출력해 주는 장치) |
| braille | 점자 표시 장치 |
| handheld | Pad같은 장치 |
| projection | 프로젝터 |
| tty | 디스프레이 기능이 제한된 장치(이 장치에서는 px단위 사용 불가) |
| embossed | 점자 프린터 |
미디어 쿼리에서 사용하는 조건
1. 뷰포트의 너비와 높이
뷰포트 : 실제 웹 문서의 내용이 화면에 보여지는 영역. 뷰포트의 너비와 높이를 미디어 쿼리의 조건으로 사용할 수 있다.
* 너비와 높이 속성
| width / height | 웹 페이지의 너비, 높이 |
| min-width / min-height | 최소 너비, 최소 높이 |
| max-width / max-height | 최대 너비, 최대 높이 |
2. 단말기의 너비와 높이
: 단말기 브라우저 창의 너비와 높이를 체크할 수 있다.
* 단말기의 너비와 높이 속성
| device-width / device-height | 단말기의 너비와 높이 |
| min-device-width / min-device-height | 단말기의 최소 너비와 높이 |
| max-device-width / max-device-height | 단말기의 최대 너비와 높이 |
3. 화면회전
: 화면이 어느 방향인지도 체크할 수 있다.
* 화면 회전 속성
| orientation:portrait | 단말기의 세로 방향 (=뷰포트의 너비 < 높이) |
| orientation:landscape | 단말기의 가로 방향 (=뷰포트의 너비 > 높이) |
4. 화면비율
: 브라우저 화면 너비 값을 높이값으로 나눈 것. 숫자 값을 사용하거나 계산식을 사용할 수 있다.
@media all and (aspect-ratio:16/9) : 뷰포트의 화면 비율이 16:9면 미디어 쿼리 사용
* 화면 비율 속성
| aspect-ratio | 화면 비율( width/height ) |
| min-aspect-ratio | 최소 화면 비율 |
| max-aspect-ratio | 최대 화면 비율 |
5. 단말기의 물리적 화면 비율
: 단말기 브라우저의 너비 값을 높이값으로 나눈 것.
* 단말기 화면 비율 속성
| device-aspect-ratio | 단말기 화면 비율( width/height ) |
| min-device-aspect-ratio | 단말기 최소 화면 비율 |
| max-device-aspect-ratio | 단말기 최대 화면 비율 |
6. 색상당 비트 수
: 단말기에서 사용하는 최대 색상 비트 수. color:n이면 최대 두 가지(2^n) 색을 사용 가능
@media all and (color) : 컬러를 지원하면 실행
@media all and (color:0) : 컬러를 지원하지 않으면 실행
* 화면 비율 속성
| color | 비트 수 |
| min-color | 최소 비트 수 |
| max-color | 최대 비트 수 |
미디어 쿼리 적용하기
■ CSS파일 연결하기
- <link href="css파일 경로" rel="stylesheet" type="text/css" media="미디어 쿼리 조건">
- @import url(css 파일 경로) 미디어 쿼리 조건
■ 웹문서에서 직접 정의하기
1. <style>안에서 media 속성을 이용하여 조건과 스타일을 지정한다.
<style media="미디어쿼리 조건">
스타일 규칙들
</style>
2. @media문을 사용해서 각 조건별로 스타일을 지정해 놓고 사용할 수 있다.
<style>
@media 미디어 쿼리 조건{
스타일 규칙들
}
</style>
■ 뷰포트 지정하기
: 미디어 쿼리를 이용해도 스마트 폰에서 봤을 때 스마트폰용 화면이 아닌 pc 화면이 그대로 축소만 되어 보이는 경우가 있다. 이런 경우에는 <meta>를 이용해 뷰포트 크기나 배율을 조절해야 한다.
<meta name="viewport" content="속성1=값, 속성2=값 ...">
<meta name="viewport" content="width=device-width">
: 웹 페이지의 뷰포트 너비를 스마트폰의 화면 너비에 맞춰 지정
* 뷰포트 속성
| width | 뷰포트의 너비를 지정(기본값은 device-width) |
| height | 뷰포트의 높이를 지정(기본값은 device-height) |
| initial-scale | 초기 배율(기본값 1, 1보다 작으면 축소, 1보다 크면 확대) |
| user-scalable |
사용자가 페이지를 확대/축소할 수 있는지 여부를 표시 |
| minimum-scale | 사용자가 축소할 수 있는 최솟값을 지정(기본값은 0.25 고 가로값을 기준으로 한다.) |
| maximum-scale | 사용자가 확대할 수 있는 최댓값을 지정한다.(기본값은 5.0 ) |
가변형 레이아웃(Fluid Layout)
: 사이트의 모든 요소를 상대적인 크기로 지정해서 브라우저 크기에 따라서 다르게 표시해주는 방법.
■ 그리드 시스템
: 화면을 몇 개의 column으로 나누어 요소들을 배치하는 것이다. 그리드 시스템을 사용하면 화면을 규칙적으로 만들기 때문에 레이아웃을 일관성 있게 유지할 수 있다는 장점이 있다. 그리드를 이용해서 가변형 그리드 레이아웃을 많이 쓴다.
고정형 레이아웃을 가변형 레이아웃으로 만드는 방법
- 요소의 너비를 백분율(%)로 바꾸기
: 소수점 이하 자리가 많다면 한두 자리로 표시한다. 오차를 고려하여 실제 계산한 값보다 약간 작게 지정해 주는 것이 좋다. - 패딩과 마진을 백분율(%)로 바꾸기
- 글자 크기를 em으로 바꾸기
: em은 대문자의 M의 너비를 1em으로 계산한 것으로 16px=1em이기 때문에 (픽셀 값)/16 하면 변환된 em값이 나온다. - 이미지나 비디오가 있는 경우 크기 조절
max-width:100%해주면 브라우저 너비를 기준으로 항상 100%에 맞게 이미지 너비가 조절된다.
'Front end > HTML , CSS' 카테고리의 다른 글
| [CSS] 박스모델 정리 (0) | 2019.05.13 |
|---|---|
| [CSS] Style 정리 (0) | 2019.05.13 |
| [CSS] CSS의 정의와 선택자(Selector) (0) | 2019.05.12 |
| [CSS] WEB2 CSS 정리 (0) | 2019.05.12 |
| [HTML] form 관련 tag (0) | 2019.05.11 |
