"사이트에 이미지를 넣는 방법은 두 가지가 있습니다.
태그를 사용하는 것과 태그에 background-image 속성을 추가하는 것.
두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
이 질문에 대답하기 위해서 일단 두 가지 방법으로 사이트에 이미지를 넣는 것을 구현해보겠습니다.
1. 태그를 사용해서 이미지 추가
<img src="이미지 주소" width="300px" alt="이미지 설명">
img태그의 속성 값으로 이미지 주소(src), 가로 사이즈(width), 이미지에 대한 설명(alt)를 채워 넣어주면 됩니다. 이미지 주소를 제외하고는 생략이 가능합니다. 하지만 이미지에 대한 설명을 추가하면 웹 접근성을 준수할 수 있습니다.
2. 태그에 background-image 속성을 추가
<div style="width:300px; height:200px;
background-size:100%;
background-image: url('이미지 주소');">
</div>
태그에 background-image 속성을 추가하는 방법은 CSS를 통해서 이미지를 넣는 방법입니다. 그래서 태그에 클래스를 지정하고 css파일에서 해당 클래스에 값을 넣거나 위의 방법처럼 style속성에 값을 넣을 수 있습니다.
이렇게 이미지를 넣으려면 태그의 width와 height을 지정하여 태그가 차지할 공간을 미리 마련해줘야 합니다. 아무런 값도 없고 공간도 없다면 해당 태그는 이미지 주소를 갖게 되어도 아무 것도 표시할 수가 없습니다. 그리고 이미지가 잘리지 않게 하려면 background-size로 조절을 해야 합니다.
img태그를 쓰면 더 쉽게 이미지를 넣을 수 있는 것 같은데 왜 이렇게 하는 걸까요?
😎 배경 이미지로 이미지를 넣는 경우라면 background-image 속성을 이용하는 게 더 적절하고, 이미지가 중요한 경우라면 img 태그를 이용하는 게 더 적절하다고 할 수 있습니다!
이렇게 의미를 담은 태그를 사용하는 것은 Semantic Tag를 사용한다고 말할 수 있습니다. html의 body부분에서 사이트의 전체 구조를 한눈에 볼 수 있도록 header, nav, article, section, footer 등의 시맨틱 태그를 사용하면 유지 보수도 편하고 이해하기도 쉽습니다.
Semantic web은 더 나아가서 키워드 단위가 아니라 데이터 단위로 연결되는 웹을 의미합니다. html의 body뿐만 아니라 head부분에서도 메타 데이터를 제공해서 정보의 효율적 검색, 통합, 재사용을 돕는 W3C의 비전 중 하나입니다.
글 잘읽었습니다! 두 방법의 차이점을 쉽게 써주셔서 좋네요😆💕 연주님 화이팅!💪