📌 메타데이터 요소

• html5를 입력하거나 !입력하고 tab 하면 html 문서에 기본 틀 볼 수 있음
• head에 있는 태그들이 하는 일 - 페이지에 대한 metadata를 포함하는 것

metadata

• 데이터를 설명하는 데이터
• html도 하나의 데이터 이기 때문에 html문서를 설명하는 데이터가 메타데이타

  ---

📌 title 태그

• 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목
• 자식요소로 안에 태그를 포함해도 다 무시됨 -> 문자열로 작성하기
  head안에 단 하나의 title만 가능
• 즐겨찾기, 북마크의 이름에 기본값으로 들어가있음
• SEO 구글이나 네이버 등 검색엔진이 정보를 수집할 때 영향을 많이 끼침, 비슷한 내용이여도 제목을 더 잘 짓는 사이트가 상위에 노출됨
  명사를 나열하지 말고 웹페이지를 설명할 수 있는 짧은 문장으로 나타내기

  ---

📌 meta 태그

• 들어갈 데이터가 여러개라면 meta태그를 여러개 사용해서 문서의 정보를 나열하는 형태로 사용
• 빈요소라서 -> 속성에 정보 나열

name, content 속성

문서의 메타데이터를 이름-값 으로 표현
두개 항상 같이 씀

charset 속성

• 문자 인코딩
• 모든 언어를 지원하는 유니코드 라는 인코딩, 이걸 사용하겠다는 표현 UTF-8
• 전세계에서 한글을 무리없이 볼 수 있음
• head의 첫번째 정보로 넣거나 title 전에 넣어주기

viewport

• 전체 브라우저 중에서 웹페이지를 볼 수 있는 영역
• 뷰포드의 초기 사이즈에 대한 힌트, 모바일장치에서만 사용

name="viewport" content=""

• ex)
  • width=device-width -> 이 웹페이지를 접속하는 기기의 가로랑 실제 길이를 동일하게 하라
  • initial-scale='0.0~10.0' 장치너비와 뷰포트 너비의 비율 설정, 보통 1.0 (두세배 확대할 이유 없으면)
    user-scalable="yes or no" 두 손가락으로 확대기능할건지

    ---

📌 link 태그

• head 에서 문서정보뿐만 아니라 외부의 파일, 리소스를 연결할 수 있음
• 여러개 파일 연결하고 싶으면 여러개의 link 태그 사용해야함
  css=style sheet를 html 과 연결할 때, 사이트 아이콘 팝잇콘 추가할 때 등
• 빈요소

href 속성

• 이동하려는 경로

rel 속성

• =relationship 연결하려는 파일과 현재 이 파일이 어떤 관계를 가지고 있는지 명시

type 속성

• 외부파일이 어떤 파일인지 정의
  ex) stylesheet는 text/css

MIME 타입

• 외부의 경로를 문자열 혈태로 입력하는데 html은 이 문자열을 해석할 수 없음 -> 어떤 형태의 파일인지 인지하지 못함 -> type이란 속성으로 명시 text로 된 css구나~
  'text/css' 이런 형태를 MIME 타입이라고 부름
• 구조
  카테고리(text나 image 등) / 확장자

  ---

📌 style 태그

• css 적용
• 일반적으로 스타일은 외부 스타일 시트에 작성하고 link 태그로 연결하는 것을 권장

  ---

📌 script 태그

• css 처럼 인라인으로 스크립트를 작성할 수도 있고 외부 스크립트 파일 불러올 수 있음
• 보통 자바스크립트 파일 연결
• head에 있어도 되고 body에 있어도 되지만 위에서부터 html파일을 해석해내려가다가 script 태그는 만나면 안에 있는 javascript 파일을 먼저해석함 이거 해석하는 동안 화면이 중단이 됨 (로딩이 오래걸림)
  그래서 script 태그는 body의 마지막에 쓰는 걸 권장
• 먼저 html 내용을 먼저 화면에, 그리고 시간이 걸리는 자바스크립트 파일을 마지막에 실행시킴
• css는 외부파일을 가져오려면 link 태그 사용, 직접 인라인으로 입력하려면 style 태그 사용
  javascript는script 태그 하나로 두개다 가능

src 속성

• 외부파일을 가져오려면 상대경로나 절대경로 입력