반응형
이번 포스팅에서는 HTML 문서에 대한 데이터를 정의하는 meta 태그와 보이는 화면에 대한 viewport에 대해 정리했습니다.
저번 포스팅에서 다뤘던 HTML의 또 다른 입력요소인 select 태그, textarea 태그, form 태그에 대해 궁금하신 분은 아래를 읽어보시면 좋습니다!
meta 태그
- HTML 문서에 대한 메타 데이터를 정의한다.
- 단일 태그 이다.
- 항상 head 태그 하위로 설정된다.
- 일반적으로 문자 세트, 페이지 설명, 키워드, 작성자, viewport 설정을 지정하는데 사용한다.
메타 데이터?
데이터를 설명하는 데이터 (정보)이다.
왜 사용하나요?
메타 데이터는 웹페이지에 대한 정보를 제공합니다.
따라서 검색 엔진이 페이지를 검색할 때 참고가 가능하고 검색 결과에도 반영이 가능하기에 사용합니다.
meta 태그의 속성과 유형
- HTML 문서를 작성할 때 자주 봤었던 속성들도 존재한다.
- charset : 문자 세트
- http-equiv : 콘텐츠 속성 정보에 대한 http 헤더
- name : 문서 정보 중 이름 + 값 쌍 형태로 제공할때 사용 (이름에 해당함)
- content : 문서 정보 중 이름 + 값 쌍 형태로 제공할 때 사용 (값에 해당함)
HTTP에 대해 궁금하다면 아래 포스팅을 읽어보시기 바란다.
사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" /> // 문자 세트 정보
<meta http-equiv="x-ua-compatible" content="IE=edge" /> // HTTP 헤더 정보
<meta name="author" content="mlngwan" /> // 작성자 정보
<meta name="keywords" content="HTML, tags" /> // name, content 활용한 키워드 설정
<meta name="description" content="meta tags!" /> // 문서 설명 정보
</head>
<body>
<h1>meta tag!</h1>
</body>
</html>
결과
head에 입력했기에 따로 사용자에게 표시되는 내용이 없는 것을 확인 가능하다.
viewport
- 현재 화면에 보여지고 있는 영역을 의미한다.
- meta 태그를 활용하며 name="viewport"로 설정 가능하다.
왜 필요한가요?
- 모바일 기기 등장 이전에는 컴퓨터 환경만 고려하면 되었다.
- 컴퓨터 환경은 웹 브라우저를 통해 페이지 크기 조정이 가능해 따로 viewport가 필요하지 않았다.
- 모바일 기기 등장 이후에는 기기마다 크기가 다 달라졌다.
- 모바일 기기는 고정된 스크린 사이즈로만 볼 수 있어 배율 조정이 필요해졌다.
현재
PC용 웹 페이지와 모바일 웹 페이지를 따로 만드는 경우가 많다!
예를 들어 PC 환경에서는 naver.com 이지만 모바일 환경에서는 m.naver.com 인것을 쉽게 확인 가능하다.
사용 예시
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=500, initial-scale=1" />
</head>
<body>
<h1>View port!</h1>
</body>
</html>
결과
viewport 역시 head에 입력했기에 표시되는 내용에 변화는 없지만 보이는 크기가 기기마다 다르다는 것을 확인 가능하다.
HTML의 문서에 대한 데이터를 정의 하는 meta 태그와 viewport에 대해 알아보았습니다.
이상으로 HTML 기초 편을 마무리 하도록 하겠습니다!
반응형
'Frontend > HTML' 카테고리의 다른 글
HTML 기초 8편 - 또 다른 입력요소 (select, textarea, form 태그) (0) | 2023.07.11 |
---|---|
HTML 기초 7편 - input (입력요소) 태그 (0) | 2023.07.10 |
HTML 기초 6편 - 링크 태그(a 태그)와 목록 태그 (0) | 2023.07.09 |
HTML 기초 5편 - 전역 속성 (0) | 2023.07.08 |
HTML 기초 4편 - 이미지 태그와 컨테이너 태그 (0) | 2023.07.07 |