마크업 언어
최근 수정 시각:
분류
|
| ||||||||||||||||||||||
실제 책을 하나의 프로그램이라고 생각해보자. 사람이 책에 볼펜으로 밑줄을 긋거나 볼펜으로 필기를 하는 행위는 마크업의 일종이라고 할 수 있다. 또는 그래픽 디자이너들한테 '책 표지는 배경을 무지개 그라데이션으로 넣어주시고 제목은 중앙에 검은색 굴림체로 크게 박아주세요' 라고 말하는 것 또한 자연어 기반 마크업 언어라고 할 수 있다.[1]
실제로 이러한 표현이 딱 맞는 것이, 예를들어 우리가 워드프로세서를 처음 열면 기본 서식(지정된 서식 없음)인 상태에서 딸깍 클릭하여 폰트를 바꾸거나, 굵게 만들거나, 크게 키우는 등의 행위가 모두 마크업 언어(서식)로 문서가 작성되는 과정이라 할 수 있겠다. 이러한 워드프로세서 파일도 모두 사실은 XML 등의 소스 형태로 모두 저장되어 있다가 문서를 열면 렌더링 과정을 거쳐 실제 결과물에 가까운 미리보기 형태로 그려내어 사용자에게 전달하며, 이를 통해 전공자라거나, 굳이 코딩 등을 하지 않더라도 그래픽 및 GUI 기반으로 쉽게 문서 작성등을 할 수 있게 된다.
실제로 이러한 표현이 딱 맞는 것이, 예를들어 우리가 워드프로세서를 처음 열면 기본 서식(지정된 서식 없음)인 상태에서 딸깍 클릭하여 폰트를 바꾸거나, 굵게 만들거나, 크게 키우는 등의 행위가 모두 마크업 언어(서식)로 문서가 작성되는 과정이라 할 수 있겠다. 이러한 워드프로세서 파일도 모두 사실은 XML 등의 소스 형태로 모두 저장되어 있다가 문서를 열면 렌더링 과정을 거쳐 실제 결과물에 가까운 미리보기 형태로 그려내어 사용자에게 전달하며, 이를 통해 전공자라거나, 굳이 코딩 등을 하지 않더라도 그래픽 및 GUI 기반으로 쉽게 문서 작성등을 할 수 있게 된다.
여러분이 가꾸어 나가는 지식의 나무 나무위키 |
↓ |
“나무위키 부분을 굵게 그리고 밑줄 쫙 해주세요” |
↓ |
여러분이 가꾸어 나가는 지식의 나무 나무위키 |
실제 결과물 (미리보기) |
여러분이 가꾸어 나가는 지식의 나무 __'''나무위키'''__ |
실제 내용 (소스) |
여러분이 가꾸어 나가는 지식의 나무 <u><strong>나무위키</strong></u> |
실제 내용 (HTML)[2] |
이는 인터넷 상 글쓰기 에디터(커뮤니티 게시판 글쓰기 등에서 보는 그것)에도 적용되어 널리 보편화되었다.
만약 책에 프로그래밍 언어를 적용할 수 있다면 책을 펴는 날짜에 따라 내용이 달라지거나, 편 사람이 누군지에 따라서 다른 내용을 보여줄 수 있어야 한다. 하지만 현실에선 당연히 그게 불가능하다. 쉽게 말하면 마크업 언어는 현실의 아날로그적인 기록매체와 유사한 역할을 한다고 볼 수 있다. 일단 한번 작성하면 누가 언제 보든 동일한 모습을 보여준다는 점이 같다.
우리가 흔히 웹사이트에서 볼 수 있는 상호작용적인 요소는 대부분 프로그래밍 언어(JavaScript, ActiveX 같은)가 조합된 웹사이트다. 일반적인 마크업 언어만으로는 이러한 기능을 구현하는 것이 불가능하다.[3]
보다 컴퓨터 상의 실제 사례를 보자면, 우선 한컴오피스 한글에서 수식 입력기를 들 수 있다. 한글의 수식입력기에서는 마우스로 기호를 하나하나 찾아 골라서 클릭을 하는 식으로도 수식 입력을 할 수 있지만, 수식이 나타나는 화면의 아래창에 몇가지 명령어들을 규칙에 맞춰 직접 타이핑하며 마우스를 사용하지 않고도 여러 가지 수식들을 입력할 수도 있다. 이때 사용되는 명령어들도 한컴오피스 한글 문서에서 수식 문자가 화면에 표시되는 모양과 형식을 결정하는 마크업 언어에 해당된다.[4]
위키를 작성하는 것 또한 마크업 언어를 활용하는 대표적인 사례다. 위키를 작성하기 위해선 하이퍼링크를 넣거나, 표를 그리기 위해 여러 기호들을 사용하고 이를 통해 문서를 깔끔하게 작성할 수 있다. 위키 내에 통용되는 문법을 기초로 마크업을 한 것이다. 물론 위키에서 일부 매크로 문법을 지원하기 때문에 보는 시점에 따라 다른 내용을 보여주는 경우도 있지만 이러한 일부 예외를 제외하면 프로그래밍적 요소는 없다.
문서의 형태를 표현하기 위한 마크업.
대표적인 예로 HTML의 style 태그를 들 수 있다. 워드패드나 워드 프로세서에서 단순하게는 제목 앞에 몇 칸의 공백을 넣는 등의 행위에서부터 폰트의 변경, 굵게, 크기, 밑줄 등 서식 지정, 표 집어넣기 등 워드에서 일어나는 행위의 일체가 모두 표현적 마크업의 일종이라고 할 수 있다.
대표적인 예로 HTML의 style 태그를 들 수 있다. 워드패드나 워드 프로세서에서 단순하게는 제목 앞에 몇 칸의 공백을 넣는 등의 행위에서부터 폰트의 변경, 굵게, 크기, 밑줄 등 서식 지정, 표 집어넣기 등 워드에서 일어나는 행위의 일체가 모두 표현적 마크업의 일종이라고 할 수 있다.
자세한 내용은 마크업 언어/목록 문서를 참고하십시오.[1] 이해를 돕기 위해 이렇게 설명했지만 사실은 디자인 쪽이 원조다. 마크업이라는 단어부터가 조판사에게 원고를 보낼 때 활자 구성 등을 써넣은 것을 의미하기 때문이다. 다시 말해, 출판업계에서 쓰이던 MARK UP이라는 단어를 IT 개발 분야에서도 그대로 받아들여서 쓰고 있는 것이다. '원고'와 '출판물'의 관계가 입력 텍스트-표시 텍스트의 관계로 바뀌었을 뿐이다.[2] 직전 버전인 HTML 4.01까지는 <strong></strong>대신 <b></b>가 사용되었으나 현재는 권장되지 않는다. b 태그와 strong 태그의 차이점은 단순한 시각 효과냐 의미론적으로 태그 내용의 중요성을 표현햐느냐의 차이가 있다.[3] 대부분인 이유는 클라이언트 사이드가 아닌 서버 사이드에 해당 기능을 구현하는 프로그래밍 언어가 있는 경우도 많기 때문이다. 예를 들어 계정명을 표시하는 기능을 만든다면 클라이언트의 자바스크립트가 계정명을 불러와서 표시하도록(DOM) 할 수도 있겠지만 서버 측에서 미리 계정명이 들어간 마크업 언어를 생성하고 클라이언트에게 전송해 주어도 되기 때문이다.[4] 참고로 한컴오피스의 수식 입력 마크업 언어는 독자적으로 개발된것이 아니라 TeX으로부터 따온 것이다.
이 저작물은 CC BY-NC-SA 2.0 KR에 따라 이용할 수 있습니다. (단, 라이선스가 명시된 일부 문서 및 삽화 제외)
기여하신 문서의 저작권은 각 기여자에게 있으며, 각 기여자는 기여하신 부분의 저작권을 갖습니다.
나무위키는 백과사전이 아니며 검증되지 않았거나, 편향적이거나, 잘못된 서술이 있을 수 있습니다.
나무위키는 위키위키입니다. 여러분이 직접 문서를 고칠 수 있으며, 다른 사람의 의견을 원할 경우 직접 토론을 발제할 수 있습니다.