HTML5 의 의외성! [1편] 시멘틱
HTML5, 그러니까 웹 표준 이라 불리는것에 대하여 이야기를 조금 남겨보도록 하겠습니다. 시멘틱(태그)의 사용 자체가 관대해지고, 응용의 폭이 아주 넓어졌는데, 제가 생각하는 가장 흥미로운 점이 대중적으로는 잘 알려지지 않은 것 같더라구요..^^
웹 표준이 제안하는 시멘틱 구조는
HEADER, HGROUP, NAV, ARTICLE, ASIDE, SECTION, FOOTER
위와 같은데 주로 DIV, UL, LI 에 국한되어 사용하고 있지않나 라는 생각이 듭니다.
개인적으로는 header, nav, article, footer 마저도 흔하게 발견되지않고, hgroup 은 활용 사례를 거의 본적이 없습니다...
역시 브라우저 IT 기술의 속도에 브레이크를 거는 것은 언제나 IE.
그 옛날엔 프레임셋부터 시작해서 테이블로 레이아웃을 짜던 시절도 있었죠?
HTML5 에서 <TABLE> 의 작성에 있어 "표" 로써의 역할을 권고하였습니다.
TABLE
tHEAD
| TH | 제목 |
|---|
tBODY
| Td | 내용 |
|---|
tFOOT
| paginants | 게시글 페이지 수 |
|---|
- 데이터의 제목과 내용을 구별 할 수 있게함과 동시에
- 레이아웃 디자인은 DOM 객체(Object or Compoments)의 개념으로
- DOM 레이어를 활용한
<div>를 사용하도록 유도하였습니다.
이 즈음부터 UI 라는 개념이 적립되기 시작했고 JQUERY 의 보편화로 UX 라는것이 알려지기 시작하였기도 합니다.
그러나 최근에는 React 와 Vue 의 영향으로 <props> 가 대중화 되고 있습니다.
잘 아시다시피 웹 표준은...
문서의 규칙을 통일하여 모든이가
차별없이 데이터를 경험하도록
하는 것이 목표였습니다.
IMG 나 A 태그에는 name 이나 alt 같은 시각장애인의 동등한 사용자경험을위해 시청각적인 정보를 함께 기입할 것을 권장하였고, IMG 태그와 같이 <element>사이에 내용이`' 없는 시멘틱에 있어서는 /> 로 마무리 하는 것 또한 권장하였습니다.
그렇게 <!DOCTYPE HTML> 은 편견없는 사용자 경험 을 위해 발표되었습니다.
그런데 말입니다,
의외로 작성자에게 자유도를 제공하였지만, 잘 활용되지 않고 있는 규칙이 있습니다.
바로, <시멘틱> 을 자유롭게 생성 할 수 있게 되었다는 것 입니다!
두가지 정도의 예시와 힌트를 들어보자면
FONT AWESOME
FONT AWESOME 의 경우를 예로 들자면<i>태그를 사용합니다.
그런데<i>태그는 FONT-STYLE 의 Italic 으로 미리 약속이 되어있는 시멘틱 입니다.
그럼에도 불구하고<i class="fas-icon fa-icon" />의 형태로 주로 사용되고 있고, 흔히들 사용함에도 의심을 품지 않습니다.STRONG { FONT-WEIGHT }
<STRONG>태그의 등장 이전에는<B>태그가 보편적으로 사용되었지만,
W3C 는 직관적인 문서 작성을 목적하여 '' 을 사용하도록 한 것입니다.
따라서 문서로 표현하고자 하는 정보를 명확한 시멘틱-네이밍으로 새롭게 작성하는 행위에 소극적일 필요가 없습니다. 예를 들어 <SIR>그누보드</SIR> 를 사용하는것은 의외로 좋은 문서 작성이라고 판단 할 수도 있습니다. SIR 은 그누보드의 웹사이트니까요.
물론 언제나처럼 좋은점만 있는 것은 아닙니다.
새로운 선언을 남용한다면 CSS 스타일시트로
DISPLAY 형태나 MARGIN, PADDING 등 해당
엘레먼트 시멘틱의 기본 설정을 계속해서 지정해주어야하니
꽤나 불편한 일이 될 수도 있고,
포털사이트 로봇이 내용을 추적하지 못하게 하기도 합니다.이 또한 단점만 있는 것도 아니네요.
하지만 보안적인 측면에서 프론트엔드, 아니 퍼블리싱 단계에서도 1차적으로 유용하게 활용이 가능한데,
새로운 시멘틱-엘레멘트를 생성하고 웹 사이트 전역 DOM 컨트롤러 로써 활용하는 것 입니다. 본 기능을 위해 ID 와 CLASS 가 제공되고 보편화 되어있지만, 해당 객체를 검색 로봇 혹은 Auto scritp hacking tool 은 약속되지 않은 정보로 인식하여 이것을 크롤링하지 않게됩니다.
- [x] 약속을 지키지 않는것은 좋은일이 아니지만,
- [ ] 때로는 선의의 거짓말이 필요 한 순간도 있습니다.
텍스트에 밑줄을 긋고자 한다면 <U> 태그를 사용하고, 굵기는 <STRONG> 을 사용합니다.
그렇다면 텍스트에 윗줄을 그어주고자 한다면 <UP> 이라는 시멘틱을 생성하여 대략 아래와같이 스타일링을 해준다면
어디에서건 유용하게 사용할 수 있게됩니다.
<style>
UP { display: inline-block; padding-top: 2px; border-top: 1px solid #000; }
</style>
<span>이렇게 글을 쓰다가 <up>윗줄이 필요할 때</up> 이렇게도 사용할 수 있음을 의미합니다.</span>
다음번엔 표와 리스트의 차이, 그리고 약속(프라미스) 라는 글감으로 돌아오겠습니다.
즐거운 시간 되셨기를.