HTML5 의 의외성 [1탄] 시멘틱 > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

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개

table로 레이 아웃잡던 구세대라 권고사항을 무조건 따르는게 맞는지 아니면 좀더 효율적인 방법이 있으면 마음대로 남용?해도 되는지 애매한 부분이 많았는데 위에 글을 보니 가이드라인 같이 방향성이 생기네요. 효율적으로 사용하나 넘지말아야할 선은 있는것이고 사이트 용도와 사용자에따라서도 융통성있게 작업해야겠습니다. 좋은 글 감사합니다.
다음 아티클도 작성해보아야하는데 긁어오는 글이 아닌 직접 수기 작성의 글이다보니
지속적으로 글을 올리는데에는 어려움이 있네요 ㅠㅠ
최대한 빠른 시일내에 이스터에그마냥 흥미로운 주제로 또 찾아뵙겠습니다!
전체 1,231
퍼블리셔팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT