HTML5 의 의외성 [1탄] 시멘틱 정보
웹접근성 HTML5 의 의외성 [1탄] 시멘틱본문
HTML5, 그러니까 웹 표준 이라 불리는것에 대하여 이야기를 조금 남겨보도록 하겠습니다^^.
HTML5 부터는 시멘틱(태그)의 사용 자체가 관대해지고, 응용의 폭이 아주 넓어졌는데요,
제가 생각하는 가장 흥미로운 점이 대중적으로는 잘 알려지지 않은 것 같더라구요..^^
웹 표준이 제안하는 시멘틱 구조는
<HEADER>, <HGROUP>, <NAV>, <ARTICLE>, <ASIDE>, <SECTION>, <FOOTER>
위와 같은데 주로 <DIV>, <UL>, <LI> 에 국한되어 사용하고 있지않나 라는 생각이 듭니다.
개인적으로는 <header>, <nav>, <article>, <footer> 마저도 흔하게 발견되지않고,
<hgroup> 은 활용 사례를 거의 본적이 없습니다...
역시 IE 가 가장 큰 원인이었다고 생각합니다.
그 옛날엔 프레임셋부터 시작해서 테이블로 레이아웃을 짜던 시절도 있었죠? ㅎㅎ 그때 생각하니 아찔하네요.
<TABLE> 태그에는 <thead>, <tbody>, <tfoot> 과 같은 규칙을 제안하며 "표" 로써의 역할을 권고하였습니다.
그리고 <th>, <td> 로 다시 한번 더 분류하여, 데이터의 제목과 내용을 구별 할 수 있게함과 동시에,
레이아웃 디자인은 레이어(블럭)의 개념으로 <div> 를 사용하도록 유도하였습니다.
이 즈음부터 UI 라는 개념이 적립되기 시작했고 JQUERY 의 보편화로 UX 라는것이 알려지기 시작하였기도 합니다.
잘 아시다시피 웹 표준은 "문서의 규칙을 통일하여 모든이가 차별없이 데이터를 경험하도록" 하는 것이 목표였습니다.
<IMG> 나 <A> 태그에는 name 이나 alt 같은 시각장애인을 위한 정보를 함께 기입할 것을 권고하였구요.
또 <IMG> 태그와 같이 </마침> 이 없는 태그는 <IMG SRC="asdf.jpg" /> 로 마무리 하는 것 또한 권장하였습니다.
그렇게 <!DOCTYPE HTML> 은 편견없는 사용자 경험 을 위해 발표되었습니다.
그런데 말입니다,
의외로 작성자의 편의 또한 함께 제공되었지만, 잘 활용되지 않고 있는 규칙이 있습니다.
바로, 시멘틱을 자유롭게 생성 할 수 있음을 말입니다!
두가지 정도의 예시와 힌트를 들어보자면
1. FONT AWESOME
FONT AWESOME 의 경우를 예로 들자면 <i> 태그를 사용합니다.
그런데 <i> 태그는 FONT-STYLE 의 Italic 으로 미리 약속이 되어있는 시멘틱 입니다.
그럼에도 불구하고 <i class="fas-icon fa-icon" /> 의 형태로 주로 사용되고 있고, 흔히들 사용함에도 의심을 품지 않습니다.
2. STRONG { FONT-WEIGHT }
<STRONG> 태그의 등장 이전에는 <B> 태그가 보편적으로 사용되었지만,
W3C 는 직관적인 문서 작성을 목적하여 <STRONG> 을 사용하도록 한 것입니다.
따라서 문서로 표현하고자 하는 정보를 명확한 시멘틱-네이밍으로 새롭게 작성하는 행위에 소극적일 필요가 없습니다.
예를 들자면 <SIR>그누보드</SIR> 를 사용하는것은 의외로 좋은 문서 작성이라고 판단 할 수도 있습니다.
SIR 은 그누보드의 웹사이트니까요.
새로운 선언을 남용한다면 CSS 스타일시트로 DISPLAY 형태나 MARGIN, PADDING 등
해당 시멘틱의 기본 설정을 계속해서 해주어야하니 꽤나 불편한 일은 맞습니다.
하지만 이점을 유용하게 사용할 수 있는 방법이 있다면,
FONT AWESOME 처럼 새로운 규칙을 생성하고 웹 사이트 전역 태그로써 활용하는 것 입니다.
텍스트에 밑줄을 긋고자 한다면 <U> 태그를 사용하고, 굵기는 <STRONG> 을 사용합니다.
그렇다면 텍스트에 윗줄을 그어주고자 한다면 <UP> 이라는 시멘틱을 생성하여 대략 아래와같이 스타일링을 해준다면
어디에서건 유용하게 사용할 수 있게됩니다.
<style>
UP { display: inline-block; padding-top: 2px; border-top: 1px solid #000; }
</style>
<span>이렇게 글을 쓰다가 <up>윗줄이 필요할 때</up> 이렇게도 사용할 수 있음을 의미합니다.</span>
다음 글은 "표" 와 "리스트" 의 차이, 그리고 리스트의 올바른 사용법에 대해 작성해보도록 하겠습니다.^^
12
댓글 8개
지속적으로 글을 올리는데에는 어려움이 있네요 ㅠㅠ
최대한 빠른 시일내에 이스터에그마냥 흥미로운 주제로 또 찾아뵙겠습니다!