21-12-14-(2) img VS div + background-image 에 대하여..

해당 이슈에 관하여 .. 본 글은 상당히 짧지만 심오하게 고민하면서 어떤 상황에서 어떻게 사용하는게 적절한지

글로 정리하면서 한번 더 이해를 위함임을 미리 밝힌다. 

.

.

 

우선 <img> 태그는 시맨틱 태그라고 할 수 있겠다. 

이 태그를 사용하는 것 만으로도 의미가 있다는 것이다~~~

회사 로고, 인물 프로필 사진, 콘텐츠 정보와 연관이 있는 이미지를 쓸때도 사용하며, alt 속성과 함께 사용한다. 

경고 아이콘과 같이 중요한 의미가 내포되어 있거나, 

이게 놀랐던 부분인데!! 페이지 프린트시 이미지가 함께 나오도록 할때 이다. 

사실 어떤 사진을 쓰느냐인데, 페이지 내에서 정말 중요한 사진들이면 img 태그를 사용하고! 

프린트를 할때 이미지가 함께 나오고 싶을때 이렇게 정리 할 수 있겠다~~

.

.

 

div + background-image 는 사용 용도가 좀 다른데..

이미지가 컨텐츠의 일부일때.. 개인적인 생각으로 예시를 들자면 스타벅스 코리아 사이트에 접속하면 

부모태그에 background-image 속성을 적용하고, button태그와 text들이 있는 것을 확인 할 수 있다. 

또 스프라이트 기법을 사용할때이다. 

이는 요즘 많이 쓰는 방법인데, 스프라이트 기법을 사용하는 이유는 서버요청을 단 몇번으로 해당 페이지의 이미지를

다 처리 할 수 있기 때문이다. ( 사이트의 속도와 밀접한 관련이 있는듯. ) 

또 이름 그대로 배경으로 사용하기 위해. 

마지막으로 프린트를 할때 이미지가 나오지 않게 할때이다. 

.

.

 

프린트 관련해서는 좀 더 집고 넘어가야 스스로 이해가 될 것 같다. 

코딩을 하면서 궁금한게 생길때마다 검색하고 그 상황에만 이해하고 지나가기가 아까워서 글로 남기지만

이게 나중에 분명 도움이 되겠지.. 프론트 엔드 개발자가 되기까지 화이팅!!