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>
다음 글은 "표" 와 "리스트" 의 차이, 그리고 리스트의 올바른 사용법에 대해 작성해보도록 하겠습니다.^^
댓글 8개
게시글 목록
| 번호 | 제목 |
|---|---|
| 3349 | |
| 3346 |
CSS
다양한 css 선택자 알아보기
|
| 3345 |
HTML
sitemap.xml 추출 사이트
2
|
| 3343 |
CSS
Flex layout
|
| 3342 | |
| 3341 | |
| 3329 |
기타
구글폰트
2
|
| 3321 | |
| 3319 | |
| 3318 |
기타
W3.CSS 여백
2
|
| 3317 | |
| 3316 |
기타
W3.CSS 패딩
|
| 3315 |
CSS
W3.CSS 서클 내 텍스트
|
| 3314 |
CSS
W3.CSS 라운드 클래스
|
| 3313 |
CSS
W3.CSS 텍스트 그림자
|
| 3312 |
CSS
W3.CSS 와이드 텍스트
|
| 3311 |
CSS
W3.CSS 텍스트
|
| 3310 | |
| 3306 |
기타
W3.CSS Fonts
|
| 3305 | |
| 3304 | |
| 3303 | |
| 3302 | |
| 3301 | |
| 3300 |
HTML
html 테그 정리기
2
|
| 3299 | |
| 3298 | |
| 3297 | |
| 3296 | |
| 3294 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기