본문 바로가기

리눅스

html 페이지 모바일에서 반응형으로 나오게 하는 방법 (viewport)

반응형

html 페이지 모바일에서 반응형으로 나오게 하는 방법 (viewport)

HTML 페이지를 모바일에서 반응형으로 나오게 하려면 viewport 메타 태그를 사용하여 뷰포트 설정을 지정해야 합니다. viewport 메타 태그는 뷰포트의 크기와 초기 확대/축소 비율을 제어하는 데 사용됩니다.

viewport 적용 전

<!DOCTYPE html>
<html>
<head>
</head>
<body>
WEB01
</body>
</html>

 

v1

728x90

 

다음은 viewport 메타 태그를 사용하여 HTML 페이지를 모바일에서 반응형으로 나오게 하는 예시입니다.

viewport 전용 후

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
WEB02
</body>
</html>

 

위 예시에서 viewport 메타 태그의 content 속성에는 다음과 같은 설정이 포함됩니다

  • width=device-width: 뷰포트의 너비를 디바이스의 실제 너비로 설정합니다.
  • initial-scale=1.0: 페이지가 초기 로드될 때 뷰포트의 초기 확대/축소 비율을 1로 설정합니다.

 

v2

 

이렇게 viewport 메타 태그를 설정하면 페이지가 모바일 디바이스의 뷰포트에 맞춰지며, 반응형으로 나타날 수 있습니다. 추가적으로 필요한 스타일시트와 레이아웃을 적용하여 모바일 화면에 적합한 레이아웃을 디자인할 수 있습니다.

 

728x90
반응형