[HTML/CSS] head 영역 마크업

HTML 마크업

HEAD영역

1. DTD(Document Type Definition) HTML5 형식으로 선언

<!DOCTYPE html>

2. <html> 요소의 기본 언어 설정

<html lang="ko">
</html>
  • lang속성은 주로 보조기기사용자, 대표적으로 스크린리더 사용자에게 기본 언어를 어떻게 제공할 것인지를 결정하는지를 도움을 줍니다.
  • 웹접근성 관점에서 필요한 속성이라고 할 수 있습니다.
  • lang="ko" 로 언어를 설정할 수 있으며, lang="ko-KR"을 통해 언어설정과 더불어 국가 설정도 할 수 있습니다.(한국어를 사용하고 있는 korea republic)

※참고

  • lang="ko" 속성은 body영역내부에서도 사용이 될 수 있습니다.
  • 특정 부분이 영어로 작성된 경우 lang="en"을 넣어 명확하게 표현을 할 수도 있습니다.

3. 문자 인코딩(UTF-8)의 간소화 된 문법 형식(HTML5)

HTML5 이전에 사용되던 문자 인코딩 방식

  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

HTML5에서 제공되는 간소화된 인코딩 방식

  <meta charset="UTF-8" />

두 형식이 나타내는 바는 똑같지만 HTML5의 조금 더 간소화된 방식을 사용할 수 있습니다.

4. 적절한 title 설정하기

  <title>오늘의 발견 - 쿠팡(Coupang)</title>

여러 페이지를 만들 때 동일한 title을 제공해서는 안되면, 각각의 페이지가 유니크한 title을 가질 수 있도록 페이지에 맞는 제목을 적절하게 삽입을 해야합니다.

5. 파비콘 설정

  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  <link rel="icon" href="./favicon.png">
  • 파비콘을 설정하는 방법에는 두가지가 있습니다. 모던 브라우저의 경우 shortcut icon이 아닌 icon설정만으로도 파비콘 설정이 가능합니다.
  • shortcut icon은 icon을 지원하지 못하는 구형브라우저 방식에서 사용하는 방식입니다.

6. Google Font 삽입

  • Google Font에서 사용할 폰트의 link를 카피해와 붙여넣을 수 있습니다.
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap"
    rel="stylesheet" />

7. normalize css 링크 삽입

  • 기존에 가지고 있는 css의 스타일을 초기화하기 위해 google 검색창에 normalize css cdn을 검색해 링크를 가지고 와 삽입합니다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

8. 사용할 css파일 연결

  <link rel="stylesheet" href="./stylesheets/main.css" />
[Vue] Error: Invalid route component at extractComponentsGuards 오류 해결
var, let, const 와 Hoisting

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage