TIL 10 HTML/CSS - <img> vs background-image

Wecode 19기를 시작함과 동시에 HTML/CSS에 관한 과제를 받았다. 솔직하게 말하면 공부를 많이 했다고 생각해서 자신만만 했는데 막상 풀다보니 모르는 태그들도 많았다.

그리고 가장 충격을 받았던 부분은 <img>태그를 사용하는 것과 <div> 태그에 backgroung-image 속성을 추가하는 것이었다.

두 가지다 사용 방법은 알지만 두 태그의 차이점에 대해서 질문을 받으니 대답이 바로 나오지 않았었다. 그만큼 겉핥기 식으로 공부를 했다는 생각에 더 자세히 공부를 하게 되었다.

1. <img>태그

<img>태그는 문서에 이미지를 넣는다. HTML을 공부하였다면 어렵지 않은 속성이니 깊게 다루지 않고 특성만 파악하고 넘어가겠다.

<img src="ex.jpg" alt="배경화면입니다.">

• src속성은 필수이며, 포함하고자 하는 이미지의 경로를 지정한다.
• alt속성은 이미지의 텍스트 설명이며 필수는 아니다.
• 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없을 경우에 이 속성(alt)의 값을 대신 보여준다.
• 다만, 스크린 리더가 alt의 값을 읽어 사용자에게 이미지를 설명하므로, 접근성 차원에서 매우 유용하다. ex)시각장애를 가진 분들

2. background-image 속성

background-img 속성은 요소의 배경 이미지를 한 개나 여러 개 지정한다.

먼저 불러와진 이미지부터, 아래로 쌓이게 된다.

//test.css
.ex {
	background-image: url("star.png"),
        url("ex.jpg");
	background-repeat: no-repeat;
	width: 300px;
	height: 300px;
}
//test.html
<div class="ex">
</div>

star.png를 불러온 후, ex.jpg를 넣었더니 star.png뒤에 ex.jpg가 나오게 되었다. 이 부분은 MDN에 잘 설명되어 있으니 참고하면 좋을 것 같다.

여기서 <img>태그와 다른 점이 있다. backgroung-image는 태그가 아닌, 속성이다. 만약 <div>의 넓이와 높이가 사진의 이미지보다 작으면 어떻게 될까?

.ex {
	background-image: url("ex.jpg");
	width: 150px;
	height: 150px;
}

분명 첫 번째 예시와 같은 이미지를 넣었지만 <div>크기만큼만 출력이 되고 나머지 부분은 잘리게 된다.

그리고 background-image는 값이 유효하지 않은 URI를 지정하는 등 주어진 이미지를 그릴 수 없을 때 none속성 처럼 처리한다.

그래서 background-color를 지정하면 이미지 대신 배경색을 출력하므로 색을 지정해 놓는 것이 좋다.

3. <img> VS background-image

그렇다면 어느 때에 <img>태그를 쓰고 background-image속성을 쓰는 것이 좋을까?

<img>를 사용하는 경우

• 프린트가 필요한 경우
  - 백그라운드 이미지는 출력 시 포함되지 않는다.
• 이미지에 텍스트 설명이 필요한 경우
  - 위에서 언급했 듯이 접근성에 유리하다
• 이미지가 콘텐츠의 중심으로 가장 중요한 경우

background-image를 사용하는 경우

• 일정 부분만 선택해 보여줄 경우
  - 속성을 설명할 때 특징으로 예시를 들었다.
• 이미지 위에 텍스트가 들어가는 경우
  - 이미지 위에 텍스트가 들어가는 경우 백그라운드 이미지를 넣고 그 태그 내부에 간단히 텍스트를 넣어 사용할 수 있다.(꼭 이 방법만이 아니어도 positiong속성을 이용해 하는 등 다양한 방법이 있기는 하다.)
• 페이지 전체 출력 시 이미지를 제거해야 하는 경우
  - <img>태그와 반대로 출력 시 나오지 않는다.
• 이미지에 확대, 축소가 필요한 경우
  - background-size 등의 속성을 사용해 배경을 다양한 방법으로 조작 가능하다.
• 반복되는 이미지일 경우
  - background-repeat : no-repeat를 선언하지 않으면 같은이미지가 정해진 범위안에서 계속 반복되어 나타난다.

Today I Feel

너무나도 익숙한 태그와 속성이었지만 차이점에 대해 질문을 받았을 때 바로 대답을 하지 못했던 나의 모습에 굉장히 반성을 했다. 기술블로그를 일기처럼 쓰면 안되지만 오늘 나의 안일한 생각을 바꿀 수 있었던 신선한 충격이었다. 앞으로 공부를 하면서 지금 이 기술(태그, 라이브러리 등등)을 쓸 때에 왜(WHY) 쓰는 지에 대해 항상 의문점을 가져야겠다.

Reference

• https://chlolisher.tistory.com/77
• https://developer.mozilla.org/ko/docs/Web/CSS/background