• 이미지는 html에서 img태그를 사용하여 넣거나, CSS에서 background-image속성을 이용하여 넣을 수 있다. 그러나, 두 방식에는 약간의 차이가 있다고 한다. 이를 알아보고 기록하기 위해 해당 포스트를 작성하였다.

img태그

<img src="이미지링크"/>

• 이미지 로딩이 실패할 경우 alt="대체설명"으로 이미지에 대한 설명이 가능하다.
• SEO(Search Engine Optimization)등 성능면에서 이점이 크다.
  -> img 태그는 태그 자체가 '이미지'라는 의미를 갖고 있으며, alt 속성에 넣은 문자열을 검색엔진이 이해하여 웹에 노출
  -> img 태그 자체로 의미를 알 수 있기에 Semantic tag

즉, 이미지가 컨텐츠와 연관이 깊고 검색 엔진에 노출이 필요할 경우에 사용

background-image속성

{background-image: url(image.jpg);}

• 디자인적 요소로만 이미지를 활용할 경우
• 컨텐츠와 관련이 없어 이미지 로딩 실패해도 상관없을 경우 (업로드 실패 시 아무것도 노출 X)

즉, 순수하게 디자인이 목적인 경우에 사용

결론

• 공부하다 "이미지를 넣는다" 는 방식이 2개가 있어 한번 조사해보았음. 역시... 다시금 느끼지만, 그냥 슥 보고 넘어가면 남는게 없다.. 정리 무조건 해놓자!