lang, charset, viewport, description과 title이 문서를 설명하는 방식을 배웁니다.
html의 lang은 문서의 기본 언어를 알려 발음과 번역에 도움을 줍니다. charset=utf-8은 문자 해석 방식을, viewport는 모바일 화면의 기준 폭을, description은 검색 결과에 사용될 수 있는 페이지 요약을 제공합니다. title은 탭 이름이므로 페이지마다 구체적으로 작성합니다. lang과 head 메타데이터는 본문에 보이지 않으므로, 실습 결과에서는 완성된 문서 코드를 읽을 수 있는 형태로 표시합니다.
pre는 소스의 줄바꿈과 들여쓰기를 그대로 보여 주므로 head 안의 meta 세 줄과 title이 한 단계씩 들여쓴 모양 그대로 나옵니다. 그중 viewport의 content 값은 width=device-width로 기준 폭을 기기 폭에 맞추고 initial-scale=1로 첫 배율을 100%로 둡니다. 줄이 카드보다 길어지면 CSS의 overflow: auto가 pre 안에 가로 스크롤을 만듭니다.
meta charset은 문서 앞쪽 1024바이트 안에 있어야 브라우저가 인코딩을 판단할 때 쓸 수 있으므로 head의 첫 자식으로 두는 것이 안전합니다. lang은 html뿐 아니라 어느 요소에나 붙일 수 있어서, 한국어 문서 속 영어 인용문에 lang=en을 주면 화면 읽기 도구가 그 부분을 영어 발음으로 읽을 수 있습니다.
keyword meta를 많이 넣는 것이 검색 순위를 보장하지 않습니다. 페이지 내용과 일치하는 title, description, 의미 있는 본문 구조가 먼저입니다.
직접 바꿔보세요현재 강좌 페이지에 어울리는 title과 description을 직접 작성하세요.