Opkle(옵클) - 창작자를 위한 앱과 시스템

EDITOR

CLASS

BLOG

표현한다는 것의무한한 가능성,

새로운 형태로
담아내다.

새로운 형태의 콘텐츠

Opkle은 코드 없이 웹을 마음껏 만들고, 누구나 자기 화면을 그릴 수 있도록 에디터를 만들고, 그 결과물을 어디서나 즐길 수 있게 돕는 팀입니다.

텍스트와 화면과의 조화를 통해, 웹을 짓는다는 것이 그저 단순한 코딩이 아닌, 상상을 펼치고 감각을 깨우는 과정이 될 수 있도록 좋은 도구를 만들어 냅니다.

HTML은 어떻게 문서의 언어가 되었을까

html

HTML의 기본 문법, 글에 역할을 붙이는 법

html

HTML 속성, 글과 요소에 이름을 붙이는 법

html

HTML, head, body: 웹문서의 세 공간

html

head 태그 안에는 무엇이 들어갈까

html

5 head 태그 안에는 무엇이 들어갈까

head는 눈에 보이지 않는 자리라서, 처음 HTML을 배우는 사람에게는 빈 방처럼 느껴지기 쉽습니다. 하지만 실제로 head는 빈 방이 아닙니다. 브라우저 탭에 어떤 이름을 보여 줄지, 한글과 이모지를 어떻게 읽을지, 휴대전화에서 화면을 어떤 폭으로 계산할지, 문서의 꾸밈 규칙과 움직임을 어디에서 가져올지 같은 중요한 약속이 이곳에 모입니다. head는 본문을 숨겨 두는 곳이 아니라, body가 올바르게 읽히고 움직이도록 문서를 준비하는 조종실입니다.

head 안에는 아무 태그나 넣지 않습니다. 제목·문단·사진처럼 독자에게 직접 보여 줄 내용은 body에 두고, 문서 전체를 소개하거나 다른 자료와 연결하거나 브라우저에 미리 알려 줄 정보만 head에 둡니다. 이 글에서는 초보자가 실제 HTML 문서에서 가장 자주 만나는 `title`, `meta`, `link`, `style`, `script`, `base`를 차례로 살펴봅니다. 각각은 짧은 태그이지만, 페이지가 밖에서 어떻게 발견되고 안에서 어떻게 준비되는지를 크게 바꿉니다.

예시에 보이는 `〈〉`는 설명을 위해 실제 HTML의 꺾쇠 괄호 모양을 닮게 적은 것입니다. 지금은 한 글자도 외우려 애쓰지 않아도 좋습니다. ‘무엇을 알려 주는 태그인가’, ‘그 정보는 누가 사용하는가’를 먼저 이해하면 문법은 훨씬 자연스럽게 따라옵니다.

1.head에 넣는 정보와 body에 넣는 내용을 다시 구분해 봅니다.

2.문서의 이름과 기본 설정을 맡는 `title`, `meta`를 알아봅니다.

3.다른 파일을 불러오거나 연결하는 `link`, `style`, `script`의 역할을 살펴봅니다.

4.자주 쓰지는 않지만 주소의 기준을 바꾸는 `base`까지 이해합니다.

head는 문서의 안내 카드가 모이는 곳입니다

책을 독자에게 건네기 전에 표지 제목, 저자 이름, 책을 소개하는 짧은 문장, 인쇄 방식과 분류 정보가 필요합니다. 이 정보들은 소설의 본문은 아니지만, 책을 찾고 펼치고 제대로 읽게 하는 데 꼭 필요합니다. head도 같은 일을 합니다. 브라우저와 검색 서비스, 화면을 읽어 주는 도구가 웹문서를 만나기 전에 참고할 안내 카드들을 모아 둡니다.

그래서 head 안에는 보통 화면에 보일 문장을 넣지 않습니다. `〈h1〉오늘의 전시〈/h1〉` 같은 제목이나 사진, 버튼은 body의 몫입니다. 대신 ‘이 문서의 공식 이름은 무엇인가’, ‘글자와 기호를 어떤 방식으로 읽어야 하는가’, ‘이 문서의 색과 글꼴 규칙은 어느 파일에 있는가’를 알려 주는 태그가 들어갑니다. head는 문서를 설명하고 준비하지만, body처럼 독자와 직접 대화하지는 않습니다.

HTML 표준에서 head는 문서에 관한 정보, 곧 메타데이터의 모음으로 정의됩니다. 일반적인 웹문서에는 title이 하나 있어야 하며, base는 많아도 하나만 둘 수 있습니다. 하지만 초보자가 처음부터 모든 가능한 태그를 다 넣을 필요는 없습니다. 필요한 정보를 정확하게 넣는 짧고 맑은 head가, 이유 없이 긴 head보다 훨씬 좋습니다.

가장 자주 만나는 head 태그

`title`: 브라우저와 독자에게 문서의 이름을 알려 줍니다.

`meta`: 문자, 화면, 문서 소개처럼 기본 정보를 적습니다.

`link`: 꾸밈 규칙, 아이콘처럼 바깥의 자료와 문서를 연결합니다.

`style`: 이 문서 안에만 적용할 짧은 꾸밈 규칙을 적습니다.

`script`: 페이지가 해야 할 동작을 담은 자바스크립트를 연결하거나 적습니다.

`base`: 상대적인 주소를 읽을 공통 기준을 정합니다. 자주 쓰지는 않습니다.

`title`은 페이지의 공식 이름입니다

`title`은 head에서 가장 먼저 친해져야 할 태그입니다. `〈title〉봄날의 독립출판 수업 | Opkle〈/title〉`처럼 문서의 이름을 적으면, 이 말은 보통 브라우저 탭, 방문 기록, 즐겨찾기, 검색 결과처럼 페이지가 본문 밖에서 불릴 때 쓰입니다. 독자가 탭을 여러 개 열어 두었을 때 지금 어느 페이지를 보고 있는지 알아보게 하는 이름표이기도 합니다.

title은 body의 큰 제목인 `h1`과 닮았지만, 같은 일을 하지는 않습니다. body의 h1은 이미 페이지에 들어온 독자에게 글의 주제를 보여 줍니다. 반면 title은 검색 결과나 즐겨찾기처럼 문서가 홀로 떨어져 있을 때도 ‘이 페이지가 무엇인지’를 알아볼 수 있게 해야 합니다. 그래서 h1이 ‘HTML의 기초’처럼 짧아도, title은 ‘HTML의 기초: 태그와 속성 쉽게 이해하기 | Opkle’처럼 맥락을 조금 더 보태는 경우가 많습니다.

한 문서에는 보통 title을 하나만 둡니다. 서로 다른 이름표를 여러 개 붙이면 브라우저와 독자가 어느 것을 대표 이름으로 받아들여야 할지 모호해집니다. 또한 title은 화면 본문에 나타나는 문장이 아니므로, body에도 독자가 실제로 읽을 제목을 따로 마련하는 편이 좋습니다. 두 제목은 같은 문서를 가리키되, 각각 다른 자리에서 다른 독자를 돕습니다.

`meta`는 문서의 작은 설명과 기본 설정을 담습니다

`meta`는 하나의 역할만 하는 태그가 아니라, 여러 종류의 문서 정보를 담을 수 있는 작은 메모 카드입니다. 어떤 메모인지에 따라 속성의 이름과 내용이 달라집니다. 그래서 처음 meta를 보면 비슷해 보이는 줄이 많아 헷갈리지만, 각각이 답하는 질문을 나누면 쉽게 읽을 수 있습니다.

먼저 `〈meta charset="UTF-8"〉`는 이 문서의 문자와 기호를 어떻게 읽을지 알려 줍니다. UTF-8은 한글, 영어, 이모지처럼 다양한 문자를 함께 표현하는 데 널리 쓰이는 약속입니다. 이 정보가 알맞게 적혀 있으면 ‘안녕하세요’가 깨진 기호로 보이는 일을 줄일 수 있습니다. 페이지에서 글자가 바르게 보이는 아주 기본적인 준비입니다.

`〈meta name="viewport" content="width=device-width, initial-scale=1"〉`는 휴대전화 화면을 대하는 방법을 알려 줍니다. 낯선 단어가 많아 보이지만 뜻은 단순합니다. ‘페이지의 너비를 지금 이 기기의 화면 너비에 맞춰 계산하고, 처음 확대 정도를 자연스럽게 시작해 주세요’라는 요청입니다. 컴퓨터에서만 만든 페이지가 작은 화면에서 지나치게 작게 보이지 않도록 돕는 메모라고 생각하면 됩니다.

`〈meta name="description" content="HTML 기초 문법을 처음부터 쉽게 설명합니다."〉`는 문서 소개 한 줄을 적는 자리입니다. 검색 서비스나 공유 서비스가 이 설명을 참고할 수 있지만, 언제나 그대로 보여 준다고 약속하는 것은 아닙니다. 그래도 페이지의 내용을 짧고 정직하게 요약해 두면, 사람과 도구가 문서를 이해하는 데 좋은 출발점이 됩니다.

이 밖에도 검색 서비스에 페이지를 어떻게 다루면 좋을지 알려 주는 meta, 제작자를 밝히는 meta 등이 있습니다. 그러나 먼저 기억할 것은 세 가지입니다. charset은 글자를 제대로 읽게 하는 설정, viewport는 화면에 맞춰 보이게 하는 설정, description은 문서를 소개하는 문장입니다.

meta 예시를 질문으로 읽기

`charset="UTF-8"`: 이 문자의 모양과 기호를 어떤 약속으로 읽을까요?

`name="viewport"`: 휴대전화 화면을 어떤 기준으로 계산할까요?

`name="description"`: 이 문서를 바깥에서 짧게 소개한다면 무엇이라고 말할까요?

`content="…"`: 바로 앞의 질문에 넣는 구체적인 답입니다.

`link`는 문서와 바깥 자료를 연결합니다

`link`는 독자가 눌러 이동하는 body의 링크와 이름은 같지만, 하는 일은 다릅니다. head의 link는 문서를 다른 파일이나 자원과 조용히 연결합니다. 가장 흔한 예는 `〈link rel="stylesheet" href="style.css"〉`입니다. `rel`은 이 연결이 어떤 관계인지 말하고, `href`는 연결할 파일의 주소를 알려 줍니다. 이 문장은 ‘style.css는 이 문서의 모습을 정하는 꾸밈 규칙입니다. 그 파일을 가져와 적용해 주세요’라는 뜻입니다.

link를 쓰면 여러 페이지가 하나의 꾸밈 규칙 파일을 함께 사용할 수 있습니다. 책의 각 장이 같은 편집 원칙을 따르듯, 여러 HTML 문서가 같은 글꼴과 여백, 색 규칙을 나눠 쓸 수 있는 것입니다. 규칙을 바꾸고 싶을 때도 연결된 파일 하나를 고치면 여러 페이지에 변화가 반영되므로, 문서를 오래 관리할수록 편리합니다.

link는 사이트의 작은 아이콘을 연결할 때도 사용합니다. `〈link rel="icon" href="favicon.png"〉`는 브라우저 탭이나 즐겨찾기에서 보이는 사이트 아이콘의 위치를 알려 줍니다. 또한 같은 내용이 여러 주소에 있을 때 대표 주소를 알려 주는 `rel="canonical"` 같은 연결도 있습니다. 지금은 `rel`이 ‘어떤 관계인가’, `href`가 ‘어디에 있는가’를 말한다는 점만 잡아 두면 충분합니다.

`style`은 이 문서 안에 적는 작은 꾸밈 규칙입니다

`style`은 문서의 색, 글꼴, 여백처럼 보이는 모습을 정하는 CSS 규칙을 head 안에 직접 적는 자리입니다. 예를 들어 한 페이지에만 필요한 아주 짧은 꾸밈을 넣을 때 사용할 수 있습니다. link가 ‘밖에 있는 꾸밈 규칙 노트’를 가져오는 일이라면, style은 ‘이 문서의 준비실 안에 꾸밈 메모를 직접 적어 두는 일’에 가깝습니다.

둘 중 어느 하나가 무조건 더 낫다는 뜻은 아닙니다. 한 페이지에서만 잠시 필요한 규칙이라면 style이 간단할 수 있고, 여러 페이지가 함께 쓸 규칙이라면 link로 별도 파일을 연결하는 편이 정돈됩니다. 처음에는 style 안의 자세한 CSS 문법보다, HTML이 문서의 구조를 말하고 CSS가 그 구조의 모습을 정한다는 역할 분담을 기억하면 좋습니다.

style 안의 규칙은 화면에 적용되지만, style 태그 안의 글이 독자에게 문단처럼 보이지는 않습니다. 이는 head가 하는 일을 잘 보여 줍니다. 준비실에서 정한 조명과 여백은 거실의 분위기를 바꾸지만, 조명 설계도가 거실 벽에 문장으로 붙지는 않는 것과 같습니다.

`script`는 페이지가 해야 할 동작을 준비합니다

HTML이 문서의 구조를 만들고 CSS가 그 모습을 정한다면, 자바스크립트는 페이지가 반응하고 움직이게 하는 역할을 맡습니다. `script`는 그 자바스크립트를 문서에 연결하거나 직접 적는 태그입니다. 예를 들어 메뉴를 눌렀을 때 열리고 닫히게 하거나, 입력한 내용을 확인하고, 화면의 일부를 새 정보로 바꾸는 동작에 쓰입니다.

head 안에서 자주 보이는 모습은 `〈script src="app.js" defer〉〈/script〉`입니다. `src`는 동작을 담은 파일의 위치이고, `defer`는 브라우저에게 ‘body의 문서를 먼저 읽은 뒤 이 파일을 실행해도 됩니다’라고 알려 주는 말입니다. 이 약속이 있으면 브라우저가 본문을 읽는 흐름을 불필요하게 멈추지 않도록 도울 수 있습니다. 처음에는 script를 직접 많이 쓰기보다, 이 태그가 문서에 행동을 더하는 통로라는 점을 이해하면 충분합니다.

script는 head에 둘 수 있지만, head에서만 쓰는 태그는 아닙니다. 페이지의 작업 순서와 필요한 시점에 따라 body의 끝부분에 두기도 합니다. 중요한 것은 script 안의 내용도 제목이나 문단처럼 독자가 읽을 본문이 아니라는 점입니다. 브라우저가 실행할 지시를 준비하는 정보이기 때문에, 화면에는 보이지 않아도 페이지의 경험에 큰 영향을 줄 수 있습니다.

`base`는 모든 상대 주소의 출발점을 정합니다

`base`는 초보자가 당장 자주 쓸 태그는 아니지만, head에서 가끔 만나면 의미를 알아두면 좋은 태그입니다. 문서 안에 `images/cover.jpg`나 `about.html`처럼 전체 주소가 아닌 짧은 주소를 여러 번 적을 때, 그 주소들을 어느 곳을 기준으로 읽을지 정합니다. `〈base href="https://example.com/books/"〉`라고 두면, 이후의 짧은 주소들은 이 주소를 출발점으로 삼아 해석됩니다.

이는 같은 동네의 여러 장소를 말할 때 매번 도시 이름부터 쓰지 않는 것과 비슷합니다. 모두 ‘이 동네 안의 길’이라는 공통 기준을 먼저 정해 두면, 뒤의 주소를 짧게 쓸 수 있습니다. 다만 base 하나가 링크, 이미지, 스타일 파일처럼 많은 주소의 해석에 영향을 줄 수 있으므로, 처음부터 습관처럼 넣을 필요는 없습니다. 여러 파일의 기준 주소를 꼭 통일해야 할 때만 신중하게 사용하는 편이 좋습니다.

한 문서에는 base를 하나만 둘 수 있고, 보통 주소를 참조하는 다른 태그보다 앞쪽에 둡니다. 여러 기준 주소를 섞어 두면 독자에게 길을 안내하는 표지판이 서로 다른 방향을 가리키는 것과 같아집니다. base를 배우는 핵심은 문법을 많이 쓰는 데 있지 않고, 짧은 주소도 언제나 어떤 기준 주소에서 출발한다는 사실을 이해하는 데 있습니다.

좋은 head는 필요한 정보를 정확하게 준비합니다

head 태그 안에는 더 많은 특수한 경우와 도구별 설정이 들어갈 수 있습니다. 하지만 기본적인 웹문서라면 title로 이름을 정하고, meta로 문자와 화면·소개 정보를 밝히며, link로 공통 꾸밈 규칙을 연결하는 것만으로도 단단한 출발을 만들 수 있습니다. style과 script는 필요한 만큼만 더하고, base는 주소의 기준을 꼭 바꿔야 할 때만 꺼내면 됩니다.

head의 태그들은 body처럼 눈에 띄지 않습니다. 그러나 페이지의 제목이 브라우저 탭에서 읽히고, 한글이 깨지지 않고, 휴대전화에서 내용이 알맞게 보이며, 같은 사이트의 페이지가 일정한 모습으로 이어지는 데에는 이 보이지 않는 준비가 있습니다. head는 페이지 뒤편에 숨은 복잡한 기술이 아니라, 독자가 본문을 더 잘 만나게 하기 위해 먼저 적어 두는 문서의 약속입니다.

이 글의 핵심

head에는 본문 대신 문서의 이름, 설정, 연결 정보를 넣습니다.

`title`은 탭·즐겨찾기·검색 등에서 문서를 부르는 공식 이름입니다.

`meta`는 문자·휴대전화 화면·문서 소개처럼 기본 정보를 담습니다.

`link`와 `style`은 페이지의 모습을 준비하고, `script`는 페이지의 동작을 준비합니다.

`base`는 짧은 주소들의 공통 출발점을 정하는 드물지만 강한 태그입니다.

목록으로

저작권 고시

본 웹사이트의 모든 디자인 결과물 및 영상에 대한 저작권은 Abstract Cloud에 있으며, 저작권법 및 관련 법령에 의해 보호받습니다. 웹, 영상, 본문, 표지, 내지 디자인을 포함한 모든 콘텐츠는 저작권자의 자산으로, 사전 동의 없이 무단 복제, 배포, 2차 저작물 제작, 온라인 공유 등을 금지합니다. 이를 위반할 시, 저작권법에 따라 민형사상 책임을 질 수 있습니다. 정당한 구매와 저작권 보호는 창작자의 권리를 지키며, 더 나은 작품으로 보답할 힘이 됩니다.

HOME

FAQ

이용 약관

개인정보 이용방침

help@opkle.app
010-2747-3403

상호 :추상적 형상 디자인(Abstract cloud) | 대표자 :배창규

사업자등록번호 :249-74-00533

통신판매업 신고번호 :2025-의정부송산-0634

주소 :경기도 의정부시 부용로 49, 108동 402호