위코드 사전 스터디 1주차 과제 (html/css 활용하여 자기 소개 페이지 만들기)를 하다보니 드는 궁금증. 다른 사람들이 작성한 코드나 템플릿을 보면 이미지를 삽입하는 방법이 크게 1) <img src=""> 태그를 활용하는 방법과 2) background-image{url}을 사용하는 방법 두 가지가 있다는 것을 알았습니다. 비슷한 결과물을 내놓기 때문에 처음에는 동일한 줄 알았는데, 찾아보니 서로 판이했습니다. 여러 블로그의 글을 참조하여 내 웹페이지를 수정해보면서 확인할 수 있었던 점은 다음과 같습니다. 다음 링크가 제 궁금증을 해결하는데 많은 도움이 됐습니다.
차이점 1. 로딩이 되지 않을 때
<img src=""> 태그는 로딩이 되지 않을 때, alt=""라는 속성(attribute)을 통해 로딩에 실패한 이미지에 대한 설명을 보여줄 수 있습니다. 반면 css에서 background로 처리할 경우, 로딩 실패시 화면에는 아무 것도 표시되지 않는다고 합니다. 어느 것이 더 자연스러운지를 선택하는 것은 상황에 따라 판단해야겠네요.
차이점 2. 크기 조절
소개 페이지를 만들면서 이 부분 때문에 많이 고생했고 여전히 헷갈리네요. <img src=""> 태그는 크기를 조절할 때 전체 이미지가 그에 맞게 변경되는 반면, background-image{url}에서는 이미지의 일부가 잘린 채로 나타나기도 합니다. 이 차이점을 미리 알았더라면 보다 효율적인 작업이 가능했을텐데, 아쉽습니다. 그렇기 때문에 순수하게 배경으로서만 활용하거나, 아이콘 등과 같이 단순 반복적으로 사용되는 이미지가 아니라면 <img src=""> 태그를 활용하는 것을 권장하는 듯 합니다.
