html <img> vs css<background-image> 언제 써야 하는가? (feat.Semantic Tag )

개발.log·2021년 9월 1일

Semantic Tag

먼저, Semantic이란 사전 그대로 "의미를 가진"이란 뜻을 갖고있다. 따라서 Semantic Tag는 의미를 가진 태그다.

그렇다면 어떻게 의미를 가진다는 걸까? 만약 글을 작성한다고 치면,

[공지사항]
오늘의 공지사항입니다.
오늘 2시에 자바스크립트 시험이 있겠습니다. 모두 준비해주세요.

라고 아무런 의미 없이 주욱 나열할 수도 있지만,

[공지사항]

오늘의 공지사항입니다.

오늘 2시에 자바스크립트 시험이 있겠습니다. 모두 준비해주세요.

->이처럼, 제목, 소제목, 내용별로 구분하여 강조점 주며 이해력을 높일 수 있다.
물론 이또한 css에서 글자 크기를 조정하거나 볼드를 넣어서 강조할 수도 있지만, "의미를 가지고 약속된" semantic 태그를 사용하면 개발자 뿐만 아니라 코드를 해석 하는 브러우저 역시도 가독성이 높아진다.

따라서, HTML상에서도
이런 코드보단

이런 코드

이런 아무 의미 없는 선택자보단

이런 "의미있는 태그"를 사용하여 한눈에 파악할 수 있도록 할 것을 권장한다.

그렇다면 왜!! 써야 하느냐? 만약 semantin tag (의미있는 태그)를 쓰지 않는다면?

1. SEO (검색엔진최적화)에 좋지 않다

검색엔진은 크롤링으로 매일 전세계의 웹사이트 정보를 수집한다. 그리고 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스를 만들어 둔다. 이는 검색 로봇이 수집한 정보를 바탕으로 하는데, 로봇은 HTML 코드만 읽을 수 있기 때문에 이때 주로 해석하는게 semantic 요소이다. 따라서 검색엔진에 최대한 노출 시키려면 semantic Tag를 적극 사용하는 것이 좋다. 노출이 가장 중요한 웹 사이트에서 검색되지 않는다면 그 웹사이트는 점점 도태되어 존재 의미를 잃을 것이다.

2.웹 접근성이 떨어진다.

웹페이지를 시각적 요소뿐만 아니라, 스크린 리더를 사용하여 웹을 읽거나, 키보드만을 이용해서 동작시킬 경우, 적절한 semantic 요소를 사용했다면 문제 없이 동작하지만 그렇지 않을경우 무시될 가능성이 매우크다.

마지막으로,

3.우리(개발자)들을 위해서!

앞서 언급한 바와 같이 HTML코드를 보았을때, 어떤 구성으로 짜여져있는지 한눈에 파악하기 쉽고, 코드 가독성과 유지보수성을 높일 수 있다.

더 나아가 각각의 요소안에 어떤 내용을 넣으면 좋을까?

한눈에 보려 필기했지만 악필인 관계로 알아보기 힘들어졌다^^;;;
정리해보자면,

<header></heard>: 사용자들을 위한 중요한 Menu.
<nav></nav>:header 안에 여러가지 menu가 모여있을 때.
<main></main>: 웹사이트의 중요한 contents가 있는 부분.
<article></article>: 자체적으로 고유한 정보를 나타내며 독립적으로 보여줘도 페이지에 지장이 없을때.
<section></section>: 서로 연관있는 내용들을 하나로 묶어줄때.
<aside></aside>:웹사이트와 상관없는 부가적인 내용. ex)광고
<footer></footer>:부가적인 사이트 정보/참고링크.

[면접대비 tip]

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

라는 질문에 어떻게 대답할 수 있을까?

웹페이지 안에서 이미지가 하나의 중요한 요소로 자리를 잡고 있을땐 <img>
태그를 사용해 주는것이 좋고,

이미지 태그가 문서의 내용과는 별개로 스타일링을 위해 배경이미지로 사용될 경우엔 css background-image로 표기하는게 좋다.

만약, 스타일링 목적이 아니라면 semantic 요소인 <img>태그를 사용할 것을 추천한다. background-image를 사용할 시, 중요 정보가 검색 엔진에 무시되며, 시각적 요소 뿐만 아니라 스크린 리더, 키보드로만 동작하는 웹의 부가 서비스를 이용할 경우 원활히 동작하지 않는다. 또한, 이미지를 요청하기 전에 브라우저가 CSS를 먼저 다운로드하고 파싱. 로드되므로 성능이 떨어진다. 따라서 semantic 요소를 이용하는 것이 코드 가독성에도 좋고 유지보수에 용이하며 성능에도 좋다.