728x90
반응형
XML과 HTML, 둘 다 마크업 언어지만 목적과 특징이 조금 달라요. 차근차근 설명할게요.
1️⃣ XML = eXtensible Markup Language
- 확장 가능한 마크업 언어
- 목적: 데이터 저장과 전송을 쉽게 하기 위해 만든 표준 언어
- 특징:
1. 사용자 정의 태그 가능
<book>
<title>ChatGPT Guide</title>
<author>OpenAI</author>
</book>2. 데이터 구조 중심 → 사람이 읽을 수도 있고, 프로그램이 쉽게 파싱 가능
3. 엄격한 문법
- 모든 태그는 닫혀 있어야 함 (<tag></tag> 또는 <tag/>)
- 대소문자 구분
2️⃣ HTML = HyperText Markup Language
- 웹 페이지 문서 작성용 마크업 언어
- 목적: 웹 브라우저가 내용을 화면에 표시하도록 하기 위함
- 특징:
- 정해진 태그 세트 사용 (<div>, <p>, <a> 등)
- 시각적 표현 중심 → 브라우저 렌더링
문법이 XML보다 덜 엄격 (<img>태그 안 닫혀있어도 됨)
<p>Hello, world!</p>
<img src="image.jpg">3️⃣ XML vs HTML 비교
| 항목 | XML (eXtensible) | HTML (HyperText) |
| 목적 | 데이터 저장/전송 | 웹 페이지 표시 |
| 태그 | 사용자 정의 가능 | 표준 태그 세트만 사용 |
| 문법 | 엄격 (닫는 태그 필수) | 덜 엄격 (self-closing 허용, 일부 생략 가능) |
| 구조 | 계층적, 데이터 중심 | 문서/화면 중심 |
| 렌더링 | 브라우저 기본 렌더링 없음 | 브라우저 화면 표시 가능 |
4️⃣ AJAX와 XML의 관계
- 원래 AJAX = Asynchronous JavaScript And XML
- 초기 AJAX 예제에서는 서버와 XML 데이터 교환
- 현재는 JSON이 주로 사용되므로, “XML”이라는 이름은 역사적 유산
즉, HTML = 화면 표시용 / XML = 데이터 전송/저장용이라고 이해하면 쉽습니다.
“HyperText”는
HTTP (HyperText Transfer Protocol)와
HTML (HyperText Markup Language)에 들어간 용어라서,
웹의 핵심 개념과 연결돼 있어요.
1️⃣ HyperText = 하이퍼텍스트
- 텍스트 안에 다른 문서/리소스로 바로 이동할 수 있는 링크가 포함된 텍스트
- 쉽게 말하면 클릭하면 다른 페이지로 넘어가는 텍스트 (=웹페이지)
- 예시:
<a href="https://www.example.com">여기를 클릭하세요</a>
- 위 HTML에서 “여기를 클릭하세요”가 하이퍼텍스트, 클릭하면 다른 페이지로 이동
2️⃣ 일반 텍스트와의 차이
| 구분 | 일반 텍스트 | 하이퍼 텍스트 |
| 기능 | 그냥 글자 | 다른 문서/리소스로 이동 가능 |
| 연결 | 없음 | 링크 포함 가능 |
| 사용 | 읽기 전용 | 인터랙티브, 탐색 가능 |
3️⃣ 웹에서 HyperText의 역할
- HTML(HyperText Markup Language)
- 웹 페이지(하이퍼텍스트 문서)를 구성하는 언어
- 페이지 내 텍스트와 링크를 구조화
- HTTP(HyperText Transfer Protocol)
- 웹 페이지(하이퍼텍스트 문서)를 서버와 주고받는 규칙
즉, 하이퍼텍스트 = “링크를 포함한 텍스트”
HTML과 HTTP 이름에 들어간 이유는 웹이 문서와 문서를 링크로 연결하는 구조이기 때문이에요.
1️⃣ 일반 텍스트
- 그냥 글자와 단어의 모임
- 예:
여기를 클릭하면 예시 사이트로 이동합니다.- 특징
- 읽기 전용
- 클릭해도 다른 문서로 이동하지 않음
- 문서끼리 연결되어 있지 않음
2️⃣ 하이퍼텍스트
- 링크가 포함된 텍스트
- 예:
<a href="https://www.example.com">여기를 클릭하세요</a>- 여기서 “여기를 클릭하세요”가 하이퍼텍스트
- 클릭하면 브라우저가 https://www.example.com으로 이동
- 특징
- 문서와 문서를 연결(Link)
- 클릭하면 다른 페이지, 이미지, 파일 등으로 이동 가능
- 텍스트 자체에 행동(이동)이 내장됨
3️⃣ HTML에서 하이퍼텍스트 구조
- HTML은 하이퍼텍스트 문서를 만들기 위한 언어
- 예:
<p>오늘의 뉴스: <a href="news.html">자세히 보기</a></p>- <p>: 단락
- <a href="news.html">: 하이퍼링크 → 하이퍼텍스트
- 브라우저가 읽으면:
- “오늘의 뉴스: 자세히 보기” 화면에 표시
- “자세히 보기” 클릭하면 news.html로 이동
4️⃣ 요약
- 일반 텍스트 → 단순 글자, 문서끼리 연결 없음
- 하이퍼텍스트 → 링크 포함, 다른 문서/리소스로 이동 가능
- HTML = 하이퍼텍스트를 구조화하고, 브라우저가 해석해서 화면에 표시
HTML 안에 항상 링크가 포함되어야 하는 건 아니에요. 그럼에도 HTML이라고 부르는 이유는 역사적·개념적 정의 때문이에요.
1️⃣ HTML의 정의
- HTML = HyperText Markup Language
- 원래 목적: 문서 안에 하이퍼텍스트(링크)를 포함해 서로 연결되는 문서를 만들기 위해 설계됨
- 하지만 실제로는 문서 구조화 + 콘텐츠 표시가 더 중요한 역할을 함
2️⃣ 링크 없는 HTML도 HTML
- 예: 단순 웹 페이지, 블로그 글, 로그인 화면 등
<!DOCTYPE html>
<html>
<head><title>간단 페이지</title></head>
<body>
<h1>안녕하세요!</h1>
<p>이건 링크 없는 HTML 문서입니다.</p>
</body>
</html>- 링크(<a> 태그)가 없어도 HTML 문서로 인식
- 브라우저는 여전히 문서 구조(단락, 제목, 리스트 등)를 렌더링
- 따라서 HTML = “하이퍼텍스트를 만들기 위해 설계된 마크업 언어”라는 역사적 이름 + 현재는 “웹 문서 구조화 언어”라는 현대적 의미
3️⃣ 요약
- HTML 이름에 HyperText가 들어갔지만, 링크 포함은 필수 아님
- 현대 HTML = 웹 문서를 구조화하고 화면에 표시하는 마크업 언어
- 역사적 이유로 “HyperText Markup Language”라고 부르며, 실제로는 링크 유무와 상관없이 HTML 문서로 취급
“마크업(Markup)”이라는 개념부터 차근차근 설명할게요.
1️⃣ 마크업(Markup)이란?
- 문서 안에서 글자/데이터의 구조, 의미, 역할을 표시하는 태그/표시 방식
- 쉽게 말하면: 텍스트에 ‘이건 제목’, 이건 단락’, 이건 링크’라고 표시를 달아주는 것
예시:
<h1>오늘의 뉴스</h1>
<p>HTML과 마크업에 대해 알아봅니다.</p>- <h1> → 제목임을 표시
- <p> → 단락임을 표시
- 브라우저는 이 마크업을 읽고 화면에 제목은 크게, 단락은 줄바꿈해서 표시
2️⃣ 마크업과 일반 텍스트 차이
| 구분 | 일반 텍스트 | 마크업 |
| 구조 | 단순 글자 | 글자 + 의미/역할 표시 |
| 예시 | 오늘의 뉴스 | <h1>오늘의 뉴스</h1> |
| 용도 | 읽기 전용 | 문서 구조화, 화면 표시, 데이터 의미 부여 |
3️⃣ 마크업 언어
- 마크업(텍스트에 구조,의미,역할을 표시)을 언어화한 것 = 마크업 언어(Markup Language)
- 대표적인 예:
- HTML → 웹 문서 구조화, 화면 표시
- XML → 데이터 구조화, 전송 용이
- Markdown → 간단한 문서 마크업
4️⃣ 핵심 정리
- 마크업 = 텍스트에 구조와 의미를 표시하는 방법
- HTML = “하이퍼텍스트 문서를 만들기 위한 마크업 언어”
- XML = “데이터를 구조화하기 위한 마크업 언어”
즉, 마크업은 ‘이 텍스트가 무슨 역할을 하는지’ 표시하는 장치라고 이해하면 쉽습니다.
728x90
반응형
'네트워크2' 카테고리의 다른 글
| 정보 제공 상태 코드 :: 1xx (0) | 2025.10.08 |
|---|---|
| 서버 오류 코드 :: 5xx (0) | 2025.10.08 |
| 클라이언트 오류 코드 :: 4xx (0) | 2025.10.07 |
| 요청 성공 상태 코드 2xx (0) | 2025.10.07 |
| 네트워크 탭에서 내가 보낸 요청 확인 방법 (0) | 2025.10.07 |
| HTTP :: 요청 헤더 / 응답 헤더 (0) | 2025.10.07 |
| 쿠키(Cookie) 와 세션(Sessoion) (0) | 2025.10.07 |
| CSRF 란? :: 쿠키 종류(세션 쿠키 vs 영속 쿠키) :: 쿠키 속성 Domain, Path, SameSite, HttpOnly, Expires/Max-Age (0) | 2025.10.07 |