TIL - 07 - HTML & CSS - 사이트에 이미지를 넣는 방법🧐

사이트에 이미지를 넣는 방법은 두가지가 있다.

1. img 태그를 사용하는 방법 in HTML
2. div 태그에 background-image 속성을 추가하는 방법 in CSS

가장 큰 차이점은 alt속성의 유무이다.

1. img 태그를 사용하는 방법 (HTML)

<img src = "이미지 경로" alt="이미지 정보(코멘트)">

위에 보이는 코드는 일반적인 img태그 작성법이다.
alt 속성이 보이는 것과 같이 이미지에 대한 기본적인 정보를 담고 있다.

만약에 img 태그에서 사용되는 이미지가 로딩이 실패한 경우
broken image 아이콘과 함께 alt에 적어 놓은 코멘트가 보인다.
이를 통해 에러난 이미지가 어떤 의도였는지 쉽게 알 수 있다.

2. div태그에 background-image 속성을 추가하는 방법 (CSS)

하지만 background-image를 활용한 이미지가 에러가 나게 된다면 alt속성이 없기 때문에 어떤 정보를 담고 있는지를 알수가 없다.

TIL-06에서 적었던 semantic element로도 설명이 가능한데
img태그는 semantic element로 이미지라는 의미를 가지고 있는 코드이다.
반면에 background-image의 경우 non-semantic element인 div를 사용했기 때문에 의미를 가지고 있지 않다.

오늘의 한줄✏️

앞으로 img 태그가 보다 명시적이기 때문에 주로 사용할 것 같다.
앞으로 더욱 많은 코드를 작성할텐데 semantic 스타일을 효율적으로 활용하는 습관을 가져야 겠다.