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" />
0seo