할머니의 콤퓨타 도전기

viewport 메타태그, link 태그 본문

Web Front-end/Html + CSS

viewport 메타태그, link 태그

ji.o.n.e 2022. 1. 20. 23:07

viewport

  • 사용자가 웹페이지를 볼 수 있는 영역
  • 기존 컴퓨터 화면을 휴대기기에서 보면 확대해서 봐야하는 불편함이 있음. 이를 해결하기 위해 각각 기기에 맞는 크기로 브라우저들이 크기를 인식해야 했음. 이 때 사용하는 태그가 뷰포트를 제어하는 뷰포트메타태그

 

<meta>

  • html 문서에 대한 메타 데이터를 정의
  • 항상 <head> 태그 내부에 있으며 일반적으로 문자 집합, 페이지 설명, 키워드 및 뷰포트 설정 지정

 

viewport 메타태그

  • <meta name="viewport" content="width=device-width, initial-scale=1">
  • width=device-width는 장치의 화면 너비를 따르도록 페이지 너비를 설정
  • initial-scale=1은 브라우저에서 페이지를 처음 로드할 때 초기 확대/축소 수준 설정

 

<link rel="속성값">

  • <link> 태그의 rel 속성은 현재 문서와 외부 리소스 사이의 연관 관계 명시
  • 예를 들어, 속성값 alternate는 프린트 페이지나 번역된 페이지와 같이 해당 문서의 대체 버전에 대한 링크 제공
  • <link rel="stylesheet" type="text/css" href="/examples/media/expand_style.css">
    • stylesheet 속성은 스타일 시트로 사용할 외부 리소스를 불러옴
  • http://tcpschool.com/html-tag-attrs/link-rel
 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 

 

저작자표시

'Web Front-end > Html + CSS' 카테고리의 다른 글

CSS FlexBox  (0) 2022.01.21
CSS 레이아웃  (0) 2021.05.14
CSS Box Model  (0) 2021.05.12
html 정리  (0) 2021.05.05
(html) div 태그  (0) 2021.04.07
'Web Front-end/Html + CSS' Related Articles more
Comments