repl.it 20 Semantic Web, Semantic Tags

🔒 Question.1

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

🔓 Answer

개발자는 항상 semantic한 web site 구현을 염두해두고 코딩을 해야한다고 생각한다. 그런 관점에서 html의 img tag와 css의 background-image의 차이점과 어떠한 경우에 사용하면 좋은지를 설명하겠다.


먼저 코드의 사용법을 예시로 알아보자!

1. <img src="URL(이미지 주소)" alt="Media"/>

2. <div style="background-image: URL(이미지 주소);"></div>

위 2줄의 코드 차이점은 alt attribute의 유/무이다.
alt는 alternative text의 약자로 image에 대한 정보 설명시 사용한다.

🎁 alt의 장점

①이미지가 정상적으로 로딩되지 않을 때 사용자에게 대체값으로 보인다.
②이미지를 음성언어로 전환시 해당 정보를 대신 읽을 수 있다.
③사용자가 관련 이미지 조회시 해당값을 image의 keyword로 인식하여 웹브라우저 상위에 랭크 될 수 있다.

즉, SEO: Search Engine Optimization특성을 갖는다.

✨ Summary

alt 요소의 특성을 기준으로 다시 설명하자면 user에게 필요한 정보를 담고 있는 요소라면 img tag를 사용하고, 그렇지 않은 단순 디자인적 요소라면 background-image를 사용하면 되겠다.(*background-image는 print시 보이지 않음!)

🔒 Question.2

그렇다면 우리는 왜 우리는 semantic tag를 작성하고 web을 구현해야할까? 아래에 몇 가지 장점을 적어두었다.

› Web page의 접근성: tag를 통해 시각적인 정보를 text 형태로 표현할 수 있어 사용자의 상황에 구애받지 않고 웹페이지의 접근성을 높힐 수 있다.

› SEO 특성: 시각 요소를 text 형태로도 표현이 가능하기 때문에 search engine에서 사용자의 접근성을 높혀준다.

› 쉬운 code 가독성: 담당 개발자가 아니더라도 tag를 통해 내부 요소들의 목적을 쉽게 유추할 수 있다.

😉Semantic tag reference-click me!