div보다 더 나은 태그.

 지난 주제로 센스리더를 사용하는 방법에 대해서 공유를 했었다. 다들 뭐, html4와 html5의 가장 큰 차이점이라고 물어보면, 시맨틱 태그의 추가라고, 이야기들을 많이 할 것이다. 하지만, 뭐... 있다고 해서 뭐 다 잘 적용을 하고 있나? 라고 물어보면, 글쎄... 라는 생각이 많이 든다.

 다들 div태그에 css입혀서 디자인을 적용 한 적이 많지 않은가??? 참고로 나도, 뭐 2 ~ 3년차 때까지만, button, a 태그들을 사용해서 퍼블리싱을 진행 하였지, 내가 만들고 있던 서비스에는 굳이.... 라는 생각이 많았기도 했고, 기본적으로 제공해주는 button의 디자인이 디자이너가 디자인 해준 디자인과 너무 차이가 있어서 div에서 시작하는 경우가 많았다.

 시맨틱태그

시맨틱태그는 무엇일까? 시맨틱은 해석을 하자면, "의미론" 정도로 해석을 하면된다. 즉 의미가 있는 태그, 라고 생각하면 된다.

 div는 무슨 뜻일까? Division의 약자로, 그냥 부, 부서로 해석 하면 되지만, 그냥 나누어진 영역이라고 해석 하면 된다. 즉 뜻이 아무것도 없다.

 자 간단하게 보자. 위의 영역을 조금만 단순화 해보자. 녹색영역은 헤더, 빨간색영역은 네비게이션, 노락색들은 블로그포스팅들 태그로 보자면,

<header>
<nav></nav>
</header>
<article></article>
<article></article>
<article></article>
<article></article>

......

 뭐 이정도 일 것이다. 이 내용은 추후에 좀 더 다루어보자. 이런 것을 해야하는 이유는 SEO때문이다. 검색엔진에게 이 안의 내용은 어떤 형태의 내용을 다루는 영역이야 라고 알릴 뿐... 실제 사용할 때, 뭔가 다른표현을 해주는 것은 아니다.

 역할

 다시 본제로 돌아와서, 우리는 SEO를 신경 쓰기전에, 역할에 맞는 태그를 사용하는 것이 조금 더 중요하다고 생각한다. 아 뭐 물론 SEO를 신경 쓰시는 분들이라면, 역할에 맞는 태그를 이미 사용 할 것이다 라고 생각하지만 말이다.

 자 간단한 예시이다.

<div id="test">
새 글 작성
</div>

<button>
새 글 작성
</button>

 자 두개의 태그가 있다. 그냥 태그만 보도록 하자. div는 "새 글 작성"이라고 적혀 있는 태그일 뿐이다.

 하지만, button 새 글 작성이라는 태그도 있다. 그러면 이 태그는 뭔가 행위가 있을 것이라고 판단이 가능 할 것이다.

 하지만 아래와 같다면?

<div id="test">
새 글 작성
</div>

<script>
const testDom = document.getElementById('test')
testDom.addEventListener('click', newPost)
</script>

 div에도 click이벤트로 인하여, 새 글이 작성이 가능하다.

 자 무엇을 이야기 하고 싶은지, 다들 이제 알 것 같다.

 센스리더를 사용할 때에도, 이건 아주 중요한 역할을 한다. button의 경우, "버튼 새 글 작성"이라고, 잘 설명 해준다. 하지만, div로만 이루어진 경우 포커스도 들어가지 않을 뿐더러, 내용만 읽어주기 때문에, 해당 태그의 역할이 무엇인지 알 수가 없다.

 form, input, select, button, a, ul, li 등등, 이미 HTML4 스펙에서 있었던것 부터, 잘 사용하자 라는 말을 하고 싶다.