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

EDITOR

CLASS

BLOG

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

새로운 형태로
담아내다.

새로운 형태의 콘텐츠

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

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

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

html

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

html

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

html

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

html

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

html

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

웹페이지를 처음 만들 때 가장 헷갈리는 질문 가운데 하나는 이것입니다. “head에도 글을 적는데, 왜 화면에는 body만 보일까?” 분명 문서 안에는 `html`, `head`, `body`라는 세 태그가 함께 있는데, 브라우저가 펼쳐 보이는 것은 body 안의 제목과 문장, 사진과 버튼입니다. 이 차이는 오류도 아니고, head가 쓸모없다는 뜻도 아닙니다. 웹문서는 읽는 내용과, 그 내용을 제대로 준비하고 소개하는 정보를 일부러 다른 자리에 나누어 둡니다.

한 권의 책을 생각해 보면 이해가 쉽습니다. 독자가 실제로 읽는 소설과 에세이는 책의 본문입니다. 그러나 책이 독자에게 오기 전에는 제목, 저자, 출판사, ISBN, 판형처럼 책을 찾고 분류하며 올바르게 만들기 위한 정보가 필요합니다. HTML 문서도 닮았습니다. `body`는 독자가 페이지에서 직접 만나는 본문이고, `head`는 브라우저·검색 서비스·다른 도구가 문서를 이해하고 준비하는 정보가 머무는 자리입니다. 그리고 `html`은 이 둘을 모두 감싸 한 편의 웹문서로 묶는 가장 바깥의 표지입니다.

처음에는 이 구분이 번거롭게 느껴질 수 있습니다. 하지만 문서의 내용과 문서에 대한 정보를 나누어 두면, 화면은 더 읽기 쉬워지고 브라우저는 더 정확하게 움직입니다. 누군가가 작은 휴대전화에서 읽든, 검색을 통해 글을 찾든, 화면을 읽어 주는 기능을 사용하든, 웹페이지가 무엇을 말하는지와 어떻게 보여야 하는지를 각각 알 수 있게 됩니다.

1.`html` 태그가 문서 전체를 감싸는 이유를 알아봅니다.

2.`head`에 들어가는 정보가 화면 밖에서 어떤 일을 하는지 살펴봅니다.

3.`body`가 독자에게 보이는 내용의 자리인 까닭을 이해합니다.

4.세 태그가 함께 있을 때 웹문서가 어떻게 한 편의 완성된 페이지가 되는지 정리합니다.

`html`은 문서 전체를 감싸는 가장 바깥의 표지입니다

`html` 태그는 웹문서 전체가 시작되고 끝나는 경계를 알려 줍니다. 책으로 치면 앞표지부터 뒤표지까지, 혹은 집으로 치면 모든 방을 감싸는 건물의 외벽과 비슷합니다. head와 body는 서로 다른 일을 하지만, 둘 다 하나의 html 문서 안에 들어 있어야 브라우저가 “이것은 한 편의 완성된 웹페이지입니다”라고 이해할 수 있습니다.

아주 단순한 구조를 말로 그리면 이렇습니다. `〈html〉`이 먼저 문서를 열고, 그 안에 `〈head〉`와 `〈body〉`가 차례로 놓입니다. head에는 문서를 준비하는 정보가, body에는 독자가 읽고 누르는 내용이 들어갑니다. 마지막에는 `〈/html〉`이 문서 전체를 닫습니다. HTML의 여는 태그와 닫는 태그가 책갈피처럼 한 덩어리의 시작과 끝을 알려 준다는 앞선 약속이, 여기에서도 그대로 이어집니다.

html 태그에는 이 문서가 주로 어떤 언어로 쓰였는지도 알려 줄 수 있습니다. 한국어 페이지라면 `lang="ko"`처럼 적어 두는 일이 그렇습니다. 화면을 읽어 주는 기능이나 번역 도구는 이 정보를 참고해 문서를 더 자연스럽게 다룰 수 있습니다. 독자가 이 속성을 직접 보지는 않지만, 문서가 어떤 언어로 말을 거는지 조용히 밝혀 두는 중요한 소개말이 됩니다.

`html`은 화면에 커다란 상자처럼 보이지 않습니다. 그러나 head와 body가 제자리를 갖도록 하는 가장 큰 경계입니다. 이것이 없다면 문서 안의 정보와 본문이 어디에 속하는지 흐려집니다. 웹페이지를 만든다는 것은 body에 글을 채우는 일에서 시작하지만, 그 글이 하나의 문서임을 선언하는 일은 html이 맡습니다.

`html`이 하는 일

`html`은 head와 body를 함께 감싸 한 편의 웹문서로 묶습니다.

문서의 맨 처음과 맨 끝을 알려 주는 가장 바깥의 경계입니다.

문서의 주된 언어처럼, 페이지 전체에 관한 정보를 적을 수도 있습니다.

직접 화면에 나타나지는 않지만 모든 내용이 들어갈 자리를 만들어 줍니다.

`head`는 페이지를 준비하고 소개하는 보이지 않는 자리입니다

head라는 이름 때문에 ‘머리말이니 화면의 맨 위에 보이겠지’라고 생각하기 쉽습니다. 하지만 HTML에서 head는 화면 위쪽에 놓이는 제목 영역이 아닙니다. head는 웹페이지를 보여 주기 전에 브라우저가 먼저 읽는 문서의 안내 카드에 가깝습니다. 독자가 페이지 본문에서 직접 읽지는 않지만, 브라우저와 검색 서비스는 head 안의 정보를 참고해 이 페이지를 어떻게 다룰지 결정합니다.

가장 익숙한 예는 페이지 제목입니다. head 안에 적는 title은 보통 브라우저 탭의 이름, 창의 제목, 즐겨찾기 이름으로 쓰입니다. 이 제목은 body 안의 큰 제목과 같은 말일 수도 있지만, 같은 자리에 나타나는 것은 아닙니다. body의 제목은 페이지를 펼친 독자에게 보이고, head의 title은 브라우저가 여러 페이지를 구분하도록 돕습니다. 책 표지의 제목과 책 안쪽 첫 장의 제목이 서로 다른 자리에서 같은 책을 소개하는 모습과 닮았습니다.

head에는 페이지를 짧게 소개하는 설명도 들어갈 수 있습니다. 검색 결과나 공유 미리보기에서 어떤 문장으로 이 글을 소개할지, 문자와 기호를 어떤 방식으로 읽을지 같은 정보가 여기에 놓입니다. 또 문서의 글꼴·색·여백을 정하는 별도의 꾸밈 규칙을 연결하거나, 페이지가 휴대전화 화면에 맞게 보이도록 알려 주는 정보도 head에 들어갑니다. 이런 정보는 body의 문장처럼 보이지 않지만, body를 더 올바르고 편안하게 읽게 만드는 준비입니다.

head가 보이지 않는다고 해서 아무 일도 하지 않는 것은 아닙니다. 오히려 무대의 조명과 음향을 미리 확인하는 스태프처럼, 독자가 본문을 만나기 전에 페이지가 필요한 모습과 정보를 갖추게 합니다. 사진이 화면에 나오지 않거나 글자가 깨져 보일 때, 원인은 body의 글이 아니라 head에 빠진 준비 정보일 수도 있습니다. 그래서 head는 숨겨진 본문이 아니라, 본문이 제대로 읽히도록 뒤에서 일하는 문서의 준비실입니다.

head에서 자주 만나는 정보

브라우저 탭과 즐겨찾기 등에 쓰이는 페이지 제목

검색과 공유할 때 문서를 소개하는 짧은 설명

글꼴, 색, 여백처럼 페이지의 모습을 정하는 규칙과의 연결

휴대전화와 다양한 화면에서 문서를 알맞게 보여 주기 위한 안내

문자와 기호를 올바르게 읽도록 돕는 문서의 기본 설정

head는 보이지 않지만 화면 바깥에서 만납니다

‘보이지 않는다’는 말은 head의 정보가 세상 어디에도 나타나지 않는다는 뜻은 아닙니다. 다만 페이지의 본문 영역에 글이나 사진처럼 놓이지 않는다는 뜻입니다. 페이지 제목은 브라우저 탭에서 보일 수 있고, 문서 소개는 검색 결과나 메신저의 공유 카드에서 보일 수 있습니다. 화면의 모습에 관한 정보는 독자가 결과로 느끼지만, 그 정보 자체가 문장으로 본문에 출력되지는 않습니다.

이 구분은 처음에는 조금 낯섭니다. 예를 들어 책의 뒷표지에 적힌 소개글은 책을 고르는 데 도움을 주지만, 소설의 첫 문단과 같은 자리에 있지는 않습니다. 도서관의 분류 번호도 독자가 책을 찾게 하지만 이야기 속 문장은 아닙니다. head의 정보도 마찬가지입니다. 페이지를 찾고, 이름 붙이고, 알맞은 환경에서 열게 하지만 body의 독서 흐름을 차지하지는 않습니다.

그래서 body에 들어가야 할 제목과 설명을 head에 넣으면, 브라우저는 그것을 본문으로 펼쳐 보여 주지 않습니다. 반대로 head에서 맡아야 할 제목이나 문서 소개를 body에만 적어 두면, 페이지 안에서는 읽을 수 있어도 브라우저 탭이나 검색 서비스가 참고할 정보를 놓칠 수 있습니다. 둘 가운데 어느 쪽이 더 중요하다기보다, 같은 문서를 서로 다른 방식으로 전달하기 위해 두 자리가 함께 필요합니다.

`body`는 독자가 실제로 읽고 만나는 본문입니다

body는 웹페이지를 열었을 때 독자가 직접 보는 자리입니다. 제목, 문단, 목록, 사진, 영상, 링크, 버튼처럼 읽고 누르고 살펴보는 요소들이 body 안에 들어갑니다. 눈으로 페이지를 읽는 사람에게도, 화면을 읽어 주는 기능으로 내용을 듣는 사람에게도, body는 문서의 중심 내용이 시작되는 곳입니다.

body가 눈에 보이는 이유는 브라우저가 웹문서를 보여 줄 때 이곳을 ‘독자에게 펼칠 내용’으로 약속했기 때문입니다. 브라우저는 head를 읽어 문서를 준비한 뒤, body 안의 요소를 화면에 배치합니다. body에 제목을 넣으면 제목으로, 문단을 넣으면 문단으로, 이미지를 넣으면 이미지로 보여 줍니다. 우리가 HTML을 배우며 가장 자주 쓰게 될 태그 대부분도 body 안에서 만납니다.

그렇다고 body가 단순히 화면에 보이는 것을 마구 모아 두는 상자는 아닙니다. 좋은 body는 문서의 흐름을 갖습니다. 먼저 이 페이지가 무엇에 관한 글인지 제목으로 알리고, 문단으로 내용을 풀며, 필요한 곳에 이미지와 링크를 놓습니다. 독자는 그 순서를 따라 읽고, 기기도 그 구조를 따라 내용을 전달합니다. head가 문서의 소개와 준비라면, body는 독자와 실제로 대화하는 자리입니다.

body 안에 들어가는 것들

페이지 안에서 읽는 제목, 문단, 목록, 인용문

독자에게 보여 주는 사진, 영상, 그림 설명

다른 글과 자료로 이동하게 하는 링크와 버튼

사용자가 내용을 입력하거나 선택하는 칸처럼 직접 만지는 요소

세 공간을 나누면 한 편의 웹문서가 완성됩니다

웹문서는 body 하나만으로도 얼핏 보이는 내용을 만들 수 있습니다. 그러나 내용을 담는 곳, 그 내용을 소개하고 준비하는 곳, 둘을 하나의 문서로 감싸는 곳이 나뉘어 있을 때 비로소 다른 사람과 도구가 문서를 더 정확하게 이해할 수 있습니다. `html`은 문서 전체의 집이고, `head`는 집의 주소와 안내문, `body`는 손님을 맞아 실제 이야기를 나누는 거실과 같습니다.

이 비유에서 head가 보이지 않는 까닭도 자연스럽게 드러납니다. 집의 주소와 설계도, 전기와 조명에 관한 정보가 거실 한가운데 붙어 있으면 오히려 대화가 방해받습니다. 그렇다고 그 정보가 없다면 손님은 집을 찾기 어렵고, 집은 편안하게 기능하기 어렵습니다. body만 눈에 보이는 것은 head가 덜 중요해서가 아니라, 각자가 더 잘하는 일을 맡도록 문서가 자리를 나누었기 때문입니다.

앞으로 HTML 문서를 볼 때에는 세 가지를 차례로 떠올리면 됩니다. 이 문서 전체는 어떤 언어로 누구에게 말을 거는가, 브라우저가 먼저 알아야 할 정보는 무엇인가, 그리고 독자가 실제로 읽고 행동할 내용은 무엇인가. 이 질문에 답하며 html, head, body를 구분하면 웹문서의 첫 구조가 훨씬 선명해집니다.

이 글의 핵심

`html`은 head와 body를 감싸 한 편의 웹문서로 만드는 가장 바깥의 태그입니다.

`head`는 제목, 문서 소개, 화면 준비 정보처럼 페이지 밖에서 쓰일 내용을 담습니다.

head의 정보는 본문에 직접 출력되지 않지만 브라우저 탭, 검색, 화면의 모습에 영향을 줄 수 있습니다.

`body`는 제목·글·사진·링크처럼 독자가 페이지에서 실제로 읽고 만나는 내용을 담습니다.

목록으로

저작권 고시

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

HOME

FAQ

이용 약관

개인정보 이용방침

help@opkle.app
010-2747-3403

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

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

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

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