1.
<img>
태그 사용<div> <img src="" alt=""> </div>
2.
<div>
태그에 CSS 속성 추가<div class="js_img"></div>
.js_img { width:300px; height:300px; background-size:100%; background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png"); }
라는 질문을 받았을 때, 막힘없이 설명할 수 있을까?🤔
실제 면접시에 자주 다루게 되는 질문으로, 이를 설명하기 위해서는
Semantic Elements, Semantic Web과 Semantic Tag에 대한 이해가 있어야 한다.
기존 의미없는 데이터 집합이었던 웹페이지에 '의미'와 '관련성'을 부여하여 각각의 문서의 의미에 맞게, 어플리케이션의 의미와 관련되게 구성하는 웹이다. 웹사이트 사용자에게 동일하게 보이는 태그를 컴퓨터가 의미를 이해하고 처리할 수 있게 도와주는 프레임워크이자 기술이다.
기존에 form
, table
, img
, picture
등이 있으며,
content의 의미를 명확히 설명해준다.
div
, span
등이 있으며 태그에 아무런 의미와 설명이 없다.
의미없는 태그 예시
<html> <body> <div> <b style="font-size:60px;">Hello World!<b/> Hello wecode! <div> </body> </html>
컴퓨터는 위의 코드를
div
내에 있는 글자 중Hello World!
를<b>
태그로 감싸 글씨에bold
효과만 주는 것으로 인식할 것이다.
의미를 부여하는 Semantic Tag 예시
<html> <body> <haeder> <h1>Hello World Wecode! <img src="wecode.png" alt="wecode_img"> <h1/> </haeder> </body> </html>
컴퓨터는 위의 코드를
<header>
= 머리말 내 웹사이트의 가장 큰 제목은Hello World Wecode!
이고,Wecode.png
는wecode
의 이미지라는 걸 인식할 수 있을 것이다.
HTML5에서 생긴 HTML 권장 태그 요소
<haeder>
= html내 머리말 영역
<nav>
= html내 내비게이션 메뉴 영역
<article>
= html내 기사 영역
<section>
= html내 부분 영역
<aside>
= html내 왼쪽 혹은 오른쪽 영역
<footer>
= html내 하단 영역
<audio>
= 웹 브라우저에서 음악을 재생하는 요소
Semantic Tag를 사용한 html 작성
<html> <body> <nav> <ul> <li></li> <li></li> </ul> </nav> <section> <article> <h2>제목</h2> <p>내용</p> </article> <article> <h2>제목</h2> <p>내용</p> </article> </section> <aside> <section> <p></p> </section> </aside> <footer> <address></address> <p><a></a></p> </footer> </body> </html>
SEO 검색 엔진 최적화 (Search Engine Optimization)
검색 엔진은 로봇(Robot)이 웹사이트의 정보를 수집하는데, 이를 '크롤링'이라고 하며, 검색 엔진의 크롤러가 이를 수행한다. 구글과 네이버 등의 브라우저에서 검색 품질을 고도화 하기 위해 웹사이트의 개발자 혹은 운영자에게 웹문서 최적화의 기초와 최적화를 돕는 서비스를 제공한다.
'검색 엔진 최적화'의 목적은 개발자들과의 협업, 유지보수도 있지만 '검색 엔진 최적화'를 넘은 기업의 '홍보'와 직결되어 있다는 점이 재미있다.
열심히 제작된 기업의 웹페이지가 검색 엔진에서 제대로 검색되지 못한다면 아무 소용이 없는 것이다.
이러한 검색 엔진 최적화는 '웹문서'의 영향이 큰데,
1. 문법과 Semantic
을 고려하여 HTML 작성
2. 제목 = hn
과 내용의 연관성
3. meta
태그 활용
4. img
태그에 alt
속성 기재
결국 Semantic Web = 좋은 페이지를 넘어 기업에 '홍보'와 '매출'에 직결될 수 있는 것이다.
<img>
태그와 background-image
의 차이점먼저 사용자는 <img>
태그와 css
로 background-image
를 불러오는 것의 차이를 웹 페이지상의 화면으로 구분하지 못한다.
그러나 앞서 설명한 '검색 엔진 최적화'의 html 문서 영향력을 보면,
검색 엔진이 인식하기에 <img>
태그에 alt
속성을 기재하여 이미지에 대해 부가적 설명을 담아 활용하는 것이 적극적인 Semantic Web 지향을 보여준다.
'background-image'는 검색 엔진이 content의 의미를 해석하지 못할 뿐 아니라 검색 엔진 최적화에도 전혀 도움이 되지 않는다. 게다가 개발자와의 협업과 유지보수에도 좋지 않다.
그동안 HTML을 작성할 때, Semantic을 고려하지 않고
div
혹은 span
을 남발하였는데,
앞으로는 아까 작성한 '기업'이 '나'라고 생각하고
웹문서를 작성해야겠다.