티스토리 뷰
Head부분의 meta 태그는 뒤에 닫는 태그가 없어 사용을 하면 오류가 생길 수 있다!
그리고 meta 태그는 속성을 가지지 않으면 역할을 충실히 이행을 할 수가 없습니다.
meta 태그의 속성으로는 name이나 content나 charset등이 사용이 됩니다.
charset
Character Sets의 약자로 문자가 인코딩 되는 방식을 정해주는 것입니다.
대부분이 UTF-8을 값으로 정해준다.
<!-- index.html -->
<head>
<meta charset="UTF-8">
</head>문자가 인코딩되는 방식을 정해주는 것이기 때문에 title 태그와 같이 문자가 작성이 되어있는 것보다 상위에서
작성이 되어야 한다!
<!-- index.html -->
<head>
<meta charset="UTF-8>
<title>안녕하세요 타이틀이에요</title>
</head>EUC-KR이라는 것도 사용이 되긴 하는데 EUC-KR은 완성형이고 UTF-8은 조합형입니다.
완성형은 제대로 된 문장이 없으면 한글이 깨지는 현상이 발생할 수도 있습니다.
EUC-KR : 완성형 ex) 조 태 양
UTF-8 : 조합형 ㅈㅗㅌㅐㅇㅑㅇ
meta 태그 같은 경우에 HTML 에서 정보로 표현할 수 있는 기타 모든 것들을 명시를 할 수가 있습니다.
관련된 공식문서는 이 링크로 들어가시면 자세한 설명들이 있습니다!
https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta
: 문서-레벨의 메타데이터 요소
HTML meta 요소는 base, link, script, style 또는 title과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타냅니다.
developer.mozilla.org
컨텐트 카테고리
블록요소와 인라인 요소는 어떤 특성을 가지는지 살펴 봤었는데
이것의 발전된 내용으로 HTML5에 나왔다. 코딩을 하는데 사실은 중요하게 사용이 되는 개념이 아니다.
따라서 HTML과 CSS를 어느정도 배운 후 왜 이렇게 사용을 하는지 궁금할 때 살펴보면 된다.
이 다음으로는 meta 태그에 어떤 속성이 들어갈 수 있는지에 대해 간단하게 적어보겠습니다.
http-equiv
이 속성은 서버나 사용자의 환경에 작동 방식을 변경해주는 지시사항을 명시해주는 것입니다.
대표적으로 사용하는 곳이 인터넷 익스플로러에서 우리가 사용하는 웹사이트가 어떤 버전에서
최적화되서 나올 수 있는 렌더링 방식을 명시할 수 있습니다.
name
문서 레벨의 메타데이터의 이름을 정의 합니다. 정보의 종류를 여기다 정의하면 되겠습니다
ex )author는 문서의 작성자를 정의, description은 페이지의 내용에 대한 짧고 정확한 요약을 담고 있습니다.
간단하게 알려드린 것들을 한 번 코드를 작성해서 보여드리겠습니다.
<!-- index.html-->
<head>
<meta name="author" content="루체">
<meta name="description" content="루체의 티스토리!">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
name="viewport"는 반응형 웹사이트를 제공하기 위해서 필요한 코드가 되겠습니다.
화면에 정보를 렌더링하기 위한 영역을 어떤 방식으로 선언하는 것인지 명시하는 것입니다.
보통 너비를 device-width에 최적화를 시켜서 사용을 합니다. initial-scale은 확대 축소를 기본적으로 1.0으로 설정을
하겠다는 말입니다.
http-quiv의 값은 무슨 뜻이냐면 인터넷 익스플로러 엣지로 이 웹페이지를 봐야 최적화된 화면을 볼 수가 있다는 말
입니다. 따라서 만약 인터넷 익스플로러를 지원하는 웹페이지라면 이것을 명시적으로 작성해주시면 편할 것 같습니다.
더 자세한 내용들은 각각의 글로 작성을 할 예정입니다!
'온라인강의정리하기 > HTML' 카테고리의 다른 글
| HTML - MIME 타입 (0) | 2019.08.20 |
|---|---|
| HTML - Link (0) | 2019.08.20 |
| HTML 블록 요소와 인라인 요소 - (2) (0) | 2019.08.17 |
| HTML 블록 요소와 인라인 요소 - (1) (0) | 2019.08.17 |
| Meta 속성, SCRIPT란..? (0) | 2019.08.17 |
- Total
- Today
- Yesterday
- 객체
- 알고리즘
- 글로
- 관계형데이터베이스
- 생활코딩
- 네트워크 프로그래밍
- 문자열
- css
- 생활코딩#동영상을#글로#html
- PHP&MySQL
- Link
- javascript
- php
- 언리얼엔진4
- HTML
- 기초
- 차이점
- 정렬
- 선택자
- visual studio code
- C언어
- 안드로이드 스튜디오
- 생활코딩#MySQL
- 언리얼엔진
- 조건문
- 변수
- GRID
- TAG
- inline
- 동영상을
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |