시멘틱마크업, 시멘틱웹 그리고 Outline

안녕하세요..

날씨만큼 익어가는 찐망고입니다.

웹 표준, 크로스 브라우징, 시멘틱 마크업...

이젠 끝날 줄 알았는데 Outline이라니 😅

오늘은 시멘틱 요소들을 가지고 본격적으로 틀을 잡는 코드를 

보여드릴까 해요..

 

참고로 오늘의 찐망고의 코드고요.

내일의 찐망고는 다르게 마크업 할 수 있다는 걸 명심! 또 명심해주시길...

A일수도 있고, B일 수도 있는데..

A와 B가 서로 본인 게 맞다고 싸우면 안 된다는 소리예요..

 

일단 이전 글 두 개를 첨부하고 시작하겠습니다.

2021.07.25 - [마크업/HTML] - 웹 표준,크로스브라우징, 시멘틱마크업에 대한 이해

2021.07.26 - [마크업/HTML] - 웹표준, 시멘틱 마크업??

 

시멘틱 마크업이라는 게 의미가 잘 전달되게 마크업을 하자는 거잖아요?

이런 요소들을 이용하여 마크업을 하다 보면 한눈에 보이진 않지만 문서의 구조를 나누는데 큰 역할을 합니다.

그리고 그 구조를 꼭 책의 목차처럼 한눈에 확인할 수 있게 보여주는 사이트가 있습니다.

 

저야 마크업을 하면 저절로 문서 구조를 파악되기 때문에 상관없지만

아무래도 초보자들에겐 어렵게 느껴질 수 있거든요.

그래서 체크하면서 확인할 수 있는 사이트인데..

실제로 현재 오픈되어 있는 사이트들의 outline을 돌려보면 안 지켜진 웹사이트들이 상당히 많아요..ㅎ

 

https://gsnedders.html5.org/outliner/

HTML 5 Outliner

이렇게 직접 들아가서 검색을 해도 되고, 

아님 크롬 브라우저에서 부가기능을 하나 추가로 설치하셔도 됩니다. 바로가기 링크

 

 

네이버의 outline

당연히 잘 지켜졌을 거라 믿고 네이버의 outline을 확인해 보았는데요..

네이버 메인 페이지는 저런 목차를 기준으로 문서를 나누어 놓았습니다.

진짜 딱 책 목차같이 생겼죠? 대제목, 부제목, 소제목 ㅎㅎ

저 제목에 해당하는 요소들이 <h1>~<h6>에 해당하는 요소들이에요.

 

네이버 메인 사이트는 <h3> 요소까지 사용한 것 같네요..

 

저번에 포스팅했던 그 샘플 이미지입니다.

 

전체적으로 outline을 지켜가며 시멘틱 마크업을 해볼 건데요.

<div id="wrap">
  <header>
    <h1>서브원</h1>
    <nav><h2>서브원사이트맵</h2></nav>
  </header>
  <div id="container">
  	<div class="slider">slider</div>
    <section><h2>CORE SERVICES</h2></section>
    <section><h2>LOOKING FOR SOMETHING?</h2></section>
    <section>
      <h2>NEWS</h2>
      <article><h3>서브원21년7월수주소식</h3></article>
      <article><h3>서브원21년6월수주소식</h3></article>
      <article><h3>서브원,MRO~</h3></article>
      <article><h3>서브원-유한킴벌리~</h3></article>
      <article><h3>서브원,2021소비자추천1위브랜드</h3></article>
    </section>
    <section><h2>BLOG</h2></section>
    <section><h2>YOUR CHALLENGE CREATES A NEW FUTURE</h2></section>
  </div>
  <footer></footer>
</div>

시멘틱 요소를 이용해서 마크업을 해보았고요..

그 아래는 Outliner로 구조 파악을 해보았더니~~ 짜잔..

너무 완벽한 목차...😊😁

코드 보시면 규칙이 어느 정도 보이시나요?

h1의 개수와 나머지 h2~h3도 보이시죠??

h요소의 숫자가 높아질수록 들여 쓰기가 되어 소제목으로 나타납니다.

시멘틱 요소를 사용할 경우엔 무조건 h요소를 같이 지정해주셔야 합니다

그렇게 하지 않으면 전에 그 유효성 검사 있죠? 거기서 에러 나요..ㅋ

 

그리고 outliner에서도

1. Untitled Section 

저런 식으로 제목을 찾을 수 없다는 오류가 표시됩니다.

그러므로 시멘틱 요소를 사용할 경우 h요소도 꼭 같이 묶어서 잘 사용해주세요.

하시다 보면 목차 정하는 재미도 꽤 쏠쏠하답니다.

 

 

전 마크업 위주로 포스팅을 쓰긴 했는데요.

시멘틱 검색도 혹시 궁금해하실까 봐 관련 링크를 첨부합니다.

http://www.konantech.com/?p=952

[검색] 텍스트 분석의 진화, 시맨틱 검색 | Konan Technology

 

 

다음 포스팅은 웹 접근성에 대해서 이야기해보도록 할게요~

그럼 이만~