[HelloTarot (2)] img 태그 vs background-image 에 대한 고민

 

 

HelloTarot는 기존 타로 카드 게임과의 차이점은 보기 편한 UI와 역동적인 카드 애니메이션에 있다

 

그래서 이미지에 스타일링을 잘 활용해야하는데 이미지를 생성할때,

img태그를 사용할지 background를 사용할지 고민이 되었고 어렴풋이 알고 있던 이 둘의 차이점을 명확히 구분하려한다

먼저, 위에서 말했지만 이미지를 마크업하는 방법은 대표적으로 2가지가 있다

 

 

1) HTML 에서 <img> 태그를 사용

2) CSS 의 background-img 속성을 사용(배경으로 처리)

 

//img 태그

<img src="이미지경로" alt="img">

 

//css background-img

.a {
    background-image: url(경로);
}

 

그럼 어떤 상황에 뭐를 이용해야할까? 몇까지만 살펴보면 다음과 같다

 

 

 

<img> 태그 사용 경우

1. 검색엔진에 노출 시키고 싶을 경우(SEO)
2. 컨텐츠와 관련된 경우
3. 인쇄까지 생각한 경우

 

background-image 사용 경우

1. 디자인 요소로 사용할 때
2. 인쇄 안해도 되는 경우
3. 이미지를 재사용이 많은 경우

 

 

해당 프로젝트는 디자인적 요소로 카드를 많이 이용해야하기 때문에

결론은 background-image로 css 속성을 사용할 예정이다