Q.

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

A.

   img tag는 의미가 있는 Semantic Tag로써 컴퓨터가 이해할 수 있고 alt 속성으로 에러 발생시 이미지가 깨져도 어떠한 이미지인지 알 수 있지만, background-image는 의미있는 태그가 아닌 그냥 속성으로서, 에러시 이미지의 어떠한 정보도 알 수 없으며, 컴퓨터도 이 태그가 어떤 이미지인지 알 수 없다. 추가로, img tag는 이미지의 프린팅이 가능하지만 background-img tag의 이미지는 프린팅이 불가능 하다.

   다시말해, 사용자를 위한 에러시 이미지가 깨져도 어떠한 이미지인지 정보가 들어가야하고 조금 더 검색엔진에 의해 웹이 잘 노출 되도록 하기 위해서는 Semantic Tag 인 img tag를, 그저 웹 디자인과 같은 미적요소로 이미지를 보여주기 위해서는 background-image를 사용하면 된다.

• 이미지의 중요도(단순 디자인 or 의미 부여)
• 에러 발생 시 이미지 정보 확인 가능 여부
• 이미지의 프린팅 가능 여부

1. Semantic Web?

   Semantic Web은 ‘의미론적인 웹’이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미. 또 사람의 머리 속의 언어에 대한 이해를 컴퓨터 언어로 표현하고 이것을 컴퓨터가 사용할 수 있게 만드는 것을 말함.
  결론적으로 Semantic Web은 웹에 존재하는 수많은 웹들의 메타데이터를 부여하여, 잡다한 데이터 집합이 아닌 ‘의미’ 와 ‘관련성’을 가지는 거대한 데이터베이스를 구축하고자 하는 발상.

2. Semantic Tag?

   Semantic Web에서 사람과 기계가 이해할 수 있고 활용하기 좋은 형태의 데이터로 웹을 발전시키기 위해 나온 tag. 즉, HTML5 언어에 익숙하지 않은 사람에게도 저 태그가 어떠한 역할을 하는지 판단할 수 있도록 하는 태그. 웹 접근성 측면에서도 좋은 효과. 가독성이 좋으므로 유지보수에도 유리하다.