✅ 메타데이터
데이터를 설명하는 데이터입니다.
ex) 사진 정보를 열어보면 촬영 일시, 조리개 정보, 위치 등
1️⃣ title
브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의합니다.
- 페이지 제목은 SEO에 큰 영향을 줍니다.
- 짧고 일반적인 이름보다 길고 상세한 제목이 더 좋습니다.
2️⃣ <meta> - 문서 정보
해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용합니다.
<meta>요소는 언제나<head>요소 내부에 위치해야 합니다.
- 검색 엔진을 위한 키워드(keyword)를 정의
<meta name="keyword" content="HTML, meta, tag, element, reference">- 웹 페이지에 대한 설명(description)을 정의
<meta name="description" content="HTML meta tag page">- 문서의 저자(author)를 정의
<meta name="author" content="text">- 5초 뒤에 다른 페이지로 리다이렉트(redirect)시킴
<meta http-equiv="refresh" content="#주소입력">- 모든 장치에서 웹 사이트가 잘 보이도록 뷰포트(viewport)를 설정
<meta name="viewport" content="width=device-width, initial-scale=1.0">- 문자셋(charset)을 정의
<meta charset="UTF-8">📝 사용 가능한 속성
| 속성명 | 속성값 | 설명 |
|---|---|---|
| charset | 문자셋 | 해당 문서의 문자 인코딩 방식을 명시합니다. |
| content | 텍스트 | name 속성이나 http-equiv 속성과 관련된 값(value)을 명시합니다. |
| http-equiv | content-type | content 속성에 명시된 값에 대한 HTTP 헤더를 제공합니다. |
| default-style | ||
| refresh | ||
| name | application-name | 메타데이터를 위한 이름을 명시할 때 사용합니다. |
| author | ||
| description | ||
| generator | ||
| keywords | ||
| viewport |
3️⃣ meta - 문자 인코딩, 뷰포트
인코딩 방식을 선언 해야하는 이유?
현재 사용중인 언어셋 정보를 정확이 알려주기 위함입니다.
만약 메타 정보가 없더라도 브라우저는 대략적으로 추측은 하지만 다른 인코딩 방식으로 적용 될 수 있습니다.
정확한 인코딩을 위해 반드시 선언 되어야 합니다.<meta charset="UTF-8">
뷰포트란?
뷰포트는 웹페이지가 사용자에게 보여지는 영역을 의미합니다.
모바일에서는 화면크기가 고정되어 있기 때문에 뷰포트의 배율을 조절하여 내용을 봐야 합니다.
(스크롤을 움직이는 것이 아니라 확대/축소를 하여 화면에 보이는 내용의 사이즈를 조정)
뷰포트 크기 조절이 필요한 이유
뷰포트의 너비가 너무 커서 사진이 작게 보이거나, 스케일이 안맞아서 사진이 화면을 넘어가는 경우가 생깁니다.
4️⃣ link
현재 문서와 외부 리소스를 연결할 때 사용합니다.
스타일 시트를 연결할 때 제일 많이 사용하지만, 사이트 아이콘("파비콘"과 홈 화면 아이콘) 연결 등 여러가지로 쓰일 수 있습니다.
rel은 관계를 뜻하고, 연결한 리소스와의 관계가 어떻게 되는지 설명합니다.
- 외부 스타일 시트 연결
<link href="main.css" rel="stylesheet">- 파비콘 연결
<link rel="icon" href="favicon.ico">5️⃣ MIME Type
Multipurpose Internet Mail Extensions의 약자로 간단히 말하면 파일 변환을 의미합니다.
브라우저는 리소스를 내려받았을 때 해야 할 기본 동작이 무엇인지를 MIME 타입을 기반으로 결정합니다.
✏️ type
| 타입 | 설명 | 서브타입 |
|---|---|---|
| text | 텍스트로 표현되는 모든 문서를 나타내며 인간이 읽을 수 있는 데이터를 의미 | text/plain, text/html, text/css, text/javascript 등 |
| image | 모든 종류의 이미지를 나타냄 | image/jpeg, image/png, image/gif 등 |
| audio | 모든 종류의 오디오 파일들을 나타냄 | audio/mpeg, audio/wav, audio/midi 등 |
| video | 모든 종류의 비디오 파일들을 나타냄 | video/ogg, video/webm |
| application | 모든 종류의 바이너리 데이터를 나타냄 | application/xml,application/json, application/xhtml+xml, application/pdf 등 |
6️⃣ script
자바스크립트를 연결하기 위해 사용합니다. (style태그와 같이 html안에 바로 작성도 가능합니다.)
<script src="javascript.js"></script>✏️ 함께 사용가능한 속성
| 속성명 | 속성값 | 설명 |
|---|---|---|
| async | async | 스크립트가 비동기적으로 실행됨을 명시 |
(단, <script> 요소가 외부 스크립트를 참조하는 경우에만 사용가능) | ||
| charset | 문자셋 | 외부 스크립트 파일에서 사용되는 문자 인코딩 방식을 명시 |
(<script> 요소가 외부 스크립트를 참조하는 경우에만 사용가능) | ||
| defer | defer | 페이지의 파싱이 모두 끝나면 스크립트가 실행됨을 명시 |
(<script> 요소가 외부 스크립트를 참조하는 경우에만 사용가능) | ||
| src | URL | 외부 스크립트 파일의 URL을 명시 |
| type | 미디어 타입 | 스크립트의 미디어 타입을 명시 |
✅ 전역 속성
1️⃣ class & id
✏️ id와 class의 차이점
- class
- 이름을 중복적으로 사용 가능합니다.
.으로 불러옵니다.- id 보다 우선 순위가 낮습니다.
.class-name {}- id
- 문서에 단 하나만 사용 가능합니다.(중복 안됨)
- class 보다 우선 순위가 높습니다.
#으로 불러옵니다.
#id-name {}2️⃣ style
해당 엘리먼트에 인라인으로 css스타일을 적용할 수 있습니다.(권장하지 않음)
<p style="background: yellow;">
<span style="color: navy;">홍길동</span>님, 안녕하세요.
</p>3️⃣ title
title전역 속성을 지정하면 마우스를 해당 엘리먼트 위에 올려놓았을 때 툴팁(tooltip)이 표시됩니다.
웹 접근성 향상을 위해서도 많이 사용됩니다.
스크린 리더가 해당 버튼의 목적을 정확하게 인식할 수 있도록 도움을 줄 수 있습니다.
<button title="로그인"><i class="icon-login"></i></button>4️⃣ lang
요소 내의 수정 불가 또는 수정 가능한 텍스트가 사용해야 하는 언어를 정의합니다.
html 문서 시작 시<html>태그에 해당 문서가 어떤 언어로 작성되어있는지 나타낸다.
- 부모의 lang 속성을 상속받습니다.(전체 혹은 부분적으로 적용이 가능)
- 웹 페이지의 언어를 지정해주는 속성입니다.
- 웹 접근성을 높이기 위해 설정해줘야 하는 속성입니다.
- 스크린 리더의 경우 이 lang 속성값을 판단하여 음성으로 변환해주고 크롬 자동 번역도 이 lang값을 판단하여 번역값을 판단합니다.
<p lang="ko">안녕하세요. 이 글은 한글로 작성 되었습니다.</p>| 언어 | 작성법 |
|---|---|
| 한국어 | ko |
| 영어 | en |
| 중국어 | zh |
| 일본어 | ja |
| 독일 | de |
| 프랑스 | fe |
| 스페인 | es |
| 러시아 | ru |
5️⃣ data
사용자 정의 데이터 속성을 지정합니다.
일반적으로 JavaScript에서 이용할 수 있는 데이터(정보)를 HTML에 저장하는 용도로 사용합니다.
<button type="button" id='btn' data-code-id='1234' data-type='B'>버튼</button>6️⃣ draggable
요소의 드래그 가능 여부를 나타냅니다.
- draggable은 다음 두 값 중 하나를 가질 수 있습니다.(지정필수)
- true: 요소를 드래그 할 수 있습니다.
- false: 요소를 드래그 할 수 없습니다.
<div draggable="true">이 글은 드래그가 가능합니다.</div>
<div draggable="false">이 글은 드래그가 불가능합니다.</div>7️⃣ hidden
브라우저가
hidden속성을 설정한 요소는 렌더링 하지 않습니다.
시각적 방식 외에도 스크린 리더 등 다른 모든 표시 방식에서 숨겨집니다.
<div hidden>이 글은 안 보입니다.</div>