[TIL] IMG vs CSS background-image

画像を入れる際には、HTMLでimgタグを付ける方法とCSSでbackgroundを使う方法が知られていますが、CSSで画像を入れると扱いやすいと理解されています.今回の学習を通じて、両者の間にどのような違いがあるかが明らかになった.
Webに画像を挿入するには、次の手順に従います.
前述したように、ウェブページを作成して画像を挿入する方法は大きく2つあります.
1)HTMLの<img>タグで画像を挿入する<img alt="대체 텍스트 기입" src="이미지 경로 기입">2)CSSの背景属性で画像を挿入するdiv {background-image:url(이미지 경로)}Web上に直接表示される画像自体に大きな違いはないかもしれません.しかし、両者の違いが分かれば、後で画像を慎重に使います!説明する前に必要な内容を指摘しておきます!
検索を最適化するためのSemantic要素
HTML 5の大きな特徴は、htmlのタグ要素として意味要素を使用できることです.以前はありませんでしたか.いいえ.人々はずっと空きバケツのようなdivやspanで意味要素の名前を使っています!リンゴジュースだけ飲んで、100%リンゴジュースを飲んでいるような感じ(これは蒸した!!)
(意味要素に興味がある場合は、Semantic HTMLを参照してください!)
では、なぜ人々はHTML構造にこんなに多くの意味を追加するのでしょうか.2つの理由があるようです!まず要素に意味を与えると、構造を把握しやすくなります!

1) <div><div><div><div>
2) <nav><header><section><footer>

上のラベルはすべて内容を入れた空き茶碗のラベルです.
1)のようにすべてdivで表すと,何が入っているのか分かりにくい.しかし,2)のような空きボウルもご飯ボウル,スープボウル,醤油ボウルを表すと,ラベルを見ればその役割と重要なことが大まかに推測できる.
2つ目の理由は1つ目の理由の延長線で、重要な内容をより早く把握できれば検索を最適化できます!
食卓に茶わんが少なくなってはいけませんが、醤油茶碗がなくてもいいかどうか知っているので、検索するときにこれらの情報を削除すると、より速くより効果的に情報を見つけることになります!
これらの有意義な要素でWebを表現するのは、簡単に言えばSemantic Web!
だからimgとbackground-imageの違いは何ですか?
目先のいい人はもう身につけているはずだ.彼らはSemanticの要素と関係があるでしょう.そうなんです!!この2つの大きな違いは意味があるかどうかです!
1)HTMLの<img>タグで画像を挿入する<img alt="대체 텍스트 기입" src="이미지 경로 기입">2)CSSの背景属性で画像を挿入するdiv {background-image:url(이미지 경로)}前の画像の挿入方法をもう一度見ると、どういう意味かわかります.
1)のimgタグは、タグ自体に画像を挿入することを示すが、テキストを置き換えることで画像についても説明を加える.私たちから見れば、これはただの画像ですが、画像が見えない盲人にここに何の画像があるかを教えて、パソコンに「これらのキーワードを検索して、私を出させてください」と教えてくれます.効率化!一言で言えば、すべての人やパソコンへの親切で詳細なマークと言えるでしょう.
ただし2)バックグラウンド−画像の前にdivという空のラベルにCSS属性のみを用いて画像パスを設定した.視覚障害者はこのサイトを読むとき、画像の部分を読むことができず、パソコンも認識できません.
では背景-いつイメージを使いますか?
では、CSSのbackground-image属性はいつ使えばよいのでしょうか.ここでは、stackoverflowに記載されているいくつかの異なる点について説明する.
1)CSS背景の画像がコンテンツの要素でない場合に使用する.△画像に意味がなければ、使わなくてもいい!
2)テキストの画像置換に使用します.
3)人々がページを印刷したり読んだりするとき、画像をデフォルト値にしたくない場合は、それを使用することができます.
4)ダウンロード時間をアップしたい場合は利用可能です.なぜなら、CSSの画像sprites(複数の画像を同時に管理する)の属性を使えば、複数の画像を含むページを検索する際に、より速く管理できるからです!
5)表紙として背景画像を用い,ページ上の全画面を上書きする.

{background-image:url(image address), background-size:cover}

上のように入力すると、画面いっぱいに画像を詰め込むことができます!その名の通り、背景画面として使用!
ラベルを書くのは気にしないの?
1)imgと置換テキスト(alt)をコンテンツの要素として使用する!(ロゴ、人物、または概略図を説明する場合)
2)ブラウザでズームしてテキストサイズで画像を移動!(私から見れば、レンダリングを容易にするために、つまりそれをよりよく見つけるために使用されています!)
3)IE 6に複数の画像を使用する、すなわちオーバーラップ!
4)imgタグを使用すると、アニメーションの動作が大幅に改善されます(背景-画像と比較!!)
こうしてimgとbackground-imageの違いがわかりました!これからどんな用途に使うか考えてもいいと思います!😎