Semantic

먼저 Semantic은 "의미론적인"이라는 뜻이다. 따라서, Semantic web, tag 는 각각 의미를 가지는 웹과 태그라고 할 수 있다. 이전에 HTML을 학습할때 이와 관련하여 어렴풋이 듣긴 들었지만 정확히 왜 필요하고, 어떤 기능을 하는지 모르고 그냥 지나쳤었다. 하지만, 오늘 HTML과 CSS를 학습하면서 중요성을 깨닫게 되었다.

Semantic Tags

Semantic Tags에는 header, nav, main, article, footer 등의 태그가 있는데 특별한 기능은 없지만 이들은 각각 의미를 가지는 태그로 사람들에게 하여금 class로 지정하지 않아도 대략적인 역할을 유추할 수 있기에 가독성도 높고 정보로서의 가치를 높여줄 수 있다.

<div class="header">
    <span class="header-title">
      <a href="https://seongjae0325.github.io/myweb/html/index.html">
      SeongJae</a>
    </span>
</div>

이는 내가 과거에 자기소개 홈페이지를 HTML과 CSS로 구현할때 작성한 코드이다. class name으로 "header"와 "header-title"을 지정해주었지만, Semantic Tags를 배우고 나서 보니 개발자 특성상 협업이 자주 이루어질텐데 가독성도 떨어지고, 웹 접근성의 측면에서도 좋지 않다는 생각이 들었다.

  <header class="header">
      <h1 class="header-title">
        <a href="https://seongjae0325.github.io/myweb/html/index.html">
        SeongJae</a>
      </h1>
  </header>

따라서, 다음과 같이 수정하게 되면 header라는 태그를 통해 이 부분이 페이지의 제목이라는 것을 알 수 있고, h1이라는 태그를 통해 제목 및 타이틀이라는 것을 알 수 있게 된다. 또한, 이는 가독성뿐만 아니라 검색엔진의 최적화로 검색시 상단에 노출될 확률이 높다고 한다.

Semantic Web

따라서 Sementic Web이란 의미가 있는 Tag들로 이루어진 Web을 뜻하고, 이는 개발자, 기계, 브라우저, 검색엔진 등 모두에게 데이터들을 명확하게 처리할 수 있게 한다. 그러면 내가 div태그로만 작성했던 자기소개 페이지를 수정한다면 다음과 같이 Semantic하게 기획할 수 있다.

Assignment

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. img 태그를 사용하는 것과 div 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

이미지가 사용자등에 하여금 의미가 있는 데이터 정보이면 SEO(검색엔진 최적화)에 효율적인 img태그를 쓰고, 그저 디자인요소등의 목적인 이미지는 로딩속도도 빠르고 이미지 수정이 용이한 CSS background-image를 이용할 수 있다.