HTML head 요소

HTML head 요소

head 요소는 메타데이터(데이터에 대한 데이터)에 대한 컨테이너이며, HTML 메타 데이터는 HTML 문서에 대한 데이터입니다.
일반적으로 문서 제목문자 세트, 스타일, 스크립트 및 기타 메타 정보를 정의합니다.

1. <meta/>
   HTML 문서에 관한 정보를 검색엔진, 브라우저 등에게 제공하며 charset="문자의 인코딩 방식"을 뜻합니다.
   

    <meta charset="UTF-8">​

2. <title></title>
   브라우저 툴바에서 제목을 정의하며, 즐겨찾기에 추가 될 때 페이지 제목을 제공합니다.
   검색 엔진 결과에 페이지 제목을 표시합니다.

       <title>HTML 문서의 제목</title>
   ​

3. <link>
   외부 문서를 연결할때 사용하며, 주로 스타일 시트 연결하는데 사용합니다.

    <link rel="stylesheet" href="링크 문서의 경로">​

4. <script></script>
   HTML 문서의 자바스크립트를 입력하거나, 외부 자바스크립트 문서를 연결할 때 사용합니다
   

   // 링크 연결할때 사용
   <script src="연결할 스크립트 문서의 경로"></script>​
   
   // HTML 문서의 스크립트 입력할때
   </body> 바로 위에 사용
   <script></script>

meta 요소

• <meta charset="UTF-8">
  사용될 문자 코드 셋 지정합니다.

  <meta charset="UTF-8">​

• <meta name="keywords" content="hello, world">
  검색엔진에 대한 키워드 지정

  <meta name="keywords" content="hello, world">

• <meta property="og:type" content="해당 사이트 종류">
  사이트의 종류를 지정

  <meta property="og:type" content="해당 사이트 종류">​

• <meta property="og:type" content="해당 사이트 종류">
  사이트의 종류에 대해 지정

  <meta property="og:type" content="해당 사이트 종류">​

• <meta property="og:url" content="해당 사이트 url">
  해당 사이트 url를 입력

  <meta property="og:url" content="해당 사이트 url">​

• <meta property="og:description" content="해당 사이트 설명">
  해당 사이트 설명

  <meta property="og:description" content="해당 사이트 설명">​

• <meta property="og:image" content="해당 사이트 이미지">
  사이트를 나타낼 대표 이미지 표시

  <meta property="og:image" content="해당 사이트 이미지">​

• <meta name="viewport" content="width=device-width, initial-scale=1.0">
  모든 기기에서 사이트가 잘 보이도록 뷰포트 설정

  <meta name="viewport" content="width=device-width, initial-scale=1.0">​

뷰포트 설정

뷰포트 설정은 모바일 기기에서 실제 렌더링되는 영역과 뷰포트의 크기 및 줌 레벨을 조정할 수 있습니다.
tip! 1.0 은 100%와 같습니다.

• minimum-scale : 줄일 수 있는 최소 크기를 지정합니다. 0~10 사이의 값을 가집니다.
• maximum-scale : 늘릴 수 있는 최대 크기를 지정합니다. 0~10 사이의 값을 가집니다.
• user-scalable : yes 또는 no 값을 가지며 사용자가 화면을 확대/축소 할 수 있는지는 지정합니다.

<meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">