TIL NO.4「html <img/>タグ」と「css背景-画像」の違いは、Semantic WebとSemantic Tagを表示する

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

面接でよくある質問の一つである上記の内容を説明するために.
『SemanticWeb SemanticTag』を理解する必要がある

Semantic Webとは?

'Semantic'은 _[의미론, 의미론적]_ 이라는 뜻으로, 직역하면 '의미론적인 웹'이라는 뜻.
웹의 구성 요소마다 의미를 부여함으로써 과거 '사람'의 언어로 이해가되던 웹페이지의 구성을
'사람+기계'가 함께 이해 할 수 있는 형태로 제작된 웹페이지입니다.

ex)

*과거 웹페이지 구성*
<div id="header"></div>
	-> <div> 태그에 작성자 임의로 id값을 부여함으로써,
    	컴퓨터는 임의의 id값을 해석하지 못함.

*Semantic Web의 페이지 구성*
<header></header>
	-> 임의의 id 값이 아닌, 웹의 기본 구성 요소들을 태그로 분류(정의)하여
    	컴퓨터가 해석 할 수 있도록 처리.

** <header>와 같은 태그가 바로, HTML5에서 Semantic Tag **
이외, <section>, <footer>, <article>, <nav>, <summary> 등
약 백여개의 요소가 있음.

上記の例では、タグを定義することで、コンピュータは、「ヘッダー」、「footer」、「section」などのWebページの構造を説明し、意味のある情報処理を行うことができます.

Semantic Webのメリット

検索エンジンの検索に影響を与えることは、「検索の最適化」に重要な役割を果たします.

視覚障害者ユーザは、スクリーンリーダーを使用してページを閲覧することができる.

意味のないクラス名は,絶え間ないdivよりも意味のあるコードブロックを用いることができる.

の開発者にラベルに埋め込まれたデータ型を推奨します.

の「命名」(Semantic Naming)には、適切なカスタム要素/コンポーネントの命名(Namimg)が反映されています.

Semantic Webにおける「html imgタグ」と「css背景-画像」の違い

次の2つの画像は、面接問題の要件に従って構築された画像です.

それぞれ右クリックすると、

background-image=画像として認識できません.

imgタグ=画像を認識および取得できます.

Webが情報形式で異なるかどうかは、画像の重要性によって異なります.

imgラベルの使用を推奨

印刷が必要です
出力時には

の背景画像は含まれません.

画像の文字に意味がある
画像が

に意味がある場合、altラベルを使用して説明することができる.

画像は非常に重要です:

background-imageの使用を推奨

セクションのみを選択した場合(Yes-サスペンションボタン)

cssを使用して画像を簡単に変更します.

テキストは

画像にあります
テキストが

画像の上にあり、バックグラウンドでの重要性が高くない場合.

ページのフル出力から画像を削除する必要がある場合は、次の操作を行います.

画像出力時に困難またはオーバーラップに遭遇した.

CSS spritesによる画像速度の向上

以上のimgタグを使用するよりも、CSS spritesテクノロジーを使用すると、画像の修正、保存、管理が容易になり、他のアイコン領域を事前に取得してロード速度を向上させることができます.

バックグラウンド全体で表示を拡大する必要があります

背景-sizeなどの属性は、背景画像の動作を簡略化することができる.

要するに、

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

A. <img>태그는 alt 태그를 사용하여 이미지 설명 및 검색이 가능한
Semantic Tag의 일종으로 볼 수 있으며, 단순 배경이미지가 아닌
페이지 구성에 필요로하는 이미지일 경우 필히 사용하여야 하며,

background-image 속성은 페이지 구성에 설명을 필요로 하지 않는
단순 배경이미지일 경우에 활용하기 좋습니다.

예를 들어 맹인에게 페이지 구성을 설명 할 때,
필요한 요소인지 아닌지를 판단하여 태그를 활용한다면 구분이 더 명확해 지지 않을까 생각합니다.