메타 데이터
<meta>
메타 태그는 웹사이트의 추가적인 정보를 명시해주는 태그이다. <head> 태그 안에 위치하여있으며 빈 태그(내용이 없음)이다.
속성
| 속성 | 설명 |
| charset | <meta charset="UTF-8"> , 인코딩 방식을 지정 |
| http-equiv | <meta http-equiv="Content-Style-Type" content="text/css"> , HTTP header의 이름을 값으로 가질 수 있음 |
| name | <meta name="author" content="Jane"> , 메타 데이터의 정보를 정의 |
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
<meta>: The metadata element - HTML: HyperText Markup Language | MDN
The <meta> HTML element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title>.
developer.mozilla.org
<link>
외부 문서를 가져올 수 있는 태그, css파일을 가져올 때 사용한다.
사용법
<link rel="stylesheet" href="./style.css">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
<link>: The External Resource Link element - HTML: HyperText Markup Language | MDN
The <link> HTML element specifies relationships between the current document and an external resource. This element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home sc
developer.mozilla.org
<style></style>
HTML 문서 안에 CSS를 작성할 수 있게 해주는 태그이다. 어디에 위치해있든 상관없지만 <head> 안에 위치는 것을 권장한다.
사용법
<style>
body{
background-color:blue;
}
</style>MIME Type
외부 문서를 가져올 때나 이미지 , 비디오등의 인스턴스가 Type이 무엇인지 명시하여 서바나 브라우저에게 알려주기 위한 방법이다. HTML5 들어오고 나서는 자동으로 들어가지만 속성으로 type="text/css"와 같이 명시해줄 수 있다.
사용법
<style type="text/css">
</style>https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
MIME 타입의 전체 목록 - HTTP | MDN
다음은 일반적인 확장자로 정렬된, 문서 타입과 관련된 MIME 타입의 포괄적인 목록입니다.
developer.mozilla.org
<base>
base태그는 외부 문서에대해 경로를 지정할 때 기준 경로를 정하여 보다 쉽게 외부 문서 파일의 경로를 작성할 수 있게 해주는 태그이다. URL도 가능하다. base태그는 하나의 문서에 한 번 밖에 사용을 못한다.
여담이지만 base태그를 사용해서 의도하지 않은 문서를 불러오게 하여 XSS와 같은 해킹을 시도할 수 있다.
사용법
만약 css폴더안의 style.css를 불러오려고 하면 아래처럼 가져와야 한다.
<link rel="stylesheet" href="./css/style.css">base태그를 사용하게 되면 아래오 같이 사용할 수 있다.
<!-- 경로 -->
<base href="./css">
<link rel="stylesheet" href="style.css">
<!-- URL -->
<base href="http://www.example.com/"> <!-- 마지막 slash주의 -->
<img href="testimg.png">❗ 저작권 및 참고
'Programming > HTML' 카테고리의 다른 글
| [HTML] Block과 Inline (0) | 2022.07.24 |
|---|---|
| [HTML] 속성 (0) | 2022.07.24 |
| [HTML] HEAD 태그 안의 태그들 (0) | 2022.07.24 |
| [HTML] 이미지 (0) | 2022.07.24 |