HTML5 의 의외성! [1편] 시멘틱steemCreated with Sketch.

in #html5 • 4 years ago

HTML5, 그러니까 웹 표준 이라 불리는것에 대하여 이야기를 조금 남겨보도록 하겠습니다. 시멘틱(태그)의 사용 자체가 관대해지고, 응용의 폭이 아주 넓어졌는데, 제가 생각하는 가장 흥미로운 점이 대중적으로는 잘 알려지지 않은 것 같더라구요..^^

웹 표준이 제안하는 시멘틱 구조는

HEADER, HGROUP, NAV, ARTICLE, ASIDE, SECTION, FOOTER

DQmdYVaXs1gvJnVDTBfE1yK51sCKyGXH8JFRJY67rYuAG21.png

위와 같은데 주로 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> 은 편견없는 사용자 경험 을 위해 발표되었습니다.

그런데 말입니다,
의외로 작성자에게 자유도를 제공하였지만, 잘 활용되지 않고 있는 규칙이 있습니다.

바로, <시멘틱> 을 자유롭게 생성 할 수 있게 되었다는 것 입니다!

두가지 정도의 예시와 힌트를 들어보자면

  1. FONT AWESOME
    FONT AWESOME 의 경우를 예로 들자면 <i> 태그를 사용합니다.
    그런데 <i> 태그는 FONT-STYLE 의 Italic 으로 미리 약속이 되어있는 시멘틱 입니다.
    그럼에도 불구하고 <i class="fas-icon fa-icon" /> 의 형태로 주로 사용되고 있고, 흔히들 사용함에도 의심을 품지 않습니다.

  2. 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>

2nhMph8Yo3jHyfsfBxm3raDEGrffBkSsHnPoxzrm3Y3dtYYKsWgXDd1YPJXX3goLysPSgcEWMaXgyCTtcp48FfpMgFVo7nxCnoDUKzFfzYN8xDVC8hYU8xeGjA9a6aoavWrxt683H7WoG4Krhy7PLHCTZ4z3LtVnwAsusu21mtdpeKkpwwgAj8swC.png

다음번엔 표와 리스트의 차이, 그리고 약속(프라미스) 라는 글감으로 돌아오겠습니다.
즐거운 시간 되셨기를.

#elements #publishing #froneend #hack #modernweb #css #dom
4 years ago in #html5 by
$0.00
    Reply 0