HEAD에 포함되는 태그

HEAD에 포함되는 정보

• <title>: HTML 문서의 제목
• <meat>: 사이트 정보
• <style>: CSS 스타일 작성
• <link>: 주로 스타일시트를 연결할 때 사용. 그 외에 파비콘 연결 등
• <base>: 문서 안의 모든 상대 URL이 사용할 기준 URL 지정

 

META

meta 태그는 빈태그이다. <meta>로 열린 형식.

 

태그 속성

• charset: HEAD에서 가장 처음에 위치하여 문자 인코딩 방식을 선언한다. (=character set)
  • UTF-8 (조합형): 구성된 것만 있어도 가능(ㅎㅗㅇㄱㅣㄹㄷ)
  • EUC-KR (완성형): 완성된 글자 자체를 찾는 방식(홍 길 동) - 완성된 글자를 찾지 못할 경우 글자가 깨지는 현상
• content: name 또는 http-equiv 속성의 값을 작성할 때 사용하는 속성
  • 예) <meta name="author" content="홍길동">
• http-equiv: 서버나 사용자 환경의 작동방식을 변경해줄 지시사항을 작성한다. 대표적으로 인터넷 익스플로러 브라우저에서 우리가 사용하는 웹사이트가 어떤 해당하는 인터넷 익스플로러 버전에서 최적화되어 작동할 수 있는지 렌더링 방식에 대해서 명시할 수 있음

  • <meta http-equiv="X-UA-Compatible" content="IE=edge">
    /* 이 내용이 있는 HTML 문서는 인터넷 익스플로러(IE)에서 렌더링 될 때,
    최신의 인터넷 익스플로러 렌더링 방식으로 화면에 출력되도록 하라는 의미 */

• name: 정보의 종류를 지칭할 때 name에 정의한다.
  • author(문서의 작성자), description(페이지 내용 요약), generator(페이지를 생성한 소프트웨어의 식별자), keywords(콤마로 구분된 페이지 내용과 관련된 단어들), referrer, viewport(화면에 정보를 렌더링 하기위한 영역 설정. 반응형 웹사이트 제공)
• property: 일반적으로 제공하지 않음
  • <meta property="og:title" content="네이버"> 에서 og 는 open graph를 뜻하고 기존의 웹사이트를 소셜네트워크 서비스와 연동하여 사업자와 고객들과의 관계를 강화하고 마켓팅 플랫폼으로 활용하는 기법이다.
  • 브라우저에게 특정 정보를 주기 위해 사용. 페이스북이나 트위터같은 SNS에 사이트를 공유했을 때 사이트에서 공유된 정보를 특정한 사이트에서 체크해갈 때 필요한 부분 (크롤링 해갈 때 주로 퍼가는 부분들)

 

Base

문서 안의 모든 상대 URL이 사용할 기준 URL을 지정한다.

• 문서에는 하나의 Base 요소만 존재할 수 있다. (하나의 기준점)
• base 태그를 작성할 때는 되도록이면 경로를 작성하려는 태그 위에 작성하는 것이 좋다.
• base 태그를 통해 경로를 작성해주면 기본적인 경로설정이 그 주소로 설정된다. 따라서 상대경로를 작성할 때도 앞에 ./를 생략하고 작성이 가능해진다. ( / : 절대경로, ./ : 상대경로)
  
  • 예) 이미지 태그를 이용해 이미지 주소를 가져와서 사용할 때, 특정한 사이트에서 계속해서 가져와서 사용한다면 이미지 파일의 이름을 제외한 앞에 사이트의 이름은 동일하기 때문에 이럴 때 base 태그를 이용하면 좀 더 보기 쉽게 만들 수 있다.

  • /* CSS 폴더 안에 존재하는 main.css 파일 */
    <base href="./css/">
    <link rel="stylesheet" href="main.css"> ------------- href="./css/main.css" 와 같은 의미