https://www.youtube.com/watch?v=BIkN-JAeC2U

description: |-

1. 이건 꼭 알아야 한다[^1]

[? 질문] HTML에서 HT(HyperText)는 무엇을 의미하며, 왜 Markup과 함께 이해해야 하는가[^2]
[= 답] HTML은 HyperText Markup Language로, **ML(Markup Language)**이 “태그로 문서의 특정 영역을 감싸 의미를 부여하는 것”이라면, **HT(HyperText)**는 “문서 안의 특정 텍스트가 다른 문서(또는 다른 내용)로 연결될 수 있도록 만드는 특별한 마크업(링크)을 뜻한다”고 설명한다.[^2]

[? 질문] 하이퍼텍스트는 일반 텍스트/일반 마크업과 무엇이 다른가[^6]
[= 답] 일반 마크업이 주로 “문서 편집/구조화(의미 부여)”를 위한 것이라면, 하이퍼텍스트는 텍스트(단어/문장)에 “다른 문서로 이동해 더 자세한 내용을 볼 수 있는 연결성”을 부여한다.[^6]

[? 질문] HTML에서 하이퍼텍스트(하이퍼링크)는 어떤 태그/속성으로 구현되는가[^10]
[= 답] 특정 텍스트를 **a 태그(anchor)**로 감싸고, 그 a 태그에 “어디로 연결되는지”를 나타내는 **주소(URI/URL)**를 속성으로 지정함으로써 하이퍼텍스트(하이퍼링크)를 만든다.[^10]

2. 큰 그림[^4]

이 강의는 HTML의 구성 요소 중 **HyperText(하이퍼텍스트)**가 정확히 무엇인지, 그리고 문서의 텍스트를 다른 문서/리소스로 연결하는 방식이 HTML에서 어떻게 구현되는지를 설명한다.[^4] 지난 시간에 다룬 Markup(마크업) 개념 위에, HTML 이름의 앞부분인 HT가 의미하는 바를 추가로 해설하는 흐름이다.[^2]

• HTML은 Markup + HyperText로 이해해야 한다: ML만 알면 태그로 의미를 붙이는 것까진 이해되지만, 웹의 핵심 특성인 “문서 간 연결”을 이해하려면 HT(하이퍼텍스트)를 함께 알아야 한다.[^2]
• 하이퍼텍스트는 ‘연결을 부여한 텍스트’: 문서 안의 어떤 단어(예: “뉴렉처”)를 클릭하면 관련 정보를 가진 다른 문서로 이동하도록 만들어, 더 자세한 설명을 찾아볼 수 있게 한다.[^6]
• a 태그 + 주소 지정이 하이퍼링크를 만든다: 텍스트를 a 태그로 감싸고 연결 대상 주소를 지정하면, 브라우저에서 밑줄/색상 변화 등 기본 링크 스타일과 함께 클릭 이동이 가능해진다.[^20]

3. 하나씩 살펴보기[^3]

3.1 지난 시간의 전제: Markup을 알아야 하는 이유[^5]

강의자는 도입에서 지난 시간에 **마크업(Markup)**을 다뤘다는 점을 상기시키면서, 오늘은 그와 함께 알아야 할 개념으로 **하이퍼텍스트(HyperText)**를 다룬다고 말한다.[^2] HTML이라는 이름 자체가 두 덩어리로 나뉘는데, 뒤의 ML은 Markup Language를 의미하고, 앞의 HT가 바로 HyperText를 의미한다는 구조를 먼저 짚는다.[^2]

또한 강의자는 “하이퍼텍스트는 이미 알고 있는 내용일 수도 있고, 지난 시간 흐름(맥락)에서 이어지는 만큼 특별히 길게 설명할 필요는 없을 수 있다”고 말하며, 이번 강의는 간단하고 빠르게 넘어가겠다고 예고한다.[^3]

• Markup의 핵심 복습(강의 흐름상 전제)
  마크업은 “태그(tag)를 이용해 문서의 특정 부분(특정 분량/구간)을 감싸서 의미를 부여하는 도구”라는 점을 다시 언급한다.[^5] 즉, 텍스트 그 자체에 어떤 의미/역할(제목, 문단, 강조 등)을 부여할 수 있는 기반이 바로 마크업이다.[^5]

[!NOTE] 오늘 강의의 위치(학습 흐름) 강의자는 “지난 시간에 마크업을 했고, 이번 시간은 HTML의 또 다른 축인 하이퍼텍스트를 짧게 연결해 이해시키는 단계”라고 분위기를 잡는다.[^3]

3.2 하이퍼텍스트가 필요한 상황: ‘이 단어가 뭐지?’에서 출발[^7]

강의자는 문서 안에서 어떤 단어를 보았을 때, 사용자가 추가 정보를 알고 싶어지는 상황을 예로 든다.[^6] 예를 들어 문서 내에서 “뉴렉처”라는 글자를 봤다고 가정한다.[^6] 사용자는 그 단어를 보고 다음과 같은 궁금증을 가질 수 있다:

• “뉴렉처가 뭐지?”[^6]
• “사이트 주제(성격)가 뭔가?”[^6]
• “어떤 내용을 다루는 곳인가? 더 공부할 수 있나?”[^6]

이런 상황에서 사용자는 “그 단어를 더 자세히 설명하는 페이지”로 바로 이동할 수 있으면 편리하다.[^6] 여기서 강의자는, 이런 ‘추가 정보로의 이동’을 가능하게 하는 마크업이 일반적인 문서 편집용 마크업과는 다른 목적을 갖는다고 강조한다.[^6]

[? 질문] 문서 편집용 마크업과 하이퍼텍스트 마크업의 차이는 무엇인가[^6]
[= 답] 문서 편집용 마크업은 텍스트에 구조/의미를 부여하는 데 초점이 있지만, 하이퍼텍스트 마크업은 “어떤 단어를 클릭하면 관련된 다른 페이지(문서)로 이동해 더 자세히 알 수 있도록 연결하는 것”에 초점이 있다.[^6]

3.3 ‘다른 문서를 가리키는 텍스트’—하이퍼텍스트의 정체[^8]

강의자는 위 예시(“뉴렉처”라는 단어)를 단순 텍스트로 두지 않고, “더 자세히 알 수 있도록 한 페이지를 연결하는 마크”로 만들 수 있다고 말한다.[^6] 즉 특정 단어/문장을 “다른 문서, 다른 텍스트의 다른 내용을 가리키는 녀석”으로 만드는 것이다.[^8]

그리고 이렇게 “텍스트를 마크업하면서 ‘얘는 하이퍼텍스트입니다’라고 특별한 힘(기능)을 갖게 하는 태그”가 있다고 말한다.[^8] 여기서 말하는 태그가 곧 a 태그로 이어진다.[^10]

중요한 포인트는 다음과 같다:

• 하이퍼텍스트는 “텍스트”이지만, 단지 읽는 대상이 아니라 다른 문서로 연결되는 포인터 역할을 한다.[^8]
• 그래서 하이퍼텍스트는 보통 “클릭하면 이동”이라는 사용자 경험으로 나타난다.[^20]

3.4 a 태그와 ‘anchor(앵커)’ 비유: 정박(정착)시키는 버튼[^9]

강의자는 하이퍼텍스트를 구현하는 대표 요소로 a 태그를 소개하면서, a가 anchor를 뜻한다고 설명한다.[^9] 여기서 앵커(anchor)를 이해시키기 위해 “배(선박) 정박”의 비유를 사용한다.[^9]

• 앵커는 배가 한 곳에 정박할 때 “닻을 내리는” 도구다.[^9]
• a 태그(anchor)는 다른 문서에 “정박하기 위한 버튼, 닻을 내린 것 같은 효과”를 주는 마크업이라고 설명한다.[^9]

즉, 문서 A에서 어떤 텍스트에 a 태그를 걸면, 그 텍스트는 문서 B(또는 특정 리소스)로 사용자를 데려다주는 “정박 지점/버튼”이 된다.[^9]

[!TIP] 비유로 기억하는 a 태그 a(anchor)는 “저쪽 문서로 건너가 정박하게 해주는 닻”이라는 비유로 이해하면, ‘링크’의 감각을 빠르게 잡을 수 있다고 강의 흐름이 시사한다.[^9]

3.5 ‘Hyper’의 의미 풀이: ‘건너편/저 건너’의 텍스트[^11]

강의자는 “그렇다면 하이퍼텍스트의 의미는 무엇일까?”라는 질문을 던지고, 단어를 쪼개어 설명한다.[^9]

• Text는 그대로 “텍스트”다.[^11]
• Hyper는 어원적으로(강의자 설명에 따르면 이탈리아어라고 언급) 영어로는 “over” 또는 “beyond”에 가까운 의미, 즉 “저 건너/건너편”의 의미를 갖는다고 말한다.[^11]

따라서 “하이퍼텍스트”는 강의 맥락에서 이렇게 정리된다:

• “저 건너(다른 곳)에 있는 텍스트/내용을 가리키는 텍스트”[^11]
• “현재 문서의 단어를 통해, 다른 문서의 내용을 이어(연결해) 볼 수 있게 의미를 부여한 텍스트”[^11]

이때 그 연결을 부여하는 마크업이 a 태그라는 점을 다시 확인한다.[^11]

3.6 링크가 되려면 ‘주소’가 있어야 한다: a 태그의 주소 지정[^12]

강의자는 “저 건너(다른 문서)로 연결하려면 최소한 그 대상이 어디인지, 즉 주소를 써야 한다”고 말한다.[^10] 즉, a 태그는 단지 감싸는 것만으로 끝나지 않고 “연결 대상”을 나타내는 정보가 반드시 필요하다는 논리다.[^10]

여기서 강의자는 a 태그에 “정박용 주소(하이퍼텍스트로서의 주소)”가 기록된다고 설명한다.[^10] 그리고 그 주소는 보통 “특정 문서를 가리키는 URL/URI” 형태로 적게 된다고 말한다.[^10]

• 텍스트를 a 태그로 감싼다 → 그 텍스트는 링크 후보가 된다.[^10]
• a 태그에 주소를 적는다 → 그 텍스트는 **확실한 하이퍼텍스트(링크)**가 된다.[^10]

또한 강의자는 이렇게 “다른 곳으로 링크하기 때문에” 하이퍼텍스트를 **하이퍼링크(Hyperlink)**라고 부르기도 한다고 덧붙인다.[^10]

3.7 하이퍼링크의 탄생 배경(목적): 과학자들이 쉽게 관련 문서를 찾도록[^13]

강의자는 하이퍼링크의 “탄생 배경은 전개해야겠지만(여기서 길게 하진 않지만)”이라고 전제한 뒤, 목적을 짚는다.[^10]

• 과학자들이 관련 내용을 쉽게 찾고 살펴볼 수 있도록 하는 목적에서 만들어졌다고 말한다.[^10]
• 브라우저/윈도우 환경에서 마우스 클릭으로 쉽게 문서를 열어볼 수 있게 하려는 흐름을 언급한다.[^10]

이 부분은 “왜 웹이 링크 중심으로 설계됐는가”에 대한 역사적/목적적 힌트를 제공한다.[^10]

3.8 문서 예시로 다시 확인: 클릭하면 ‘대한민국…’ 정보로 이어지게 만들 수 있다[^14]

강의자는 실제 문서 내에서 “기존 텍스트는 같지만, 하이퍼텍스트가 존재하면 그 텍스트를 클릭해 관련 정보를 찾아볼 수 있다”는 식으로 설명한다.[^13]

즉, 문서 안에 “대한민국…” 같은 키워드가 있을 때, 그 키워드를 링크로 만들어 두면 사용자가 클릭하여 관련 정보 페이지를 열람할 수 있다.[^13]

• 문서의 본문 텍스트는 그대로 둔다.[^13]
• 특정 키워드에 하이퍼텍스트를 부여한다.[^13]
• 클릭 시 관련 문서로 이동한다.[^13]

이로써 하이퍼텍스트의 기능이 “문서의 내용(서술) + 문서 간 항해(탐색)”를 결합하는 것임을 보여준다.[^13]

3.9 실습 예고: 말로만 하지 말고 간단히 하이퍼링크를 만들어보기[^15]

강의자는 “말로만 하지 말고” 간단한 실습을 통해 하이퍼링크를 알아보겠다고 한다.[^13] 그리고 지난 시간에 다뤘던 문서(컨텐츠)에서 “뉴렉처” 같은 텍스트를 하이퍼텍스트로 바꿔보자고 제안한다.[^13]

즉, 이 실습은:

• 기존 문서에 존재하는 특정 텍스트를 골라[^13]
• a 태그로 감싸고[^16]
• 연결 URL을 넣어[^17]
• 브라우저에서 결과를 확인하는 흐름으로 전개된다.[^19]

3.10 실습 1: 텍스트를 a 태그로 감싸기[^16]

강의자는 하이퍼텍스트로 바꾸기 위해 “a 라고 한 태그로 감싼다”고 직접 말한다.[^13] 즉, 특정 단어를 선택하여 <a> ... </a> 형태로 감싸는 작업이 핵심이다.[^16]

이때 강의 흐름에서 강조되는 점은:

• “감싼다”는 행위 자체가 마크업이며[^5]
• a 태그로 감싸는 마크업은 “연결”이라는 특수 목적을 갖는다는 것이다.[^6]

3.11 실습 2: 링크 목적지 URL(주소) 쓰기 — 전체 주소 vs 같은 서버의 리소스[^17]

강의자는 a 태그를 적용한 다음, 그 안(정확히는 a 태그의 속성)에 “관련 문서에 대한 URL을 쓰게 된다”고 설명한다.[^16] 또한 주소를 쓰는 방식에 대해 두 가지 가능성을 말한다.[^16]

1. 서버 주소명까지 포함해 모두 쓰는 방식

• “서버 주소명까지 같이 써도 된다”고 말한다.[^16]

2. 현재와 같은 서버/같은 홈 디렉터리에 있는 리소스면 리소스명(페이지명)만 쓰는 방식

• “서버 주소가 아니라 현재 같은 서버, 같은 홈 디렉터리에 있다면 리소스의 이름만 써줘도 된다”고 설명한다.[^16]
• 그리고 “리소스명까지, 페이지명까지 써주면 된다”고 재차 말한다.[^16]

강의자는 또한 환경에 따라 “리소스를 취할 수 있도록 하는 정보까지 써줄 수도 있다”는 취지로 말하면서, 결국 핵심은 “브라우저가 이동할 수 있는 대상(문서/리소스)을 특정하는 정보”를 제공하는 것임을 강조한다.[^16]

[!IMPORTANT] 링크가 링크가 되기 위한 최소 조건 a 태그로 감싸는 것만으로 끝나지 않고, “어디로 갈지”를 나타내는 주소 정보가 필요하다는 점을 강의가 반복해서 상기시킨다.[^10]

3.12 저장 후 브라우저로 확인: 링크의 기본 스타일(밑줄/색상 변화)[^19]

강의자는 코드를 저장하고, 브라우저에서 더블 클릭 등으로 열어 결과를 확인한다.[^19] 이때 “전과 다른 것은 밑줄이 그어졌다”는 점을 관찰한다.[^19]

그리고 이 밑줄이:

• 어떤 스타일 태그로 ‘언더라인’을 준 것이 아니라[^19]
• a 태그가 갖고 있는 기본 스타일로 나타난 결과라고 설명한다.[^19]

또한 링크 텍스트의 색상에 대해서도 언급한다:

• a 태그로 감싸면 기본적으로 파란색으로 보일 수 있고[^19]
• “방문했던 곳”이라면 약간 다른 색(방문 링크 색)으로 바뀌는 것을 말한다.[^19]

즉, 브라우저는 하이퍼링크를 사용자에게 인지시키기 위해 기본 스타일(밑줄, 기본 링크 색상, 방문 후 색상)을 제공한다는 점을 실습 결과로 확인시킨다.[^19]

+++ 상세 예시: 강의에서 관찰한 UI 변화의 포인트

• 링크가 되면 텍스트에 밑줄이 생긴다.[^19]
• 링크는 보통 파란색으로 표시된다.[^19]
• 한 번 클릭해 방문한 링크는 색상이 변화할 수 있다(방문 링크 처리).[^19]
  +++

3.13 클릭으로 문서 열기: 하이퍼텍스트가 제공하는 ‘쉬운 탐색’[^21]

강의자는 이제 링크 텍스트를 “클릭”해 보겠다고 말하고, 클릭 한 번으로 연결된 문서를 쉽게 열어볼 수 있음을 보여준다.[^19]

여기서 강의자가 강조하는 느낌(반응)은 다음과 같다:

• 연결된 하이퍼텍스트를 통해 문서를 “쉽게 열어볼 수 있게 된다”고 말한다.[^19]
• 그리고 “대단하죠”라고 하며, 하이퍼텍스트의 직관성과 편의성을 강조한다.[^19]

이 부분은 하이퍼텍스트의 본질적 가치를 “문서 간 이동의 비용을 극도로 낮춘 것(클릭 한 번)”으로 체감시키는 대목이다.[^19]

3.14 마무리: 이미 아는 사람/처음 보는 사람, 그리고 이후 학습 안내[^22]

강의자는 하이퍼텍스트 개념이 이미 익숙한 사람에게는 재미가 없을 수 있지만, 처음 보는 사람에겐 신기하고 새롭게 보일 수 있다고 말한다.[^21]

또한 전체 강좌의 학습 흐름에 대한 안내도 덧붙인다:

• 지금은 쉬운 내용처럼 느껴질 수 있지만[^21]
• 뒤로 갈수록 모르는 내용이 나오고, “*만한 얘기”(맥락상 ‘할 만한/볼 만한/쓸 만한’ 이야기로 이해되는 표현)가 나온다고 하며[^21]
• 너무 가볍게 보지 말고 차근차근 따라오면 재미있는 무엇(결과물/웹페이지)을 만들 수 있을 것이라고 독려한다.[^21]

마지막으로 수고 인사와 함께 다음 시간 예고(다음 주에 뵙겠다는 말)로 끝맺는다.[^22]

4. 핵심 통찰[^23]

1. [h HTML의 정체는 ‘문서 의미 부여(Markup)’와 ‘문서 연결(HyperText)’의 결합이다.] 이를 분리해 이해하면 HTML의 이름 자체(HT + ML)가 가리키는 목적을 구조적으로 파악할 수 있다.[^2]
2. [h 하이퍼텍스트는 사용자의 ‘추가로 알고 싶다’는 욕구를 즉시 이동으로 바꿔준다.] 문서 내 단어 하나를 “관련 문서로 가는 관문”으로 바꾸는 것이 핵심 가치다.[^6]
3. [h a 태그(anchor) 비유는 링크의 역할을 직관적으로 설명한다.] ‘닻’(anchor) 비유를 통해 링크는 단순 장식이 아니라 “정박/이동의 지점”임을 이해하게 한다.[^9]
4. [m 링크는 태그만으로 완성되지 않고, 반드시 ‘주소’가 결합돼야 한다.] “어디로 이동할지”가 지정되어야 하이퍼텍스트가 실질적으로 성립한다는 점을 반복해 강조한다.[^10]
5. [m 브라우저의 기본 링크 스타일(밑줄/색)은 ‘이 텍스트는 이동 가능하다’는 신호다.] CSS를 쓰지 않아도 a 태그만으로 링크로서의 시각적 affordance가 제공됨을 실습으로 확인한다.[^19]

• 실행 관점 시사점(강의가 유도하는 행동)
  • 문서에서 “설명이 더 필요한 단어/개념”을 발견하면, a 태그로 감싸 “참조 문서”로 연결하는 습관을 들일 수 있다.[^6]
  • 같은 사이트 내부 문서라면 전체 도메인을 매번 쓰기보다, 같은 서버/경로 기준으로 리소스명을 적는 방식도 가능하다는 점을 염두에 둔다.[^16]

5. 헷갈리는 용어 정리 (해당 시에만)[^24]

HyperText(하이퍼텍스트): 문서 안의 텍스트가 “저 건너(다른 문서/다른 내용)”를 가리키도록 연결 의미를 부여한 텍스트. 클릭을 통해 다른 문서로 이동하게 한다.[^11]
Markup(마크업): 태그를 이용해 문서의 특정 구간을 감싸 의미를 부여하는 방식(도구/기술).[^^5]
a 태그: 하이퍼텍스트를 만들 때 쓰는 태그. anchor(앵커)라는 의미로 설명되며, 다른 문서로 ‘정박’하게 하는 버튼/닻 비유로 소개된다.[^9]
Anchor(앵커): 배가 정박할 때 닻을 내리는 것에 비유해, 링크가 다른 문서로 이동/정착하게 해주는 지점이라는 의미로 설명된다.[^9]
URL/주소(URI로 이해 가능): a 태그가 가리키는 연결 대상 문서/리소스의 위치 정보. 링크가 성립하려면 목적지 주소가 필요하다.[^10]

---

참고(콘텐츠 정보)[^25]

• 제목: 프론트엔드, 백엔드 개발자를 위한 HTML, CSS 강의 07강 - HyperText 란?[^25]
• 채널: 뉴렉처[^25]
• 길이: 6분 57초[^25]
• 링크: https://www.youtube.com/watch?v=BIkN-JAeC2U[^25]

---

각주[^1]

[^1]: @[00:02] "안녕하세요" / 강의 시작 인사 및 도입. [^2]: @[00:08] "영어와 함께 알아봐야 될 것이 바로 하이퍼텍스트... html... 그다음에 앞에 ht 는 하이퍼텍스트..."
[^3]: @[00:25] "특별하게 뭐 설명을 할 필요가 없을 수도... 간단하게 빠르게... 넘 하도록"
[^4]: @[00:37] "이번 시간에 다룰 ... 하이퍼텍스트" 및 강의 목표 소개 흐름.
[^5]: @[00:50] "마크업... 태그를 이용해서 특정 분량을 감싸... 의미를 부여"
[^6]: @[01:15] "문서 내에서 ... '뉴렉처' ... 뭐지 ... 공부할 수도... 다른 마크업 ... 연결"
[^7]: @[01:24] "사이트 주제... 공부"로 이어지는 호기심 유발 예시.
[^8]: @[01:48] "다른 문서... 가리키고 있는... 하이퍼텍스트 입니다"
[^9]: @[02:06] "a... 앵커... 정박... 닻" 비유 설명.
[^10]: @[03:06] "주소... a... 하이퍼텍스트로서의 주소... 링크... 하이퍼링크"
[^11]: @[02:32] "하이퍼... over 또는 beyond... 저 건너" 의미 풀이.
[^12]: @[03:15] "대상의 속성... 특정 문서 가리키는" 주소 기록 설명 대목.
[^13]: @[03:40] "탄생 배경... 과학자들이... 쉽게... 브라우저... 클릭" 및 문서 내 링크 활용 설명.
[^14]: @[04:01] "문서 내... 하이퍼텍스트 존재... 클릭하면 ... 정보를 찾아볼 수"
[^15]: @[04:17] "말로만 하지 말고... 하이퍼링크 ... 알아보는 시간"
[^16]: @[04:32] "a ... 태그 ... url ... 서버주소 ... 리소스명"
[^17]: @[05:06] "같은 서버... 홈... 리소스의 이름만... 페이지 명까지"
[^18]: @[05:18] "리소스를 취할 수 있도록 하는 정보까지" 언급.
[^19]: @[05:40] "더블 클릭... 밑줄... a 태그 기본 스타일... 파란색... 방문했던 곳 ... 색깔" 및 클릭 확인.
[^20]: @[06:14] "내용을 클릭" 링크 동작 시연.
[^21]: @[06:26] "대단하죠... 처음 보시는 분... 신기" 및 학습자 반응/안내.
[^22]: @[06:55] "수고 많으셨구요... 다음주에" 마무리 멘트.
[^23]: 전체 강의에서 반복/강조된 논지(HT/ML, 연결, 주소 필요, 기본 스타일) 종합 근거로 상기 구간들 참조.[^2][^6][^10][^19]
[^24]: 용어 정의는 강의에서 직접 풀이한 표현(앵커 비유, hyper 의미, 마크업 정의)을 근거로 정리.[^5][^9][^11]
[^25]: 사용자 제공 메타데이터(제목/채널/길이/링크).