#2.5 More Tags and Head
path notation 경로 표기법
HTML 문서는 다음과 같이 시작해야 한다.
<!DOCTYPE html>이 코드는 브라우저에게 text 파일이 아니라 HTML 문서라고 알려주는 것이다.
웹사이트 구조는 head와 body, 두 개의 파트로 구성되어 있다. head 파트에서는 웹사이트의 환경을 설정한다. 외부적으로 보여지지 않는 설정을 해준다. 페이지에 관한 환경 설정을 해주는 곳이다. 그 설정 중 하나가 title이다. head 태그 안에 있는 모든 태그들은 보여지지 않는다. head 태그에 속해 있는 모든 태그들은 보여지지 않는다. body는 사용자가 볼 수 있는 content를 보여준다. 브라우저 화면 상에 보여질 내용들은 전부 body 태그에 있어야 한다.
#2.6 Its All About the Head
meta 태그의 meta는 부가적인 정보라는 뜻이다. self-closing tag.
meta: The meta element represents various kinds of metadata that cannot be expressed using the titile, base, link, style, and script elements.
meta 태그는 두 개의 attribute를 갖고 있다. content와 name.
‣‣ charset: meta 태그의 attribute. 브라우저에게 text를 어떻게 그려달라는지 말해준다. 한글이나 다른 특수문자가 있는 언어를 입력할 때 필요하나 attribute. 없으면 글자가 사이트에서 깨져보일 것이다. ⬇️
<meta charset="utf-8" /><html lang="">검색엔진들에 도움을 주기 위해 언어를 설정한다. 우리 사이트에서 사용되는 언어가 무엇인지 말해주는 것이다. 주된 언어가 한국어인지 영어인지 검색엔진에게 알려주는 것이다.
에서 하는 작업들은 사이트의 정보를 브라우저에게 알려주는 용도이다. 최대한 명확하게 우리의 웹사이트가 무엇인지 브라우저에게 알려주는 것이다. 우리 사이트가 어떤 언어를 사용하는지, title이 무엇인지 등 검색엔진이 이해할 수 있게 정리해서 말해주는 것이다. 보이지 않는 태그들로 사이트 설정을 해준다.<meta property="og:image" content="주소">⬆️ og:image라는 태그에 이미지는 카카오톡에 공유될 때 보여지는 이미지다. 내가 사이트의 링크를 카카오톡에 공유할 때, 카카오톡은 우선 og:title이라는 태그를 찾고, description을 찾는다. 그리고 나서 og:image를 본다.
og tag (open graph) 콘텐츠의 요약내용이 sns에 게시되는데 최적화된 데이터로 가지고 갈 수 있도록 설정하는 것.
- og:~~ 네이버 카카오톡
- fb:~~ 페이스북
- twitter:~~ 트위터
이렇게 사이트의 부가적인 정보들은 head 태그에서 작성해준다.
