HTML head란 무엇인가요?
이전 글에서 다루었던 간단한 HTML 문서를 다시 한번 살펴볼게요.
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>HTML head는 <head> 요소 안에 들어가는 내용들을 말해요. 브라우저에 페이지가 로드될 때 화면에 표시되는 <body> 요소의 내용들과는 달리, head의 내용은 페이지 화면에 보이지 않습니다. 대신, 문서에 대한 메타데이터(metadata)를 담고 있는 것이 바로 head의 역할이죠.
💡 강사의 팁: C++ 같은 언어에 익숙하시다면, C++의 헤더 파일(
#include)이 실제 실행 코드가 아니라 컴파일러를 위한 선언이나 메타데이터를 담고 있는 것과 아주 비슷하다고 생각하시면 이해하기 쉬우실 거예요! HTML의<head>도 브라우저에게 "이 문서는 이런 설정값들을 가지고 있어"라고 미리 알려주는 역할을 하거든요.
위 예제에서 head 부분은 아주 짧습니다.
<head>
<meta charset="utf-8" />
<title>My test page</title>
</head>하지만 규모가 큰 웹 페이지에서는 head 부분이 엄청나게 길어질 수 있어요. 여러분이 즐겨 찾는 웹사이트에 들어가서 개발자 도구(developer tools)를 열어 그들의 head 내용을 한 번 확인해 보세요.
우리의 목표는 head에 넣을 수 있는 '모든 것'을 어떻게 사용하는지 보여드리는 게 아니에요. 그보다는 여러분이 꼭 포함해야 할 주요 요소들의 사용법을 익히고, 이 영역과 친숙해지도록 돕는 것이랍니다. 자, 그럼 시작해 보죠.
제목(title) 추가하기
우리는 이미 <title> 요소가 어떻게 동작하는지 보았어요. 이 요소는 문서에 제목을 추가하는 데 사용됩니다. 하지만 종종 본문 내용 중 가장 최상위 제목을 표시할 때 쓰는 h1 요소와 헷갈리실 수 있어요. h1도 때로는 '페이지 제목'이라고 불리거든요. 하지만 이 둘은 완전히 다른 역할을 한답니다!
- h1 요소는 브라우저에 페이지가 로드될 때 화면 본문 안에 직접 표시됩니다. 일반적으로 페이지당 한 번만 사용해야 하며, 페이지 콘텐츠의 제목(이야기 제목, 뉴스 헤드라인 등 상황에 맞는 것)을 마크업하는 데 쓰여요.
<title>요소는 문서의 콘텐츠가 아니라, 전체 HTML 문서 자체의 제목을 나타내는 메타데이터입니다. 브라우저의 탭 부분에 표시되는 이름이죠.
예제 살펴보기
-
이번 실습에서는 저희 GitHub 저장소로 이동해서 title-example.html 페이지의 복사본을 다운로드하는 것부터 시작해 볼게요. 이렇게 하시면 됩니다:
- 페이지에서 코드를 복사해서 여러분의 코드 에디터에 새 텍스트 파일로 붙여넣은 다음, 적당한 곳에 저장하세요.
- 또는 GitHub 페이지에서 "Raw" 버튼을 누르세요. 그러면 순수 코드만 나오는 화면(아마 새 탭)이 열릴 거예요. 그 다음 브라우저 메뉴에서 다른 이름으로 페이지 저장(Save Page As…)을 선택해서 파일을 저장하시면 됩니다.
-
이제 브라우저에서 그 파일을 열어보세요. 아래와 같은 화면이 보일 거예요:
이제
<h1>내용이 어디에 나타나고<title>내용이 어디에 나타나는지 완전히 명확해지셨죠! -
코드 에디터에서 코드를 열어 이 요소들의 내용을 직접 수정해 본 뒤, 브라우저를 새로고침 해보세요. 이것저것 재미있게 바꿔보세요.
<title> 요소의 내용은 다른 곳에서도 활용됩니다. 예를 들어, 페이지를 북마크(Firefox에서는 북마크 > 현재 페이지 북마크 또는 URL 표시줄의 별 모양 아이콘 클릭) 해보시면, <title>의 내용이 북마크 이름으로 추천되어 자동으로 채워지는 것을 볼 수 있어요.
또한 <title> 내용은 검색 결과에서도 사용되는데요, 이는 아래에서 더 자세히 살펴볼게요.
메타데이터: <meta> 요소
메타데이터는 '데이터를 설명하는 데이터'를 뜻해요. HTML은 문서에 메타데이터를 추가하기 위한 "공식적인" 방법을 제공하는데, 바로 <meta> 요소입니다. 물론 우리가 이 글에서 다루고 있는 다른 것들도 메타데이터라고 볼 수 있어요.
페이지의 <head>에 포함할 수 있는 <meta> 요소의 종류는 아주 많습니다. 하지만 지금 단계에서 그 모든 것을 다 설명하지는 않을 거예요. 너무 혼란스러워질 수 있거든요. 대신, 여러분이 감을 잡을 수 있도록 흔하게 볼 수 있는 몇 가지를 설명해 드릴게요.
문서의 문자 인코딩(character encoding) 지정하기
위에서 보았던 예제 코드에는 이런 줄이 있었죠:
<meta charset="utf-8" />이 요소는 문서의 문자 인코딩, 즉 문서에서 사용이 허락된 문자 집합(character set)을 지정합니다. utf-8은 인간이 사용하는 거의 모든 언어의 문자를 포함하는 범용 문자 집합이에요. 다시 말해, 이걸 설정해 두면 여러분의 웹 페이지가 어떤 언어든 깨지지 않고 화면에 보여줄 수 있다는 뜻입니다. 그러니 여러분이 만드는 모든 웹 페이지에 이 설정을 넣는 것이 아주 좋겠죠! 예를 들어, 여러분의 페이지가 영어와 일본어를 모두 문제없이 표시할 수 있게 됩니다.
만약 문자 인코딩을 ISO-8859-1(라틴 알파벳을 위한 문자 집합) 등으로 잘못 설정하면, 페이지 화면이 완전히 망가져서 보일 수 있어요.
참고: Chrome 같은 일부 브라우저들은 잘못된 인코딩을 자동으로 수정해 주기 때문에, 사용하는 브라우저에 따라 이런 문제가 안 보일 수도 있습니다. 하지만 다른 브라우저에서 발생할 수 있는 잠재적인 문제를 막기 위해 항상 페이지에
utf-8인코딩을 설정하는 습관을 들이세요.💡 강사의 부연설명: 프론트엔드 실무에서는 API 통신으로 다양한 국가의 데이터를 받아오게 됩니다.
utf-8이 아니면 나중에 백엔드와 데이터를 주고받을 때 한글이 "쀏뗿" 처럼 깨지는 현상(Mojibake)을 겪을 수 있어요. 이 한 줄은 절대 빼먹지 마세요!
문자 인코딩 실험해보기
직접 확인해 보려면, 아까 <title> 섹션에서 얻은 간단한 HTML 템플릿(title-example.html 페이지)을 다시 열어서 meta charset 값을 ISO-8859-1로 바꿔보고, 페이지에 일본어를 추가해 보세요. 저희가 사용한 코드는 이렇습니다:
<p>Japanese example: ご飯が熱い。</p>작성자 및 설명 추가하기
많은 <meta> 요소들은 name과 content 속성을 포함하고 있어요.
name: 어떤 유형의 meta 요소인지, 즉 어떤 종류의 정보를 담고 있는지를 지정합니다.content: 실제 메타데이터의 내용을 지정합니다.
페이지에 포함하면 좋은 두 가지 meta 요소는 페이지의 작성자를 정의하고, 페이지에 대한 간결한 설명을 제공하는 것입니다. 예제를 살펴볼까요?
<meta name="author" content="Chris Mills" />
<meta
name="description"
content="The MDN Web Docs Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing websites and applications." />작성자를 명시하는 것은 여러모로 유용합니다. 페이지 내용에 대해 질문이 있거나 연락을 취하고 싶을 때 누가 이 페이지를 작성했는지 파악할 수 있으니까요. 일부 콘텐츠 관리 시스템(CMS)은 페이지 작성자 정보를 자동으로 추출해 이런 목적으로 제공하는 기능을 갖추고 있습니다.
페이지의 콘텐츠와 관련된 키워드가 포함된 설명을 명시해 두면, 검색 엔진에서 사람들이 관련 내용을 검색했을 때 여러분의 페이지가 검색 결과 상단에 노출될 확률을 높일 수 있어서 아주 유용합니다. (이러한 활동을 검색 엔진 최적화(SEO)라고 부릅니다.)
검색 엔진에서 설명(description)이 어떻게 쓰이는지 알아보기
설명(description)은 검색 엔진 결과 페이지에서도 사용됩니다. 이 부분을 좀 더 파헤쳐 보는 실습을 해볼게요.
- MDN Web Docs 메인 페이지로 이동하세요.
- 페이지의 소스를 봅니다 (페이지에서 마우스 우클릭 후 컨텍스트 메뉴에서 페이지 소스 보기(View Page Source) 선택).
- description meta 태그를 찾아보세요. 대략 아래와 같은 모습일 겁니다 (시간이 지나면 바뀔 수도 있어요):
<meta
name="description"
content="The MDN Web Docs site
provides information about Open Web technologies
including HTML, CSS, and APIs for both websites and
progressive web apps." />-
이제 여러분이 즐겨 쓰는 검색 엔진에서 "MDN Web Docs"를 검색해 보세요. (저희는 Google을 사용했어요.) 검색 결과에 아까 보았던
<meta>의 설명과<title>요소의 내용이 그대로 사용된 것을 볼 수 있을 겁니다. 정말 추가할 가치가 있죠!
참고: 구글에서는 메인 홈페이지 링크 아래에 MDN Web Docs의 관련 하위 페이지들이 나열된 것을 볼 수 있습니다. 이를 사이트링크(sitelinks)라고 하며, Google 웹마스터 도구(Search Console)에서 설정할 수 있습니다. 이는 Google 검색 엔진에서 내 사이트의 검색 결과를 더 멋지게 만드는 방법 중 하나입니다.
참고: 과거에 쓰이던 많은
<meta>기능들은 이제 더 이상 사용되지 않습니다. 예를 들어 keyword<meta>요소(<meta name="keywords" content="여기에, 키워드를, 입력하세요">)가 대표적인데요. 원래는 검색 엔진이 다양한 검색어에 대한 페이지의 관련성을 파악하도록 키워드를 제공하는 역할이었지만, 스패머들이 검색 결과를 조작하려고 이 키워드 목록을 수백 개의 키워드로 도배하기 시작하면서 현재는 검색 엔진들이 이 태그를 무시하고 있습니다.
기타 다른 유형의 메타데이터
웹을 돌아다니다 보면 다른 종류의 메타데이터도 발견하게 될 거예요. 웹사이트에서 볼 수 있는 많은 메타데이터 기능들은 특정 사이트(소셜 네트워킹 사이트 등)가 활용할 수 있도록 고안된 독자적인 창작물들입니다.
예를 들어, 오픈 그래프 데이터(Open Graph Data)는 Facebook이 웹사이트의 더 풍부한 메타데이터를 제공하기 위해 발명한 메타데이터 프로토콜이에요. MDN Web Docs의 소스 코드에서 이런 걸 보실 수 있습니다:
<meta
property="og:image"
content="https://developer.mozilla.org/mdn-social-share.png" />
<meta
property="og:description"
content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both websites
and HTML Apps." />
<meta property="og:title" content="Mozilla Developer Network" />이 코드가 하는 역할은, 여러분이 Facebook에서 MDN Web Docs 링크를 공유할 때 링크가 단순히 텍스트만 나오는 게 아니라 예쁜 이미지와 설명이 함께 나타나게 해주는 것입니다. 사용자들에게 훨씬 더 풍부한 경험을 제공하는 거죠.
💡 강사의 실무 팁: 나중에 포트폴리오를 만들고 면접관에게 링크를 전달하거나, Slack, Discord 같은 메신저에 공유할 때 이 Open Graph(
og:) 태그가 진짜 중요합니다! 이 태그를 예쁘게 달아두면 링크만 덜렁 있는 게 아니라 멋진 미리보기 이미지와 제목이 딱! 뜨기 때문에, 개발자로서의 디테일을 보여줄 수 있는 아주 좋은 포인트가 된답니다.
사이트에 커스텀 아이콘 추가하기
사이트 디자인을 한층 더 풍부하게 만들기 위해, 메타데이터에 나만의 커스텀 아이콘 참조를 추가할 수 있어요. 그러면 특정 상황에서 이 아이콘이 표시됩니다. 이 중 가장 흔하게 사용되는 것이 바로 파비콘(favicon)입니다. (브라우저의 "즐겨찾기(favorites)"나 "북마크" 목록에서 사용된다고 해서 "favorites icon"을 줄인 말이에요.)
이 소박한 파비콘은 아주 오래전부터 사용되어 왔어요. 여러 곳에서 사용되는 최초의 16픽셀 정사각형 아이콘이죠. (브라우저에 따라 다를 수 있지만) 각 열려있는 페이지의 브라우저 탭, 그리고 북마크 패널의 북마크된 페이지 이름 옆에 표시되는 것을 보셨을 겁니다.
페이지에 파비콘을 추가하는 방법은 다음과 같습니다:
- 아이콘을
.ico,.gif, 또는.png같은 지원되는 형식으로 웹사이트 폴더 구조 안 어딘가에 저장합니다. - HTML의
<head>블록 안에 이 파비콘 파일의 경로를 참조하는<link>요소를 추가합니다.
<link rel="icon" href="/favicon.ico" type="image/x-icon" />참고: 이 예제에서 파비콘 파일의 경로는
/로 시작하는데, 이는 "사이트의 최상위(또는 루트) 디렉토리에서 파일을 찾아라"라는 뜻입니다. 사이트를 만들 때 어떤 시스템을 사용하느냐에 따라 소스 코드상에서는 파일 위치가 다를 수 있어요. 웹 프레임워크들은 보통 루트에 있는 파일들을 위해static이나public이라는 특별한 폴더를 예약해 둡니다.파일 경로의 복잡한 부분에 대해서는 지금 당장 너무 걱정하지 마세요. 나중에 더 배우게 될 테니까요 (궁금하시다면 URL과 경로에 대한 빠른 안내서를 확인해 보세요).
요즘 대부분의 브라우저와 소프트웨어 애플리케이션들은 사이트 루트에 있는
favicon.ico파일을 자동으로 파비콘으로 사용하기 때문에, 굳이<link>요소를 포함하지 않는 사이트들도 많습니다. 하지만 파비콘 파일을 다른 곳에 저장하고 싶다면 명시적인 요소 추가가 여전히 필요합니다.
아래는 북마크 패널에 표시된 파비콘의 예시입니다.
맥락(디바이스)에 따라 다른 아이콘을 포함하고 싶을 수도 있어요. 예를 들어:
<link rel="icon" href="/favicon-48x48.[some hex hash].png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.[some hex hash].png" />이것은 Apple 기기의 홈 화면에 웹사이트를 저장(바로가기 추가)할 때 표시할 아이콘을 설정하는 방법이에요. 더 나아가서, 기기마다 아이콘이 예쁘게 보이도록 다양한 기기별로 서로 다른 아이콘을 제공하고 싶을 수도 있습니다. 예를 들면요:
<!-- iPad Pro with high-resolution Retina display: -->
<link
rel="apple-touch-icon"
sizes="167x167"
href="/apple-touch-icon-167x167.png" />
<!-- 3x resolution iPhone: -->
<link
rel="apple-touch-icon"
sizes="180x180"
href="/apple-touch-icon-180x180.png" />
<!-- non-Retina iPad, iPad mini, etc.: -->
<link
rel="apple-touch-icon"
sizes="152x152"
href="/apple-touch-icon-152x152.png" />
<!-- 2x resolution iPhone and other devices: -->
<link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png" />
<!-- basic favicon -->
<link rel="icon" href="/favicon.ico" />주석을 보시면 각 아이콘이 어떤 용도인지 설명되어 있죠. 웹사이트를 iPad 홈 화면에 저장할 때 사용할 고해상도 아이콘을 제공하는 등의 작업을 처리하는 요소들입니다.
지금 당장 이 모든 종류의 아이콘을 다 구현해야 한다고 걱정하지 마세요. 이건 꽤 고급 기능이라서, 코스를 진행하기 위해 이걸 모두 알아야 할 필요는 없습니다. 여기서 알려드리는 주된 이유는 나중에 다른 웹사이트의 소스 코드를 보다가 이런 것들을 발견했을 때 "아, 이게 뭐구나" 하고 아실 수 있도록 하기 위함이에요. 이 모든 값들과 선택 방법에 대해 더 깊이 배우고 싶다면 <link> 요소의 레퍼런스 문서를 읽어보세요.
💡 강사의 실무 팁: 실무에서는
RealFaviconGenerator같은 웹사이트 도구를 많이 씁니다. 로고 이미지 하나만 툭 던져주면, 모든 디바이스에 맞는 아이콘 사이즈들을 자동으로 잘라주고 저 복잡한<link>태그 코드까지 한 번에 만들어주거든요!
HTML에 CSS와 JavaScript 적용하기
오늘날 여러분이 사용하는 거의 모든 웹사이트들은 화면을 멋지게 꾸미기 위해 CSS를 사용하고, 비디오 플레이어, 지도, 게임 등 사용자와 상호작용하는 기능을 구현하기 위해 JavaScript를 사용합니다. 이것들은 각각 <link> 요소와 <script> 요소를 사용해서 웹 페이지에 적용하는 것이 가장 일반적입니다.
<link>요소는 항상 문서의 head 안에 들어가야 합니다. 이 요소는 두 가지 속성을 가지는데, 하나는 이것이 문서의 스타일시트임을 나타내는rel="stylesheet"이고, 다른 하나는 스타일시트 파일의 경로를 담고 있는href입니다.
<link rel="stylesheet" href="my-css-file.css" /><script>요소 역시 head 안에 들어가야 하며, 불러오고 싶은 JavaScript 파일의 경로를 담은src속성과, 브라우저에게 "HTML 파싱(분석)이 다 끝난 뒤에 JavaScript를 로드해라"라고 지시하는defer(불리언 속성)를 포함해야 합니다.defer속성은 아주 유용해요. 자바스크립트가 실행되기 전에 HTML이 모두 다 불러와졌다는 것을 보장해주기 때문에, 아직 페이지에 존재하지도 않는 HTML 요소에 자바스크립트가 접근하려고 해서 발생하는 에러를 막아주거든요. 페이지에 자바스크립트를 불러오는 여러 가지 방법이 있지만, 이 방법이 모던 브라우저에서 가장 안정적으로 사용할 수 있는 방법입니다.
<script src="my-js-file.js" defer></script>참고:
<script>요소는 안이 텅 빈 빈 요소(void element)처럼 생겼지만, 사실 그렇지 않기 때문에 닫는 태그(</script>)가 꼭 필요합니다. 외부 스크립트 파일을 가리키는 대신,<script>요소 안쪽에 직접 자바스크립트 코드를 작성할 수도 있어요.
💡 강사의 부연설명: 과거에는
<script>태그를<body>태그가 끝나기 직전 최하단에 배치하는 방식을 많이 썼어요. HTML 렌더링을 막지 않기 위해서였죠. 하지만 지금은 모던 브라우저의 발달로<head>영역에defer속성을 붙여서 스크립트를 비동기적으로 다운받으면서 실행만 뒤로 미루는 것이 정석이 되었습니다. 또한, 나중에 GitHub Actions 같은 CI/CD 파이프라인으로 웹사이트를 자동 배포해 보시면, 브라우저 캐싱 문제를 해결하기 위해 저 자바스크립트 파일 이름 뒤에main.a3b4c.js처럼 해시(hash) 값을 붙이게 되는데, 이 때도<script src="...">태그가 핵심적인 역할을 합니다.
여러분의 차례: 페이지에 CSS와 JavaScript 적용해 보기
- 이 실습을 시작하려면, meta-example.html, script.js, 그리고 style.css 파일의 사본을 받아서 컴퓨터의 동일한 디렉토리에 저장하세요. 파일 이름과 확장자가 올바르게 저장되었는지 확인하세요.
- HTML 파일을 브라우저와 텍스트 에디터에서 모두 엽니다.
- 위에서 제공된 정보를 따라 HTML에
<link>와<script>요소를 추가하여, CSS와 JavaScript가 여러분의 HTML에 적용되도록 만들어보세요.
제대로 하셨다면, HTML을 저장하고 브라우저를 새로고침했을 때 화면이 변한 것을 볼 수 있을 겁니다.
- JavaScript가 페이지에 빈 리스트를 추가했습니다. 이제 리스트 바깥쪽 아무 곳이나 클릭하면, 새 리스트 항목에 들어갈 텍스트를 입력하라는 팝업 창이 뜰 거예요. OK 버튼을 누르면 입력한 텍스트가 담긴 새 항목이 리스트에 추가됩니다. 기존 리스트 항목을 클릭하면 텍스트를 수정할 수 있는 팝업 창이 뜹니다.
- CSS 덕분에 배경이 초록색으로 변하고 글씨가 더 커졌습니다. 또한 JavaScript가 페이지에 추가한 콘텐츠 중 일부(빨간색 막대에 검은색 테두리가 있는 부분)도 CSS가 예쁘게 스타일링 해준 결과입니다.
참고: 이 실습에서 막혀서 CSS/JS를 적용하지 못하겠다면, 저희가 미리 완성해 둔 css-and-js.html 예제 페이지를 확인해 보세요.
문서의 기본 언어 설정하기
마지막으로, 페이지의 언어를 설정할 수 있고 (사실 설정하는 것이 권장됩니다) 이를 언급할 가치가 있습니다. 이는 여는 HTML 태그에 lang 속성(lang attribute)을 추가하여 수행할 수 있습니다. (앞서 본 meta-example.html에도 있었고, 아래 코드에서도 볼 수 있습니다.)
<html lang="en-US">
…
</html>이 설정은 여러 가지로 유용합니다. 첫째, 언어가 설정되어 있으면 검색 엔진이 HTML 문서를 훨씬 더 효과적으로 색인화(indexing)할 수 있습니다(예를 들어 특정 언어 검색 결과에 페이지가 올바르게 노출되도록 도와줍니다). 둘째, 화면 낭독기(screen readers)를 사용하는 시각 장애인들에게 매우 유용합니다. (예를 들어, "six"라는 단어는 프랑스어와 영어에 모두 존재하지만, 발음은 서로 완전히 다르거든요. 언어가 지정되어 있어야 낭독기가 올바른 억양으로 읽어줄 수 있습니다.)
또한, 문서의 일부 특정 영역만 다른 언어로 인식되도록 설정할 수도 있어요. 예를 들어, 아까 추가했던 일본어 섹션만 일본어로 인식되게 하려면 다음과 같이 할 수 있습니다:
<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>이러한 언어 코드들은 ISO 639-1 표준에 의해 정의되어 있어요. 이에 대해 더 자세히 알고 싶으시다면 HTML 및 XML의 언어 태그(Language tags in HTML and XML) 문서를 참고하세요.
