개요
사이트에 이미지를 넣는 방법은 <img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가 하는 두가지 방법이 있다.
그렇다면 두가지 방법은 각각 어떠한 경우에 사용을 하면 좋을까를 생각하며 "시맨틱 웹"과 "시맨틱 태그"에 알아보았다.
시맨틱 웹이란 ?
시맨틱 웹(Semantic Web)은 "의미론적인 웹" 이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미합니다.
-Wiki 백과
웹이 많이 발전을 하면서 사용자들이 생산하는 정보들이 많아져 우리에게 필요한 정보들도
많지만, 불필요한 정보들도 넘쳐나게 되었다.
수 많은 정보 가운데 자신이 필요한 정보를 찾기 위해 "시맨틱 웹" 이라는 개념을 웹의 창시자
'팀 버너스리(Tim Berners-Lee)가 제안을 했다.
시맨틱 웹은 기계가 우리에게 필요한 정보만 보여주거나 사람을 대신해서 웹 페이지의 정보를 이해하고 필요한 형태로 가공한다.
시맨틱 태그
시맨틱 태그는 자신의 의미를 브라우저와 개발자 모두에게 명확하게 설명한다.
예를 들어
div 와 span 같이 시맨틱 요소를 적용하지 않았을 때는 자신의 컨텐츠에 대해 아무것도 설명 해주지 않는다.
header form article 처럼 시맨틱 요소는 자신의 컨텐츠를 명확하게 설명한다.
<div class="header"> 가 아닌 <header> 와 같이 뜻이 명확한 태그로 작성하자.
시맨틱 태그 종류
-<article> : 내용을 정의한다.
-<aside> : 링크, 광고, 사이드바 표시 등
-<details> : 사용자가 보거나 숨길 수 있는 추가 세부 정보
-<figcaption> : <figure> 요소에 대한 캡션을 정의
-<figure> : 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함 된 콘텐츠를 지정한다.
-<footer> : 문서 또는 섹션의 바닥글을 지정한다.
-<header> : 문서나 섹션의 머릿글을 지정한다.
-<main> : 문서의 주요 내용을 지정한다.
-<mark> : 강조표시된 텍스트를 정의한다. 형광펜을 칠한 것처럼 노랗게 칠해진다.
-<nav> : 네비게이션 링크를 정의한다. 같은 사이트내의 링크나 다른 사이트로의 링크들의 모음이다.
-<section> : <header> ,<footer> 와 함께 문서 구역을 정의 한다.
-<summary> : <detail> 요소를 위한 눈에 보이는 제목을 정의한다.
-<time> : 날짜와 시간을 정의한다.
<img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가 하는 두가지 방법
<img> 태그를 사용 할 때
- 콘텐츠 정보와 연관이 있는 이미지(회사로고, 인물 프로필 사진 등)를 쓸 때 사용
- 경고 아이콘과 같이 중요한 의미가 내포된 이미지를 쓸 때 사용(alt 속성과 함께 사용)
<div> + background-image 속성을 사용 할 때
- 이미지가 콘텐츠의 일부가 아닐 때
- 이미지에 에러가 날 경우 alt와 같은 설명을 나타내고 싶지 않을 때
이미지가 사용자에게 컨텐츠 이해에 도움을 더 준다고 생각하면 img 태그를 쓰고, 그렇지 않으면 background image 를 써라.
출처: https://mygumi.tistory.com/369
