-
Notifications
You must be signed in to change notification settings - Fork 0
[기술 공유] 뷰포트 메타태그, Next.js에서 Head 태그란?
Coa edited this page Mar 1, 2022
·
1 revision
뷰포트 메타 태그는 브라우저가 웹페이지를 렌더링할 때 동작하는 방법을 정의하고 뷰포트의 크기도 알 수 있다.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
뷰포트의 너비가 웹 사이트를 보는 장치와 동일하다고 가정한다.
모바일 브라우저는 기본 뷰포트가 다르기 때문에 기본 너비 980 픽셀의 뷰포트를 사용한다.
웹페이지를 980 픽셀의 뷰포트로 렌더링하고 모든 웹페이지에 맞게 축소된다. 화면 크기가 작을수록 축소된다.
아이폰과 아이패드 비교하면 아이폰 페이지가 축소된다. 뷰포트에서 값을 변경하면 모바일 디바이스가 웹사이트를 렌더링하는 방법을 사용자가 지정할 수 있다.
뷰포트에 정의된 너비는 이 너비에서 가장 잘 보인다고 알려주는 것과 같다.
아이폰에서 뷰포트 320이지만 태블릿에서 볼 때 웹페이지가 축소되면 안되므로 반응형에 어긋난다.
최선의 방법은 width=device-width다.
모바일에서 핀치 제스처로 확대축소 가능하다. 뷰포트를 장치너비로 하면 웹페이지를 보려고 확대할 필요가 없어진다.
사용자가 페이지 방문시 확대축소할 필요 없도록 초기 배율 속성으로 비율을 1로 설정한다.
<meta name="viewport" content="initial-scale=1">
사용자가 스크롤, 확장하지 못하도록 최대 스케일 속성을 1로 설정할 수 있다.
<meta name="viewport" content="maximum-scale=1">
😎@Daewon Seo 🥳@papa 🧐@Coa 🤪@HuiSeung LEE
Test 관련 이슈
Next.js 관련 이슈
Git 관련 이슈
기타 이슈
기술공유
- [strapi] authenticated request 구현하기
- aria label는 왜 쓰는 것인가?
- font icon을 집어 넣을 때 i 태그로 넣을까? pseudo elements(before, after)로 넣을까?
- Nextjs에서 a 태그를 Link 태그로 감싸야 한다.
- Nextjs에서 img 대신 Image 컴포넌트 사용하기, next.config.js는 무엇인가?
- React.FC
- React.js rest Props와 Object destructuring
- Reactjs 컴포넌트 선언 방식을 화살표 함수로 할지 함수 선언문으로 할지
- Test 참고
- useAxios test code
- 뷰포트 메타태그, Next.js에서 Head 태그란?
- 스타일이 중복되서 들어갈 때 그룹 셀렉터 대신 mix를 쓰거나, 아니면 만든 mix의 modifier를 만들어주거나, 각각에 주거나.
- 타입스크립트 클래스에서의 protected, private 필드와 # 필드의 차이
- Global state VS local state 리덕스의 배경이해, 글로벌 변수와 다를 바 없다면 지양되어야 하지 않나?
- Fontawesome Icon React 적용방법
- classnames/bind 함수와 classnames 함수의 차이
- Jest와 Testing Library