728x90
마크업
마크업 언어(Markup Language)란
문서가 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 언어의 일종이다.
즉, 마크업(Markup)은
문서처리를 지원하기 위해 문서에 추가되는 정보로,
마크업작업을 완료하면 디자이너의 작업물이 웹에 띄울 수 있는 틀의 형태로 구조화된다.
시멘틱 마크업
- 시멘틱(SEMANTIC)의 사전적 뜻은 '의미론적인' 정도로 해석할 수 있는데,
이것은 마크업을 할 때 의미에 부합하는 태그를 사용하라는 뜻이다.
- 시각장애인의 경우 문서의 콘텐츠 정보를 음성으로 전달해 주어야 하는데
이런경우 시멘틱 마크업을 통해 태그의 의미를 적절하게 전달할 수 있다.
△예제
- 첫 번째 이미지처럼 마크업 하면 스크린 리더(음성낭독 프로그램)에서는 그저 '코린이 공부장'이라고만 읽어주기 때문에 그것이 제목인지 알 수 없다.
- 두 번째 이미지처럼 제목을 의미하는 태그로 바꾸어 마크업해주면 '코린이 공부장' 헤딩 일 이라고 읽어주어 그 부분이 제목인 것을 알 수 있다.
논리적 순서 마크업
- 시멘틱한 마크업과 함께 논리적인 순서에 의해 마크업을 하는 것도 매우 중요하다.
- 정보접근 취약계층의 접근성을 고려하여 논리적 순서에 맞게 마크업한다.
ex) 헤드 > 내용 순서로
△예제
- 예제1에서 1. 전체메뉴 2. 채용정보 3. 브랜드알바 4. 인재정보 순서보다는 1. 전체메뉴 2. 채용정보 3. 일반채용 4. 지역별 순서가 내용 흐름에 더 적합하다.
이처럼 마크업 할 때는 디자인의 시각적 흐름보다는 내용에 대한 논리적 흐름 순서를 파악하여 마크업 하는 것이 중요하다.