용어정리 [용어] 마크업 (Markup)
페이지 정보
조회 54회
본문
[용어] 마크업 (Markup)
1. 정의 (Definition)
마크업(Markup)이란 텍스트 문서에 특별한 기호나 태그를 삽입하여 문서의 구조(Structure)와 의미(Semantics)를 정의하는 시스템을 말합니다.
이는 데이터가 화면에 출력되는 방식(Presentation)이 아닌, 데이터가 무엇인지(Meaning)를 컴퓨터에 전달하는 역할을 합니다.
2. 어원 (Etymology)
원고의 교정이나 편집을 위해 종이의 여백에 남기던 표시(Marking up) 행위에서 유래되었습니다.
디지털 환경에서는 이를 코드화하여 브라우저나 시스템이 문서를 해석하는 규약으로 정착되었습니다.
3. 주요 구성 요소
마크업 언어는 크게 세 가지 구성 요소로 이루어집니다.
태그 (Tag): 요소를 정의하는 기호로, 주로
< >괄호를 사용합니다. (예:<h1>,<p>)요소 (Element): 시작 태그와 종료 태그, 그리고 그 사이의 콘텐츠를 포함한 전체 단위입니다.
속성 (Attribute): 요소에 추가적인 정보나 설정값을 부여하는 지시어입니다. (예:
<img src="path">)
4. 핵심 개념: 시맨틱 마크업 (Semantic Markup)
HTML5의 핵심 가치로, 태그 자체가 특정한 의미를 내포하고 있는 방식입니다. 단순히 구역을 나누는 것을 넘어 정보의 성격에 맞는 태그를 사용하는 것을 원칙으로 합니다.
주요 태그 | 용도 및 의미 |
<header> | 문서나 섹션의 도입부, 로고, 내비게이션 그룹 |
<nav> | 문서의 핵심적인 탐색 링크(내비게이션) 영역 |
<main> | 문서 본문의 주요 콘텐츠가 시작되는 단일 구역 |
<section> | 문서 내의 독립적이고 주제별로 구분된 일반 구역 |
<article> | 뉴스 기사, 포스트 등 그 자체로 독립적인 배포가 가능한 콘텐츠 |
<footer> | 문서나 섹션의 말미, 저작권, 연락처 정보 등 |
5. 마크업의 가치와 목적
정보의 구조화: 방대한 데이터를 계층적이고 논리적인 구조로 정렬합니다.
상호운용성: 서로 다른 기기나 브라우저에서 동일한 정보를 일관되게 해석하도록 합니다.
검색 엔진 최적화(SEO): 검색 엔진 로봇이 사이트의 정보를 효율적으로 수집하고 분석할 수 있게 합니다.
웹 접근성: 보조 공학 기기(스크린 리더 등)를 사용하는 사용자에게 정확한 정보 위계를 전달합니다.
최종 요약
마크업(Markup)은 웹 표준 언어인 HTML을 통해 문서의 논리적 뼈대를 구축하는 행위입니다.
현대 웹 개발에서는 마크업을 통해 정보의 구조(Structure)를 먼저 설계하고,
이후 CSS를 통해 시각적 레이아웃(Layout)을 구현하는 '관심사의 분리'를 지향합니다.
- 이전글[용어] 아티클(Article) 26.02.27
- 다음글[용어] 뷰포트(Viewport) 26.02.27