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

EDITOR

CLASS

BLOG

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

새로운 형태로
담아내다.

새로운 형태의 콘텐츠

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

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

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

html

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

html

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

html

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

html

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

html

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

우리가 책이나 보고서를 읽을 때, 가장 먼저 만나는 것은 글자의 모양이 아니라 글의 질서입니다. 페이지 맨 위의 큰 문장은 제목으로 읽고, 그 아래 이어지는 문장은 설명으로 읽으며, 점으로 나뉜 줄은 중요한 내용을 정리한 목록으로 받아들입니다. 종이 위의 글은 가만히 놓여 있지만, 우리는 이미 각 문장이 맡은 역할을 알아봅니다. HTML은 이 익숙한 문서의 질서를 컴퓨터와 웹에도 전하기 위해 태어난 언어입니다.

처음의 웹은 오늘날처럼 사진과 영상, 움직이는 화면으로 가득한 공간이 아니었습니다. 서로 다른 곳에 있는 사람들이 연구 자료와 글을 쉽게 나누어 읽을 수 있는, 아주 큰 문서의 방에 가까웠습니다. HTML은 그 방 안의 글에 “이것은 제목입니다”, “이것은 한 문단입니다”, “이것은 다른 글로 가는 길입니다”라고 알려 주는 약속이었습니다. 그래서 HTML을 처음 배우는 일은 낯선 코드를 외우는 일보다, 우리가 늘 읽어 온 문서를 다른 눈으로 바라보는 일에서 시작해도 좋습니다.

1.웹이 왜 처음부터 문서를 중심으로 시작했는지 살펴봅니다.

2.HTML이 글의 모양보다 역할을 먼저 말하는 이유를 알아봅니다.

3.제목, 문단, 목록, 링크가 하나의 문서를 어떻게 이루는지 생각해 봅니다.

4.오늘의 웹에서도 HTML의 첫 약속이 중요한 까닭을 정리합니다.

웹은 거대한 문서 보관함에서 시작되었습니다

1980년대 말, 유럽입자물리연구소(CERN)에는 서로 다른 나라와 분야에서 모인 연구자들이 함께 일하고 있었습니다. 연구 자료와 메모, 프로젝트의 관계는 계속 늘어났지만, 파일은 각자의 컴퓨터와 문서 더미에 흩어져 있었습니다. 영국의 컴퓨터 과학자 팀 버너스리(Tim Berners-Lee)는 이 자료들을 서로 이어 누구나 필요한 내용을 따라갈 수 있는 정보 공간을 구상했습니다. 이것이 월드 와이드 웹, 곧 웹의 출발점입니다.

그가 만들고자 한 것은 화려한 화면이 아니라 서로 연결되는 문서였습니다. 한 문서에서 어떤 낯선 개념을 만났을 때, 그 단어를 따라 다른 문서로 건너갈 수 있다면 읽기는 훨씬 넓어집니다. 책의 각주나 참고문헌이 다음 책으로 이어지는 길이라면, 웹의 링크는 그 길을 바로 열어 주는 문이었습니다. HTML은 그 문서가 어떤 구조를 가졌는지 컴퓨터가 이해하도록 적는 방법으로 함께 만들어졌습니다.

이 출발은 지금 생각해도 아름답습니다. 웹은 처음부터 “무엇을 보여 줄까”보다 “어떻게 함께 이해할까”에 가까운 질문에서 태어났습니다. 화면의 크기와 사용자의 기기는 제각각이어도, 제목과 문단, 인용과 목록처럼 문서의 기본 질서는 서로 알아볼 수 있어야 했습니다. HTML은 모든 사람에게 같은 페이지 모양을 강요하기보다, 누구나 같은 글의 흐름을 만날 수 있게 하려는 약속이었습니다.

문서에서 시작된 웹의 생각

웹은 멀리 떨어진 사람들이 자료와 생각을 함께 읽기 위한 정보 공간에서 출발했습니다.

링크는 한 문서의 끝을 다른 문서의 시작으로 이어 주는 길입니다.

HTML은 그 안의 글이 어떤 순서와 역할을 갖는지 적어 두는 방식입니다.

처음의 웹은 화면의 화려함보다, 읽고 찾고 연결하는 경험을 더 중요하게 여겼습니다.

HTML은 글을 꾸미기 전에 글의 역할을 말합니다

문서 안에는 서로 다른 일이 있습니다. 책의 제목은 책 전체의 이름을 알리고, 장의 제목은 독자가 지금 어느 이야기에 들어왔는지 알려 줍니다. 문단은 생각을 차분히 이어 가고, 목록은 여러 항목을 한눈에 보게 하며, 인용문은 누군가의 말을 잠시 독자 앞으로 데려옵니다. 모두 글자로 이루어져 있어도, 독자가 읽는 방식은 조금씩 다릅니다.

HTML은 바로 그 차이를 기록합니다. 제목처럼 보여야 할 문장을 단순히 크게 만들기보다, “이 문장은 제목입니다”라고 알려 줍니다. 여러 문장을 줄줄이 적는 대신, “이것은 서로 관련된 항목들의 목록입니다”라고 구분합니다. 이렇게 역할을 먼저 적어 두면, 웹 브라우저는 그 문서를 읽기 좋은 화면으로 보여 줄 수 있고, 필요한 다른 도구도 글의 구조를 이해할 수 있습니다.

이 차이는 사소해 보이지만 오래 갑니다. 제목을 크게 만든 것과 제목이라고 알려 준 것은 다릅니다. 화면이 아주 작아지거나, 독자가 글자를 크게 키우거나, 화면을 읽어 주는 기능을 사용할 때에도 제목은 제목으로 남아야 합니다. HTML은 글의 겉모습보다 글이 맡은 일을 먼저 기억하는 언어이기 때문에, 바뀌는 환경 속에서도 문서의 뜻을 지킬 수 있습니다.

제목, 문단, 목록은 이미 HTML의 생각입니다

HTML을 모르는 사람도 문서를 쓰면서 이미 HTML의 생각을 사용합니다. 원고의 맨 위에 제목을 쓰고, 새로운 생각이 시작될 때 문단을 나누며, 준비물이나 핵심 내용을 정리할 때 목록을 만드는 일 말입니다. 이것은 단지 보기 좋게 배치하는 습관이 아닙니다. 독자가 글 속에서 길을 잃지 않도록 내용의 관계를 드러내는 편집입니다.

좋은 제목은 뒤에 이어질 내용을 약속합니다. 좋은 문단은 한 가지 생각에 잠시 머물게 하고, 다음 문단으로 넘어갈 이유를 만듭니다. 목록은 긴 설명 속에서 꼭 붙잡아야 할 것을 가볍게 꺼내 보여 줍니다. HTML은 이 익숙한 선택을 웹이 읽을 수 있는 형태로 바꿉니다. 사람이 원고의 구조를 생각하면, HTML은 그 구조가 화면 안에서도 살아남도록 돕습니다.

여기에서 중요한 것은 모든 문장을 특별하게 만들지 않는 일입니다. 제목은 제목일 때 힘이 있고, 본문은 충분히 이어질 때 의미가 생깁니다. 강조해야 할 말과 차분히 설명해야 할 말을 구분하는 순간, 문서는 읽기 쉬워집니다. HTML의 문법은 복잡한 장식의 규칙이라기보다, 글의 목소리에 높낮이를 주는 문서 편집의 약속에 가깝습니다.

문서가 읽히는 기본 구조

제목은 독자에게 지금 읽는 글의 주제와 위치를 알려 줍니다.

문단은 하나의 생각이 숨을 고르고 다음 생각으로 이어지게 합니다.

목록은 여러 내용을 같은 무게로 묶어 빠르게 살피게 합니다.

인용과 링크는 내 글 바깥의 목소리와 자료를 문서 안으로 연결합니다.

링크가 생기자 문서는 길이 되었습니다

HTML이라는 이름에는 ‘하이퍼텍스트(HyperText)’라는 말이 들어 있습니다. 하이퍼텍스트는 정해진 순서로만 읽는 글을 넘어, 독자가 필요한 곳으로 건너갈 수 있게 연결된 글을 뜻합니다. 종이책도 목차와 각주, 색인을 통해 독자에게 길을 내어 주지만, 웹의 링크는 그 길을 누르는 순간 바로 다음 문서로 이어 줍니다.

그래서 링크는 단지 파란 글자나 밑줄이 아닙니다. 어떤 설명을 더 깊이 읽을 수 있게 하고, 원래의 출처를 확인하게 하며, 서로 다른 사람의 생각을 하나의 대화 안에 놓습니다. 한 편의 글이 혼자 완성되는 대신, 다른 글과 자료를 정직하게 가리키며 더 넓은 맥락을 갖게 됩니다. 웹이 지금처럼 거대한 지식의 그물이 될 수 있었던 데에는 이 단순한 연결의 힘이 있습니다.

다만 좋은 링크는 독자를 마구 끌고 가는 장치가 아닙니다. 지금 읽고 있는 문장을 더 잘 이해하게 하는 곳으로 이어질 때 비로소 길이 됩니다. 문서가 자기 중심을 잃지 않은 채 다른 문서와 만날 수 있도록, HTML은 글의 구조와 함께 연결의 방향도 남겨 둡니다. 웹을 읽는다는 것은 때로 한 문서를 끝까지 읽는 일이 아니라, 좋은 길을 따라 생각을 넓혀 가는 일이기도 합니다.

오늘의 웹이 복잡해져도 HTML은 문서입니다

오늘날 웹에는 온라인 상점, 지도, 영상 서비스, 게임, 인공지능 도구처럼 처음의 연구 문서와는 아주 멀어 보이는 것들이 많습니다. 화면은 풍부해졌고, 웹에서 할 수 있는 일도 셀 수 없이 늘어났습니다. 그러나 그 안에도 여전히 제목, 안내문, 설명, 버튼의 이름, 이미지의 뜻처럼 누군가에게 전달되어야 할 문서의 언어가 있습니다.

특히 한 사람이 글자를 키워 읽거나, 화면을 보지 않고 기기가 읽어 주는 내용을 들을 때 HTML의 역할은 더 선명해집니다. 무엇이 제목이고 무엇이 본문인지, 어떤 부분이 목록이고 어디에 다음 행동으로 가는 길이 있는지 알 수 있어야 모든 사람이 같은 내용을 자기 방식으로 만날 수 있습니다. HTML은 웹을 보기 좋게 만드는 바탕이면서, 웹을 이해할 수 있게 만드는 바탕이기도 합니다.

그래서 HTML을 배우는 첫걸음은 많은 문법을 외우는 데 있지 않습니다. 먼저 내가 만든 문서를 펼쳐 보고, 이 문장이 어떤 역할을 하는지 묻는 데 있습니다. 이것은 제목인가, 설명인가, 목록인가, 다른 곳으로 이어지는 길인가. 이 질문이 분명해질수록 HTML은 낯선 기술 언어가 아니라, 글을 더 멀리 정확하게 건네는 문서의 언어로 다가옵니다.

HTML은 문서가 자기 뜻을 잃지 않게 합니다

HTML은 인터넷이 막 태어나던 시절, 흩어진 지식과 사람을 연결하기 위해 만들어졌습니다. 그때의 핵심은 지금도 크게 달라지지 않았습니다. 한 문서 안에서 무엇이 중요한지 드러내고, 다른 문서로 이어질 길을 만들며, 서로 다른 환경의 독자에게 같은 뜻을 전하는 일입니다.

우리는 글을 쓸 때 이미 제목을 고르고 문단을 나누며, 독자가 따라올 수 있는 순서를 만듭니다. HTML은 그 선택을 웹이 이해할 수 있도록 조용히 옮겨 적습니다. 그러니 HTML은 글 바깥에 있는 차가운 기술이라기보다, 문서가 화면을 건너도 자기 역할과 뜻을 잃지 않게 하는 언어일지도 모릅니다.

이 글의 핵심

HTML은 서로 연결된 문서를 만들기 위해 웹과 함께 태어난 문서의 언어입니다.

HTML은 글자의 모양보다 제목, 문단, 목록처럼 글이 맡은 역할을 먼저 알려 줍니다.

링크는 문서를 다른 자료와 생각으로 이어, 웹을 읽을 수 있는 길로 만듭니다.

웹이 복잡해진 오늘에도 HTML은 다양한 사람이 내용을 이해하고 이용하게 하는 바탕입니다.

목록으로

저작권 고시

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

HOME

FAQ

이용 약관

개인정보 이용방침

help@opkle.app
010-2747-3403

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

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

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

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