티스토리 뷰
반응형
✏️ 반응형 웹 디자인
웹 요소를 화면의 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어서 사이트를 구현하는 것
✏️ 뷰포트(ViewPort)
반응형 웹 디자인에서 기본적으로 알아둬야 할 개념 / PC에 맞게 제작한 웹 사이트를 모바일 기기에서 접속해서 보면 모든 내용이 작게 보이는데 이는 PC화면과 모바일 화면에서 표시되는 픽셀의 차이 때문에서 발생함. 여기서 뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소해서 표시할 수 있음. 즉, 뷰포트는 스마트론 화면에서 실제 내용이 표시되는 영역
#1 뷰포트 지정
뷰포트는 스타일 태그처럼 <meta> 태그를 이용해 <head>와 </head>태그 사이에 작성
기본형 => <meta name= "viewport" content= "속성1=값1, 속성2=값2, ...">
| 종류 | 설명 | 사용 가능한 값 | 기본값 |
| width | 뷰포트 너비 | device-with 또는 크기 | 브라우저 기본값 |
| height | 뷰포트 높이 | devic-height 또는 크기 | 브라우저 기본값 |
| user-scalable | 확대.축소 가능 여부 | yes 또는 no yes는 1로, device-width와 device-height값은 10으로 간주 |
yes |
| initial-scale | 초기 확대.축소 값 | 1~10 | 1 |
#2 뷰포트 단위
| 단위 | 설명 |
| vw(viewport width) | 1vw는 뷰포트 너비의 1%와 같음 |
| vh(viewport height) | 1vh는 뷰포트 높이의 1%와 같음 |
| vmin(viewport minimum) | 뷰포트의 너비와 높이 중에서 작은 값의 1%와 같음 |
| vmax(viewport maximum) | 뷰포트의 너비와 높이 중에서 큰 값의 1%와 같음 |
반응형
'Web > CSS' 카테고리의 다른 글
| [Web/CSS] CSS - 그리드 레이아웃 (0) | 2024.05.05 |
|---|---|
| [Web/CSS] CSS - 미디어 쿼리 (0) | 2024.05.05 |
| [Web/CSS] CSS - 복습6 (0) | 2024.04.30 |
| [Web/CSS] CSS - 애니메이션 (0) | 2024.04.30 |
| [Web/CSS] CSS - 트랜지션 (0) | 2024.04.30 |
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 반복문
- 자바
- DFS
- 알고리즘
- DP
- 유니온 파인드
- 에라토스테네스의 체
- 스택
- 백준
- Do it!
- HTML5
- 유클리드 호제법
- js
- BFS
- C++ Stack
- html
- 백준 풀이
- 알고리즘 공부
- c++ string
- 자바스크립트
- 카운팅 정렬
- 우선순위 큐
- CSS
- 자료구조
- 투 포인터
- 최단 경로
- C++
- 이분 매칭
- java
- 세그먼트 트리
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 |
글 보관함