🌾메타데이터
- 눈에 보이지 않는 Head 부분
메타데이터란?
데이터를 설명하는 메타데이터를 의미한다.
만약, 사진이 있다고 생각하면 상세정보에 촬영 일시, 사진작가란 '사진'을 설명하는 데이터들이 있다. 그런 데이터가 메타 데이터다.
1. 언어 설정
<head>
<meta charset="utf-8">
</head>html:5만 입력해도 바로 나오는 값이다.
utf-8 이 모든 나라의 언어를 지원해준다.
charset 말고 언어에 관련된 <lang>라는 태그 또한 존재한다.
2. 현재 문서와 외부 리소스 관계
css파일과 html 파일 연결 혹은 파비콘을 넣을 때 많이 사용 된다.
<link rel="stylesheet" href="css파일 주소">css 파일과 연결시, rel은 stylesheet로 고정되있다고 생각하면 된다.
<link rel="icon" href="파비콘.ico">파비콘의 rel 속성은 icon이고, 확장자는 ico를 이용한다.
<script>
</script>그 외, javaScript와 html 파일 연결이 필요할 땐 script 태그를 이용한다. <head>에 script 태그를 넣을 수도 있지만, script 태그를 만나는 순간 JS 파일을 먼저 읽기 때문에 index 렌더링이 멈출 수 있다.
따라서 <body> 마지막에 넣는 것을 추천한다 !
🏷️ 전역속성
전역속성은 어떤 태그에도 모두 사용이 가능하다.
1. style
style 은 세 가지 방법으로 사용이 가능하다.
1) <head> 태그 안에서 사용하는 방법<head> <style> .id{ color:blue; } </style> </head>2) 태그 바로 뒤에 사용하는 방법
<div style="color: red;">3) css 를 이용
2)번 방식을 이용하면, css에서 한 디자인이 적용되지 않을 가능성이 있다. 디자인의 대부분은 css에서 처리해야한다는 것을 기억해야한다!
2. id와 class
<div id="test"> 안녕하세요 </div>id는 유일 해야 한다. 다른 <div> 혹은 <p> 등의 태그에서 한 번 쓴 id를 다시 쓸 수 없다. 공백도 허용하지 않는다.
<p class="test2 test3">안녕하세요.</p>
<p>저는</p>
<p class="test2">공부를 열심히 할 거에요</p>반면에 class는 중복을 허용한다. 공백 또한 허용하는데 class 이름이 test2 test3가 아닌, class가 2개 라는 뜻이다. 따라서 "안녕하세요"를 감싼 div는 test2와 test3 두 개의 클래스를 가지고 있다.
3. draggable
드래그 할 수 없게끔한다.
<div style="color: red;" draggable="true">답을 입력하지 않아도 되는 boolean 타입이 아니기 때문에 true/ false 중 값을 입력해주어야 한다.
4. hidden
시각적으로도, 스크린 리더에도 보이지 않는다. 하지만 개발자 도구에서는 보이기 때문에 중요한 정보를 hidden 시켜주면 안된다.
