반응형
시멘틱 마크업
시멘틱(Semantic)의 사전적 뜻은 "의미론적인" 정도로 해석할 수 있습니다.
이것은 마크업을 할 때 의미를 부여하는 태그로 보면 됩니다.
모든 사람들이 동등하게 정보를 동일하게 받아들일수 있는 환경이 다를 수 있습니다.
예를 들어 시각장애인에게 HTML 문서의 콘텐츠 정보를 음성으로 전달해 주어야 하는데 이런 경우 전달하려는 태그의 의미가 적절해야 합니다.
시멘틱의 태그들 입니다.
| <header> | 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. |
| <nav> | 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅니다. |
| <main> | 문서 <body>의 주요 콘텐츠를 나타냅니다. |
| <footer> | 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냅니다. |
| <section> | HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다. |
| <article> | 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다. |
| <figure> | 독립적인 콘텐츠를 표현합니다. |
| <figcaption> | 부모 <figure>요소가 포함하는 다른 콘텐츠에 대한 설명 혹은 범례를 나타냅니다. |
| <aside> | 사이드바와 같이 주요 컨텐츠에서 살짝 분리해서 배치할때 사용됩니다. |
| <details> | “열림” 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성합니다. |
| <summary> | “상세” 요소의 공개 상자에 대한 요약, 캡션 또는 범례를 지정합니다. |
| <time> | 시간의 특정 지점 또는 구간을 나타냅니다. |
태그 출처
아직 익숙하지 않은 단어들 이지만 자주 사용하면 차차 머릿속에 잘 들어올거 같습니다.
논리적 순서 마크업
시멘틱한 마크업과 함께 논리적인 순서에 의해 마크업을 하는 것도 매우 중요합니다.
논리적 순서에 의한 마크업은 키보드나 터치패드와 같은 입력 장치만으로 HTML 문서의 모든 콘텐츠를 논리적 순서로 이동하여 상요 할 수 있도록 하는 입력장치 접근성과 밀접한 관련이 있습니다.
마크업을 할 때 는 디자인의 시각적 흐름보다는 내용에 대한 논리적 흐름 순서를 잘 파악하여 마크업 하는 것이 무엇보다 중요합니다.
사진에 있는 로그인창 디자인만 본다면 오류 사례의 1 -2-3-4 의 순서가 맞아 보일 수 있지만,
키보드만 사용한다면 아이디,비밀번호를 입력한 후 바로 로그인이 돼어 아이디 저장 체크박스에 도달할 수 없을 것 입니다.
준수 사례의 순서가 논리적으로 마크업을 했다는 것을 알 수 있습니다.
로그인을 누르기 전에 아이디 저장 체크박스를 거쳐 가기때문에 좋은 논리적 순서 마크업이라고 볼 수 있습니다.