2025.01.28 HTML 마무리
메타 태그(Meta tag)
메타태그는 웹문서의 정보(메타데이터)를 알려주기 위해 작성하는 태그이다. 이렇게 작성된 메타데이터는 사용자에겐 보이진 않지만 웹 브라우저, 검색엔진, 그리고 메타데이터를 활용하는 웹 서비스들이 사용하게 된다. <head> 태그 내에 위치하고 홀 태그 형식으로 사용한다. <meta .../> 이와 같이 사용한다.
meta 태그 : charset
웹문서의 문자 인코딩을 알려주는 역할이다. 문자 인코딩이란 웹 문서에 표시되는 문자열이 어떤 문자코드 기반으로 해석되고 표현할지를 정한다. 현재의 웹에서는 유니코드 기반인 UTF-8 인코딩을 사용하기 때문에 charset="UTF-8"로 작성한다.
<meta charset="UTF-8">meta 태그 : viewport
웹 문서가 그려지는 영역(viewport)에 대해 크기나 확대 비율을 어떻게 조정할지를 정한다. content 속성에 viewport 설정 값을 넣을 수 있다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">- width : 웹문서가 표현되는 영역의 너비를 결정한다. 모바일 기기 너비에 맞추려면 device-width라는 값을 사용할 수 있다.
- initial-scale : 처음 화면에 보여질 때의 배율을 결정한다. 1.0이면 기본 크기이고 2.0이면 2배 크기가 된다.
- 그 외에도 user-scalable, maximum-scale, minimun-scale 등을 사용할 수 있다.
meta 태그 : author, description, keyword
검색 엔진이나 외부 웹 서비스에 알려질 정보들을 표현한다.
<meta name="author" content="인프런">
<meta name="keywords" content="HTML">
<meta name="description" content="웹 개발 오리지널">meta 태그 : open graph
author, description, keyword 메타 태그로도 정보를 나타낼 수 있지만 open graph 메타 태그를 사용하면 facebook과 같은 SNS에 더 자세한 정보를 알려줄 수 있다.
<meta property="og:title" content="인프런"/>iframe 태그
다른 웹 페이지를 표시할 수 있는 태그이다.
<iframe width="500" height="300" src=https://www.inflearn.com frameborder="0"></iframe>- src : iframe에 표시될 웹 문서 주소
- width, height : 높이,너비(px 기준, %도 가능)
- frameborder : 테두리 표시 여부(1,0)
- scrolling : 스크롤바 표시 여부 (yes, no, auto)
- name : a 태그에서 참조할 이름
'Front-End' 카테고리의 다른 글
| [CSS] 기초 공부 2 (2) | 2025.01.30 |
|---|---|
| [CSS] 기초 공부 1 (1) | 2025.01.29 |
| [HTML] 기초 공부 4 (0) | 2025.01.27 |
| [HTML] 기초 공부 3 (0) | 2025.01.01 |
| [HTML] 기초 공부 2 (1) | 2024.12.29 |