[HTML] Head

HTML Head

 

● Emmet 기능을 사용하여 html문서에 !를 입력한 뒤 tab을 누르면 자동으로 head요소가 포함된 html 문서 구조가 입력

 

HTML <title> 요소

: 문서의 제목을 정의

● HTML 문서의 필수 요소 -> 검색엔진최적화(SEO) 사용 시 검색 결과에 페이지를 나열 할 때 검색 엔진 알고리즘에서 순서를 결정하는데 사용

 

HTML <style> 요소

: 단일 HTML 페이지의 스타일 정보를 정의하기 위해 사용

 

HTML <link> 요소

: 현재 문서와 외부 리소스 간의 관계를 정의 -> 외부 스타일 시트에 링크할 때 사용

 

HTML <meta> 요소: 일반적으로 문자 세트, 페이지 설명, 키워드, 문서 작성자 및 뷰포트 설정을 지정하기 위해 사용

 

• 사용할 문자 집합을 정의

<meta charset="UTF-8">

• 검색 엔진의 키워드를 정의

<meta name="keywords" content="baseball, football, basketball">

• 웹 페이지에 대한 설명을 정의

<meta name="description" content="favorite sports">

• 페이지 작성자를 정의

<meta name="author" content="HDH">

• 30초마다 문서를 새로고침

<meta http-equiv="refresh" content="30">

• 웹 사이트를 모든 장치에서 보기 좋게 만들기 위한 뷰포트 설정

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

 

viewport(뷰포트)란?

: 사용자가 웹 페이지에서 볼 수 있는 영역

  -> 현재 보고 있는 컴퓨터 화면의 영역 (일반적으로 브라우저 창과 동일하다)

 

HTML <script> 요소

: 클라이언트 측 JavaScript 정의에 사용