"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. 태그를 사용하는 것과
태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
현재 인터넷은 세상을 구성하는 한 가지 요소라고 할 수 있다.
이러한 인터넷에는 무수한 정보들이 있다. 그러나 아무리 좋은 정보가 있다고 하더라도, 그 정보가 사용자에게 검색이 되지 않는다면 그것이 과연 유용한 정보라고 할 수 있을까?
그러한 점에서 보았을 때 시멘틱 태그를 사용하는 것은 매우 중요하다.
시멘틱이 아닌 코드를 이용하더라도 똑같은 화면을 출력을 할 수는 있다. 그러나 인간의 눈으로 보는 것만 똑같은 것과 컴퓨터가 봐라보는 화면은 전적으로 다르다.
예를들어 제목을 h1 태그 등을 이용하여 작성하는 것과 단지, div 태그 등을 이용해서 font-size 등을 이용해서 그저 보이게만 같게 하는 것은 컴퓨터의 관점으로 하는 것은 전적으로 다르다.
프로그래밍에서,시맨틱은 코드 조각의 의미를 나타냅니다 — 예를 들어 ("이게 어떻게 시각적으로 보여질까?" 보다)"이 Javascript 라인을 실행하는 것은 어떤 효과가 있는가?", 혹은 "이 HTML 엘리먼트가 가진 목적이나 역할은 무엇인가?" -mdn
즉, 의미를 가진 코딩을 작성함으로써 컴퓨터가 의미를 파악하게 쉽게 하고, 개발자가 그 태그 안에 어떤 내용을 작성하면 될지를 파악할 수 있도록 코드를 짜는 것이다.
<img와 background-image 차이>
두 방식 모두 이미지를 웹화면으로 구현할 수 있는 방법이지만, img는 의미가 내포되어 있는 시맨틱 태그임에 반해 background-image는 그렇지 않다.
만일 두 태그로 작성을 해서 화면이 똑같다고 해도, img는 컴퓨터가 이미지로 인식하는 반면, background-image는 이미지로 인식을 하지는 않는다.
IMG는 사람들이 페이지를 프린트 할 떄 그 이미지가 기본값으로 포함되어서 프린트가 되어지고, background-image는 그렇지 않다.
IMG는 이미지가 경고 아이콘 등 시멘틱적으로 중요한 의미를 가질 때 쓴다.
그리고 회사 로고, 인물 프로필 사진 등 콘텐츠 정보와 연관이 있는 이미지를 쓸 때 쓴다. background-image는 이미지가 콘텐츠의 일부가 아닐 때 쓴다.
img는 이미지에 문구가 사용되어 의미를 가지는 경우 사용하고 alt를 이용해서 의미가 설명 가능하다(시각 장애인 등을 위해 필수)
background-image 같은 경우 일정부분만 선택해 보여줄 경우 이미지 위에 텍스트가 들어가는 경우 등에 쓰인다. 그리고 background-imageCSS 스프라이트와 같이 이미지의 일부만 표시해야 하는 경우 사용한다.
CSS 이미지 스프라이트(Image Sprite)
이미지 스프라이트(image sprite)란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다.
-TCP School
- 출처: mdn, TCP School, stackoverflow 등
