[12-1] 반응형 웹 알아보기
*반응형 웹 : 기존 웹 사이트의 내용은 그대로 유지하면서 -> 다양한 모바일 기기의 화면 크기에 맞게 표시하는 것
*뷰포트(viewport) : 실제 내용이 표시되는 영역.
pc화면과 모바일 화면의 픽셀 표시 방법이 다르기 때문에, 모바일 화면에서 의도한대로 표시되지 않음 -> 뷰포트를 지정하면 모바일 기기에 맞춰 확대/축소해서 내용을 표시해줌.
ex)웹 페이지 너비를 320px(스마트폰용)로 맞춰 제작해도 -> 스마트폰용 모바일 브라우저 기본 뷰포트 너비가 980px이므로, 웹 페이지 너비를 무조건 980px로 표시하려고 함. 그래서 모바일 기기에 적합한 사이트를 제작했더라도 정작 스마트폰 화면에서는 표시되지가 않는것.
1. 뷰포트 지정하기
- <meta name="viewport" content="width=device-width, initial-scale=1">
2. 뷰포트의 단위
-뷰포트 개념 이전에는 css에서 크기 지정시에 주로 px, %를 주로 사용했었음. but 이제는 아래의 뷰포트 기준 단위들을 사용 가능.
- vw (viewport width) : 1vw는 뷰포트 너비의 1%
- vh (viewport height) : 1vh는 뷰포트 높이의 1%
- vmin(viewport minimum) : 뷰포트 너비와 높이 중 더 작은 값의 1%
- vmax(viewport maximum) : 뷰포트 너비와 높이 중 더 큰 값의 1%
예)
뷰포트의 너비 1000px / 높이 800px인 경우
-1vw=10px
-1vh=8px
-1vmin=8px
-1vmax=10px
근데 여기서 화면을 돌리면?
방향이 바뀌므로
-1vw=8px
-1vh=10px
-1vmin=8px (그대로 유지)
-1vmax=10px (그대로 유지)
[12-2] 미디어 쿼리 알아보기
*미디어 쿼리 : 반응형 웹 디자인에서 가장 기본적인 개념. 사이트에 접근하려는 기기의 해상도에 따라 서로 다른 스타일 시트를 적용해주는 것임. -> 접속하는 기기의 화면 크기에 따라 레이아웃이 달라짐
1. 미디어 쿼리 구문
-@media 속성을 사용해서 어떤 css를 적용할 것인지를 지정해줌
- only (거의 사용 x) : 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행 x
- not : not tv라고 지정하면 -> TV를 제외한 미디어 유형에만 적용됨
- and
예)
@media screen and (min-width: 768px) and (max-width: 1024px) { ... }
=>미디어 유형이 screen이면서, 최소 너비가 768px이고 최대 너비가 1024px인 경우에 적용할 CSS
2. 미디어 유형의 종류
-미디어 쿼리는 미디어별로 적용할 css를 작성하므로 -> @media 속성 다음에 미디어 유형을 알려줘야 함
| all | -모든 미디어 유형에서 사용할 css를 정의 |
| -인쇄 장치에서 사용할 css를 정의 | |
| screen | -컴퓨터 스크린에서 사용할 css를 정의 (스마트폰의 스크린도 포함) |
| tv | -음성과 영상이 동시에 출력되는 TV에서 사용할 css를 정의 |
| aural | -음성 합성 장치 (주로 화면을 읽어주는 장치)에서 사용할 css를 정의 |
| braile | -점자 표시 장치에서 사용할 css를 정의 |
| handheld | -패드같이 손에 들고 다니는 장치에서 사용할 css를 정의 |
| projection | -프로젝터를 위한 css를 정의 |
| tty | -디스플레이 기능이 제한된 장치에서 맞는 css를 정의 (이런 장치에서는 px단위를 사용할 수 없음) |
| embossed | -점자 프린터에서 사용할 css를 정의 |
3. 웹 문서의 가로&세로 속성
-실제 웹 문서 내용이 화면에 나타나는 영역(뷰포트)의 너비&높이 -> 얘를 미디어의 쿼리의 조건으로 사용할 수 있음
(단, 높잇값은 미디어에 따라 달라지므로 주의)
- width, height : 웹 페이지의 가로&세로 높이를 지정
- min-width, min-height : 웹 페이지의 최소 너비&최소 높이를 지정
- max-width, max-height : 웹 페이지의 최대 너비&최대 높이를 지정
예) 너비가 1440px 이상일 때의 미디어 쿼리
@media screen and (min-width: 1440px) {...}
=>너비가 최소 1440px인 화면에서 적용할 스타일
4. 단말기의 가로&세로 속성 (△)
(단, 아이폰 단말기 자체의 해상도와 사파리의 너비는 다름..그래서 이 이 4번 속성은 거의 안쓰고, 3번이나 5번 속성을 주로 씀)
- device-width, device-height
- min-device-width, min-device-height
- max-device-width, max-device-height
예) iPhone X일 경우의 미디어 쿼리
@media screen and (min-device-width: 375px) and (min-device-height: 812px) {...}
5. 화면 회전 속성
-미디어 쿼리에서 orientation 속성을 사용하면 기기의 방향을 확인 가능하고, 그에 따라 웹 사이트 레이아웃 변경 가능
- orientation: portrait 단말기의 세로 모드
- orientation: landscape 단말기의 가로 모드 (기본값)
예) iPhone X를 가로로 돌릴 경우의 미디어 쿼리
@media screen and (min-device-width: 812px) and (orientation: landscape) {...}
1. 미디어 쿼리 -> 웹 문서에 적용해보기
방법①. 외부 css파일 연결 (단, 아래 두 방법 중 css파일 많은 파일에서는 <link>태그가 더 적합)
①-1. <head> 안에 <link>태그 사용
- <link rel="stylesheet" media="print" href="css/print.css">
①-2. <style>안에 @import문 사용
예) 태블릿용 css를 정의한 css/tablet.css파일을 만들고, 너빗값이 321px~768px일 때의 미디어 쿼리
방법②. 웹 문서에 직접 정의
(②-1은 <style>태그 안에서 하나의 조건을 지정 vs ②-2는 <style>태그 안에서 여러개의 조건에 따른 스타일을 모두 나열한 뒤, 그 중에서 선택해서 사용)
②-1. media속성 쓰기
예) media속성을 사용해, 화면 너비가 320px 이하일 때 배경색을 주황색으로 바꾸는 미디어 쿼리
②-2. @media문 사용하기
예) @media 문을 사용해, 화면 너비가 320px 이하일 때 배경색을 주황색으로 바꾸는 미디어 쿼리
'개념 > CSS (23.03.14~)' 카테고리의 다른 글
| [CSS] [12-5] CSS 그리드 레이아웃 사용하기 (0) | 2023.03.26 |
|---|---|
| [12-3] 그리드 레이아웃 알아보기 [12-4] 플렉스 박스 레이아웃 알아보기 (0) | 2023.03.25 |
| [CSS] [11-3] 애니메이션 만들기 (0) | 2023.03.22 |
| [CSS] [08-5] 웹 요소의 위치 지정하기 (0) | 2023.03.22 |
| [CSS] [11-2] 트랜지션 알아보기 (0) | 2023.03.22 |
