공부해봅시당
[CS] HTML의 Hyper Text와 Markup에 대해 쉽고 빠르게 알아보자 본문
HTML을 작성하며 HTML이 HyperText Markup Language라는 것을 들어본 경험이 있을 것이다.
여기서 HTML에 대해 익숙하게 사용하고 활용하면서도, 막상 HyperText가 뭔지 설명해보라고 하면 설명하기가 어려워서 부끄러웠다.
따라서 이번 기회에 HyperText에 대해 간략히 정리해보고자 한다.
우리나라 말이 아닌 용어를 이해할 때 가장 좋은 방법은 역시 그 용어 자체의 뜻을 이해하는 것이다.
Hyper의 의미에 대해 먼저 살펴보도록 하자.
Hyper
그리스어 접두사로 `over` 또는 `beyond`의 의미를 가지고 있다.
영어로는 `초월한`, `과도한`, `과한` 등의 의미로 사용된다.
그러니까 보통 `Hyper`가 포함된 단어들은 어떤 것의 범위를 넘어서거나, 일반적인 수준을 뛰어넘는 것을 말한다.
Hyper가 포함된 예시 단어들은 아래와 같다.
- Hyperactive (과잉활동의): 지나치게 활동적인 상태를 의미합니다. 주로 과잉활동 장애(ADHD)에서 사용된다.
- Hyperbole (과장법): 문학에서 사실을 과장하여 표현하는 수사법을 의미한다.
- Hypertension (고혈압): 정상 수준을 넘는 높은 혈압을 의미한다.
- Hyperspace (초공간): 과학 소설에서 보통 3차원의 물리적 공간을 넘어서는 고차원 공간을 의미한다.
여기서 Hyper에 대해 이해했다면, Hyper Text에 대해서도 쉽게 이해할 수 있다.
Hyper Text
`HyperText`를 직역하면 `초월 문서`로, `텍스트가 일반적인 한계를 넘어선다`는 의미를 내포한다.
그렇다면 도대체 텍스트의 일반적인 한계를 넘어선다는 것이 뭘까?
한계를 뛰어넘는다는 것
일반 텍스트와는 다르게 문장과 단어 등이 링크를 통해 서로 연결된 네트워크처럼 구성된 문서라는 것이다.
예를 들어 네이버 메인 화면에 접속했다고 가정했을때, 해당 화면에서 배너 광고를 클릭해서 다른 페이지로 접속할 수도 있고, 뉴스 기사를 클릭해서 네이버 뉴스 페이지로 넘어갈 수도 있다.
이렇게 클릭 한 번으로 원하는 페이지로 넘어갈 수 있는 건, 해당 문서가 하이퍼텍스트이기 때문이다.
하지만 우리들에게는 너무나 당연한 기술이기 때문에 왜 HyperText, 즉 초월 문서인지 잘 감이 잡히지 않을 수 있다.
따라서 책과 비교하여 살펴보도록 하자.
책 vs Hyper Text
`책`과 같은 인쇄물의 경우에는 한 페이지에서 다른 페이지로 넘어가는 과정이 선형적(일렬로 나열되어 순서가 있다는 것)으로 이루어진다.
예를 들어 1페이지에서 100페이지로 넘어가기 위해서는 1페이지와 100페이지 사이의 페이지를 거쳐야 한다.
물론 운이 좋아 100페이지를 한 번에 펼칠 수도 있겠지만, 보통은 몇 번의 시행착오를 거쳐야 하거나 순서대로 페이지를 넘기며 100페이지를 찾는다.
하지만 `하이퍼텍스트`는 그런 과정이 생략된다. 즉, 원하는 페이지로 넘어가기 위해 다른 페이지들을 거쳐야 할 필요가 없는 것이다. 마치 순간이동을 하듯 시행착오 없이 한 번에 페이지를 이동한다. 하이퍼텍스트는 이러한 특성 때문에 비선형적(정해진 순서없이 정보가 그물망처럼 연결되어 있는 것) 구조를 가지고 있다.
왜 생긴 걸까?
초기 때만 해도 텍스트는 순차적으로 접근하는 방식이었다고 한다. 책과 같은 방식이다. 예를 들어 1페이지에서 10페이지로 넘어가려고 한다면, 2~9페이지를 모두 거쳐야 하는 것이다. 따라서 원하는 페이지로 자유로운 이동이 불가능했다.
이를 개선하기 위해 생겨난 것이 하이퍼텍스트이다. 하이퍼텍스트의 등장 이후, 하나의 페이지에서 또 다른 페이지로 이동할 때는 클릭 한 번이면 가능하게 되었다.
하이퍼텍스트의 구조
하이퍼텍스트는 `노드`와 `링크`로 구성되어 있다.
`링크`는 클릭을 하면 해당 주소로 이동하는 것을 뜻한다. 즉, 연결고리 역할을 하는 것이다.
`노드`는 링크에 의해 연결된 문서(페이지), 즉 페이지를 의미한다.
아래 사진은 하이퍼텍스트를 위키백과에 검색했을 때의 결과 화면이다.
파란색 텍스트를 클릭하여 다른 페이지로 이동해 본 경험이 있을 것이고, 꽤나 익숙할 것이다.
여기서 파란색 텍스트에 삽입되어 있는 것이 해당 주소로 이동할 수 있는 링크, 현재 페이지와 링크를 통해 이동할 수 있는 페이지가 노드인 것이다.
하이퍼텍스트 작성
여기서 우리가 HTML을 사용하게 된다. HTML은 HyperText Markup Language의 준말로, 말그대로 하이퍼텍스트 작성을 위한 마크업 언어라는 것이다.
여기서 우리가 HyperText에 대해 자세히 다뤘으니 HyperText는 너무나 이해가 잘 갈 것이고, Markup은 무엇일까?
Markup이란?
일상생활을 통해 쉽게 이해해보자.
중고등학교 시절에 시험공부를 하면서 중요한 문구에 형광펜을 칠하고, 별표시를 해본 경험이 있을 것이다.
이것이 바로 Markup이다.
실제로 영어에서는 문서나 텍스트에 주석을 달거나, 강조 표시를 하거나, 수정 사항을 추가할 때 mark up이라는 표현을 쓴다.
"Please mark up this draft with your comments and suggestions."이라고 하면, `이 초안에 주석과 제안 사항을 표시해주세요`라고 말하는 것이다.
Markup Language
마크업 언어에는 HTML 뿐만 아니라 XML이나 Markdown도 있다.
각각을 간략하게 살펴보자.
HTML(HyperText Markup Language)
웹 페이지를 만들기 위해 사용되는 마크업 언어이다.
HTML은 문서의 구조와 내용을 정의한다.
<html>
<head>
<title>Example Page</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
XML (eXtensible Markup Language)
데이터를 저장하고 전달하기 위해 사용되는 마크업 언어이다.
XML은 사용자 정의 태그를 허용하여 데이터의 의미를 명확히 한다.
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
Markdown
간단하고 가독성이 높은 문서 작성에 사용되는 마크업 언어이다.
온갖 태그로 범벅된 HTML 문서 등과 달리, 읽기도 쓰기도 쉬운 문서 양식을 지향한다.
주로 README 파일, 블로그 게시물, 그리고 문서화에 사용된다.
요즘 Notion을 쓰는 사람들이 많은데, Notion은 기본적으로 간편하게 사용할 수 있는 Markdown 형식을 따른다.
# This is a heading
This is a paragraph with **bold** and *italic* text.
- Item 1
- Item 2
심심할 때, Markdown 공식문서를 읽어보길 권장한다. 재밌다.
Markdown 뿐만이 아니라 대부분은 공식문서에 설명이 잘 되어있기 때문에 공식문서를 읽어보길 추천한다.
정리
전통적인 일반 텍스트 문자와 다르게, 하이퍼텍스트는 여러 문서와 정보를 상호 연결해 훨씬 더 풍부한 정보 탐색을 가능하게 한다.
HyperText는 단순한 텍스트를 넘어 링크를 통해 다양한 문서와 자원을 연결하고, 사용자가 이를 통해 자유롭게 탐색할 수 있는 형태의 텍스트이다.
따라서 `HyperText`는 `사용자가 특정 부분을 클릭함으로써 다른 문서나 정보로 즉시 접근할 수 있는 텍스트`를 나타내고, 이는 월드 와이드 웹의 근간을 이루는 개념이 된다.
참고
https://m.blog.naver.com/hai0416/221623211571
하이퍼텍스트(Hypertext)와 URL, 뜻과 이해
하이퍼텍스트(Hypertext) 조직이나 개인이 인터넷에 개설한 홈페이지는 WWW (world wide web), 간단히 ...
blog.naver.com
https://contents.premium.naver.com/3mit/wony/contents/221228115729542wx
하이퍼텍스트에 대해 알아봅시다
안녕하세요. 워니예요 오늘은 하이퍼텍스트에 대해 알아볼게요😀 하이퍼텍스트(Hypertext)가 뭘까? 💡 일반 텍스트와 달리 문장과 단어 등이 링크를 통해 서로 연결된 네트워크처럼 구성된 문서
contents.premium.naver.com
https://zdnet.co.kr/view/?no=00000010047880
[XML 강좌] 3. Markup이란 무엇인가?
우리는 앞 절에서 Extensible이란 용어에 대해서 알아보았다. 결국 XML은 정해진 태그 외에 확장해서 태그를 선언할 수 있으므로 문서 및 데이터의 구조를 표현할 수 있다는 것이다. 그렇다면 Extensib
zdnet.co.kr
'STUDY > CS' 카테고리의 다른 글
| [CS] 인코딩과 암호화, Base64는 인코딩일까 암호화일까? (0) | 2024.05.05 |
|---|---|
| [CS] UML(Unified Modeling Language) 관계 (1) | 2024.02.14 |
| [CS] '명령형' 프로그래밍 vs '선언적' 프로그래밍 (1) | 2024.02.12 |
| [CS 기초] Groovy란? (0) | 2023.11.06 |
| [CS 기초] 고차함수 (2) | 2023.11.06 |
