이 블로그는 HTML에서 반응형 웹 디자인을 위해 뷰포트 메타 태그를 사용하는 방법을 설명합니다.
뷰포트 메타 태그란 무엇입니까?
“ 뷰포트 ”는 콘텐츠가 다양한 화면 크기에 표시되는 방식을 제어하여 반응형 디자인을 만드는 데 가장 중요한 태그입니다. 이 태그는 ' <헤드> ” 섹션에 두 개의 속성이 포함되어 있습니다. 첫 번째는 “ 이름 ” 속성은 이 태그의 목적을 알려주고 두 번째는 “ 콘텐츠 '에 제공된 값과 관련된 데이터를 보유합니다. 이름 ' 기인하다.
뷰포트 메타 태그의 다양한 속성
뷰포트 메타 태그에는 ' 콘텐츠 ' 기인하다:
'너비' 속성
“ 너비 ” 속성은 콘텐츠가 세로로 표시되는 웹 페이지의 가시 영역을 지정합니다. 메타 태그는 다음과 같습니다.
< 메타 이름 = '뷰포트' 콘텐츠 = '너비=장치-너비' >
'높이' 속성
“ 키 ” 속성은 뷰포트 높이가 화면 높이와 일치하도록 웹 페이지의 세로 길이를 설정합니다. 메타 태그는 다음과 같습니다.
< 메타 이름 = '뷰포트' 콘텐츠 = '높이=400' >
'Initial-scale' 속성
“ 초기 규모 ” 속성은 웹페이지가 처음 로드될 때 적절한 확대/축소 수준으로 표시되도록 합니다. 예를 들어 아래 코드를 방문하십시오.
< 메타 이름 = '뷰포트' 콘텐츠 = '너비=장치 너비, 초기 스케일=1.0' >'maximum-scale' 속성
“ 최대 규모 ” 속성은 레이아웃 문제를 방지하기 위해 웹 페이지의 최대 확대/축소 수준을 지정합니다.
< 메타 이름 = '뷰포트' 콘텐츠 = '너비=장치 너비, 최대 크기=1.0' >
'minimum-scale' 속성
“ 최소 규모 ”는 최소 축소 배율 수준을 지정하여 사용자가 너무 많이 축소하는 것을 제한하는 데 사용됩니다.
< 메타 이름 = '뷰포트' 콘텐츠 = '너비=장치 너비, 최소 스케일=0.5' >'사용자 확장 가능' 속성
“ 사용자 확장 가능 ” 속성은 사용자가 값을 “ 아니요 ' 또는 ' 예 '. 사용자가 확대 또는 축소할 수 있는 메타 태그는 다음과 같습니다.
< 메타 이름 = '뷰포트' 콘텐츠 = '너비=장치 너비, 사용자 확장 가능=예' >HTML에서 반응형 웹 디자인에 뷰포트 메타 태그를 사용하는 방법은 무엇입니까?
반응형 웹 디자인을 위한 뷰포트 메타 태그의 사용법을 더 잘 이해합니다. 예를 들어 보겠습니다.
' <사업부> ” 태그가 여러 개 있습니다. ”를 사용하여 웹 페이지에 삽입된 태그 및 이미지 ” 태그:
< 피 >
< 비 >Linuxhint 제공, 뷰포트 메타 태그를 더 잘 이해하려면 다른 화면에서 웹 페이지 열기 크기 장치.< / 비 >
< / 피 >
< 이미지 소스 = '../bg.jpg' 모든 것 = '해커' 너비 = '460' 키 = '3.4.5' >
< 피 스타일 = '패딩:5px' >
< 나 >Linuxhint 팀에 합류 < / 나 >
Linuxhint 제공, 뷰포트 메타 태그를 더 잘 이해하려면 다른 화면에서 웹 페이지 열기 크기 devices.Powered by Linuxhint, 뷰포트 메타 태그를 더 잘 이해하려면 다른 화면에서 웹 페이지 열기 크기 devices.Powered by Linuxhint, 뷰포트 메타 태그를 더 잘 이해하려면 다른 화면에서 웹 페이지 열기 크기 devices.Powered by Linuxhint, 뷰포트 메타 태그를 더 잘 이해하려면 다른 화면에서 웹 페이지 열기 크기 장치.
< / 피 >
< / 사업부 >
위의 코드 조각을 컴파일한 후 웹 페이지는 다음과 같습니다.
작은 장치에서 콘텐츠가 완벽하게 표시되지 않아 콘텐츠가 응답하지 않는다고 출력에 표시됩니다.
이제 반응형으로 만들려면 ' 뷰포트 ” 메타 태그:
< 머리 >< 메타 이름 = '뷰포트' 콘텐츠 = '너비=장치 너비, 초기 스케일=1.0' / >
< / 머리 >
코드를 업데이트한 후 웹 페이지는 다양한 화면 크기에서 다음과 같이 보입니다.
최종 출력은 ' <헤드> ” 태그.
결론
뷰포트 메타 태그를 사용하면 개발자가 웹 페이지가 다양한 화면 크기 장치에 표시되는 방식을 설정하는 일련의 지침을 브라우저에 제공할 수 있습니다. 메타 태그는 ' <헤드> ” 태그를 포함하고 반응형 웹 사이트 디자인을 구축하는 데 도움이 되는 속성을 포함합니다. 이 블로그는 HTML에서 반응형 웹 디자인을 위해 뷰포트 메타 태그를 사용하는 방법을 시연했습니다.