17. 웹페이지 구조(시맨틱 태그)

시맨틱 태그라는건 쉽게 설명하면 그 사용처가 명확한 태그들을 한다. 여태 배웠던 태그중에 알게모르게 사용하는 시멘틱 태그도 있다 table, form, a태그 경우가 시멘틱 태그에 해당한다. 반대로 div나 span은 논시맨틱 태그라고 한다.

이 태그들의 경우에 HTML 문서의 구성요소로는 적합할지몰라도 구조를 잡는것에는 한계가 있기 때문에  HTML5에서는 구조를 잡을수 있는 시맨틱 태그들이 추가되었다.

UI/UX구성할때 큰틀을 잡는 태그들이라고 생각하면 편할듯하다. 

그리고 시맨틱 태그를 사용하면 당연히 그 위대하고도 경이로운 "웹의 접근성"이 좋아질수 밖에 없으니 참고하길 바람.

그래서 자주 사용되는 시맨틱 태그에 대해 알아보면

 

시맨틱 태그

1.header 태그 : 웹페이지 해더 영역을 정의할때 사용된다.

2.nav 태그 : 웹페이지의 내부의 다른영역,외부영역을 연결하는 링크 영역을 구분한다는데. 그냥 메뉴를 만들때 사용한다고 생각하면됨.

3.section 태그 : 논리적으로 관련있는 내용의 영역을 구분할때 사용된다.(관련있는 내용들을 한대 묶어서 처리한다고 보면됨.)

4.article 태그 : 웹페이지의 독립적인 부분을 정의할때 사용(페이지 주제와 상관없이 공통으로 사용할수 있는? 로그인 영역같은것) 

5.aside 태그 : 뭔가 웹페이지와 관계없는 녀석들? 광고나 그런 녀석들을 영역짓는데 사용된다. 주로 왼쪽오른쪽에 들어가는 광고들.

6. footer태그 : footer이다 웹페이지 하단에 들어가는 내용들이 정의됨.

7.main 태그 : 웹페이지 구성시 한번은 사용되어야한다. 주력콘텐츠들이 들어가며 문서의 중심이되는 콘텐츠로 구성. 반복되는 내용을 포함해서는 안된다.

좀더 자세히 시맨틱 태그를 보고싶으면 아래 링크에서 확인.

https://developer.mozilla.org/ko/docs/Glossary/Semantics

Semantics - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

 

화면의 구조를 잡을때 해당 태그로 잡는것같다. 뭔가 설계의 영역이다.

안드로이드로 따지면 SPA로 구조로 잡을 경우에 어떠한 의미를 갖는FragmentContainer같은 녀석들? 인것같다. 

어떠한 페이지에 대해서 저런식의 구조를 생각하고 만들어본적이 없다. 물론 개발자로 일을할때는 디자이너 분들이 저런 디테일한 부분까지 생각해서 제플린에 업로드한것이겠지만... 토이 프로젝트 진행시에도 저런 고충을 생각해본적이 없다. 그냥 내가 만들고싶은곳에 어떠한 메뉴를 만들고 처리하였다. 

 

기획자, 디자이너와 협업시에 항상 이해가 안가는부분이 있었는데 그 분야에 것을 어느정도 해보면 그사람들의 마음이 이해가간다. 개발이라는게 코딩을 잘하는것도 중요하지만 같이 일하는 다른 분야의 지식들도 어느정도 가지고 있어야 그사람들을 이해하고 같이 조율해 나갈수 있다고 다시한번 느끼며.. 분명 제플린에 나온대로 컬러값(hex)을 그대로 지정하였는데 화면에 자꾸 다른 색상이 표시된다는 디자이너들을 십분 이해 할수 있을것 같았지만 아무리 생각해보아도 그건 너무 했던거같다..