[HTML #7] 이미지 img (src를 CSS로 대체 하는 방법)

Img 태그는 이미지를 삽입할 수 있게 해주는 HTML 태그 입니다. 오늘은 HTML에서 <img> 태그 속성을 사용하는 방법과 CSS로 src를 대체하는 방법에 대해 알아보았습니다.

 

Img

 

<img> 태그는 웹페이지에 이미지를 삽입할 수 있게 도와주는 태그인데, 이 속성으로는 src, width, height, alt, title로 총 5가지가 존재합니다.

• src : 이미지의 경로
• width : 이미지의 가로 크기
• height : 이미지의 세로 크기
• alt : 이미지가 표시되지 않거나, 잘못된 경로일 때 출력되는 메시지
• title : 이미지의 간략적인 정보 표기를 위한 말풍선

태그 사용 방법

<Img> 태그는 닫는 태그 없이 속성만으로 사용이 가능합니다.

<img src="./images/logo.png" alt="로고 이미지" title="홈으로 이동">

만약, 경로에 오류가 있거나 삭제 또는 존재하지 않는 이미지 일시에는 alt에 지정한 문구가 대체 문구로 나타나게 됩니다.

 

그리고, 위 코드를 보면 이미지의 가로와 세로의 크기를 정해놓지 않았기 때문에 반드시 속성 안에는 width와 height를 지정해주셔야 합니다. 

 

태그 안에 이미지 크기 속성을 넣어줄 수 도 있지만, CSS로 이미지 크기를 정해줄 수 도 있습니다.

<img alt="로고 이미지" title="홈으로 이동">

코드를 다음처럼 속성을 넣어주게 된다면 가로 300px, 세로 300px로 고정된 이미지가 웹페이지에 출력되게 됩니다.

 

Src태그를 CSS에서 대체 하는 방법

그렇다면 Html img 태그 속성중 하나인 src를 CSS에서 사용할 수 있을까요?

 

네 할 수 있습니다. background와 같은 CSS 속성을 사용하면 사용이 불가 하지만, <img> 태그인 경우에는 content 속성을 사용하게 된다면 가능합니다.

 

logo라는 클래스를 지정해주고 CSS에서 content: url( ) 속성을 정해주시면 됩니다.

<img class="logo" alt="로고 이미지" title="홈으로 이동">

.logo {
  content: url(
https://images.unsplash.com/photo-1564766195764-ec3059fe8edf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2340&q=80);
}

---

오늘은 이렇게 HTML에서 <img> 태그 속성을 사용하는 방법과 CSS로 src을 대체하는 방법에 대해 알아보았습니다. 

 

 

읽어주셔서 감사합니다🤟