뷰포트 지정하기
<meta name="viewport" content="<속성1=값>,<속성2=값2>,..."><meta> 태그를 이용해 텍스트<head></head> 태그 사이에 작성한다.
content 속성을 이용해 뷰포트의 속성과 속성 값을 지정한다.속성 : 설명 : 사용 가능한 값 : 기본 값
- width: 뷰포트 너비 : device-width 또는 크기 : 브라우저 기본 값
- height: 뷰포트 높이 : device-height 또는 크기 : 브라우저 기본 값
- user-scalable : 확대/축소 기능 여부 : yes 또는 no : yes
- initial-scale : 초기 확대/축소 값 : 1~10 : 1
- minimum-scale : 최소 확대/축소 값 : 0~10 : 0.25
- maximum-scale : 최대 확대/축소 값 : 0~10 : 1.6
<meta name="viewport" content="width=device-width, initial-scale=1">반응형 웹을 만들었어도 여러 기기에서 제대로 보이는지 테스트할 때는 크롬 개발자 도구의 '디바이스 모드'를 활용한다.
"ctrl + shift + i "을 누르고, 위 사진에 있는 빨강 표시된 것을 누른다.
프론트엔드 개발자 시작했습니다