본문 바로가기 메뉴 바로가기

Aairon 개발 블로그

프로필사진
  • 글쓰기
  • 관리
  • 태그
  • 방명록
  • RSS

Aairon 개발 블로그

검색하기 폼
  • 분류 전체보기 (144)
    • Retrospect (6)
    • Web (13)
    • JavaScript (16)
    • Nextjs (17)
    • React (21)
    • HTML & CSS (6)
    • DevEnv (22)
    • Git (15)
    • Deploy (8)
    • Record (16)
    • CS (3)
  • 방명록

Viewport (1)
viewport 속성

모바일 기기에서 input 선택시 확대 될 때모바일 기기에서 웹페이지를 이용할 때 input 태그를 클릭하면 확대가 되는 효과가 있습니다.이 확대되는 효과를 없애고 포커스만 가도록 하는 방법은 viewport 메타 태그에 있습니다. 방법은 아주 단순한데 viewport 메타 태그에 user-scalable=no 속성을 추가해주시면 됩니다. 모바일 기기에서 media쿼리 적용이 안 될 때viewport는 화면에 나타나는 브라우저의 크기를 나타낸다.위의 문구를 입력하지 않으면 width값이 980px로 설정된다. 데스크탑의 브라우저는 창의 크기를 조절할 수 있어 미디어쿼리가 적용되지만 모바일의 브라우저는 창크기를 조정할 수 없어 980px 이하의 미디어 쿼리가 적용되지 않는다.width=device-widt..

HTML & CSS 2019. 8. 10. 12:50
이전 1 다음
이전 다음
공지사항
  • 프론트엔드 개발자 장철희 입니다

Blog is powered by Tistory / Designed by Tistory

티스토리툴바