반응형
html 페이지 모바일에서 반응형으로 나오게 하는 방법 (viewport)
HTML 페이지를 모바일에서 반응형으로 나오게 하려면 viewport 메타 태그를 사용하여 뷰포트 설정을 지정해야 합니다. viewport 메타 태그는 뷰포트의 크기와 초기 확대/축소 비율을 제어하는 데 사용됩니다.
viewport 적용 전
<!DOCTYPE html>
<html>
<head>
</head>
<body>
WEB01
</body>
</html>
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로 설정합니다.
이렇게 viewport 메타 태그를 설정하면 페이지가 모바일 디바이스의 뷰포트에 맞춰지며, 반응형으로 나타날 수 있습니다. 추가적으로 필요한 스타일시트와 레이아웃을 적용하여 모바일 화면에 적합한 레이아웃을 디자인할 수 있습니다.
728x90
반응형
'리눅스' 카테고리의 다른 글
| Docker 중지 시 Warning (0) | 2021.11.01 |
|---|---|
| CentOS 7에서 전원 버튼을 비활성화하는 방법 (0) | 2021.11.01 |
| CentOS 7에서 YUM 패키지 매니저를 사용하여 MySQL을 설치하는 방법 (0) | 2021.10.20 |
| [리눅스] Git SSL Certificate Problem: Certificate has expired 에러 해결 (0) | 2021.10.01 |
| 블루 오션(Blue Ocean)을 설치하는 방법 (0) | 2021.09.29 |
