• 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 핀치줌 인아웃

핀치 줌(pinch zoom)은 모바일 장치에서 손가락 두 개를 이용해 화면을 확대하거나 축소하는 제스처입니다. 이 제스처를 통해 사용자는 사진이나 웹 페이지의 특정 부분을 더 자세히 볼 수 있습니다.

지금까지는 모바일 웹 페이지를 고려하면서 강의를 하지 않았기 때문에 <meta> 태그를 이용하지 않았습니다.

모바일 웹 페이지에서 핀치 줌 기능을 제어하려면 HTML의 <meta> 태그와 CSS, JavaScript를 활용하여 사용자 경험을 조절할 수 있습니다.

<meta> 태그 설정

• <meta name="viewport"> 태그는 뷰포트의 설정을 정의하여 페이지의 확대/축소와 스크롤을 제어하는 데 사용됩니다.

  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  

  • width=device-width: 뷰포트의 너비를 장치의 화면 너비에 맞춥니다.
  • initial-scale=1.0: 페이지가 로드될 때의 초기 확대 비율을 1로 설정합니다. 즉, 페이지가 기본 크기로 표시됩니다.
  • user-scalable=no: 사용자가 페이지를 확대하거나 축소할 수 없도록 설정합니다. 핀치 줌 기능을 비활성화합니다.

핀치 줌 조절

• JavaScript를 사용하여 동적으로 뷰포트의 설정을 변경할 수 있습니다. 예를 들어, 특정 동작(클릭 등)에 따라 핀치 줌 기능을 조정할 수 있습니다.

  const JS_사진원본보기기능 = () => {
      document.body.style = "background-color: black;"
      document.getElementById("HTML_이미지").style = "width: 100%"
      document.getElementsByName("viewport")[0].content = `
          width=device-width,
          initial-scale=1.0,
          minimum-scale=1.0,
          maximum-scale=3.0,
          user-scalable=yes,
  }
  

  • document.getElementsByName("viewport")[0].content는 meta 태그의 content 속성을 수정하여 뷰포트의 설정을 변경합니다.
  • minimum-scale=1.0: 페이지를 축소할 수 있는 최소 비율을 1로 설정합니다.
  • maximum-scale=3.0: 페이지를 확대할 수 있는 최대 비율을 3으로 설정합니다.
  • user-scalable=yes: 사용자가 페이지를 확대하거나 축소할 수 있도록 설정합니다.

📝 실습 코드