...
마크업(Markup) 이란 ?
html 문서를 작성할 때 각각의
태그(Tag)를 이용해
요소(element)를 이루어 코딩한 것을
마크업(Markup)
이라고 합니다.
이런 마크업을 할 때 필수적으로 알고 있어야하는
시멘틱 마크업과
논리적인 순서에 따른 마크업
두 가지를 알아보도록 하겠습니다.
시멘틱 마크업 (Sementic markup)
시멘틱 마크업의 기본적인 정의부터 알아보면 시멘틱(sementic)의 사전적인 뜻은
'의미론적인'
이라는 의미를 가지고 있습니다.
결국 직역하자면 의미에 맞는 태그를 사용하라는 뜻입니다.
그렇다면 왜 시멘틱 마크업이 필요한지 알아보겠습니다.
의미를 포함하지 않은 마크업을 보여주는 사진입니다.
제목이라는 의미를 나타내는 태그를 사용하여 마크업 한 사진입니다.
위 두 사진처럼 마크업을 하게 되면
첫 번째 사진의 텍스트가 어떤 의미를 가지는지 사람마다 다른 해석을 할 여지가 있지만,
두 번째 사진의 텍스트는 '제목'이라는 내용을 뜻하는 태그를 걸어주어 모든 사람들로 하여금 제목으로 인식하도록 합니다.
예를 들어 시각장애인의 경우 HTML문서의 콘텐츠 정보를 음성으로 전달해 주어야 하는데
<h1>태그까지 읽어주며 제목으로 인식하게끔 합니다.
논리적 순서 마크업 (Logical sequence markup)
마크업을 시멘틱하게 작업함과 동시에 논리적인 순서에 의해 마크업해 주는 것도 매우 중요합니다.
예를 들어 위 사진처럼 마크업을 한다고 가정하면 각각에 적힌 숫자의 순서대로 마크업을 해주어야 합니다.
시각적인 디자인의 흐름 순서가 아닌
내용에 대한 논리적인 흐름 순서로
즉, 쉽게 말해 사진처럼 카테고리에 해당하는 내용이 카테고리의 바로 다음 순서로 나와야 하는 것입니다.
이상으로 시멘틱 마크업과 논리적 순서 마크업에 대해 알아 보았습니다 !