2021.08.20

이미지를 html에 나타낼때에 div 태그에다가 css로 background-image를 사용해서 넣으려고 했는데 사이즈가 고정이 되어있다고 생각이들어서 img태그로 이미지를 넣으면 사이즈를 내가 원하는대로 사이즈를 사용할수있어서 넣으려고했더니 :hover했을때에 css의 background-image가 계속 인식이 안되서 하루종일 뻘짓을 하다가 div에서도 backgrround-size를 사용하여서 div에 들어가있는 이미지의 크기를 div태그에 맞출수있다는것을 알았다... 하... 뻘짓^^;;

background-size: cover;
background-image: url(./resource/test.png);
  1. background-image 에 원하는 이미지의 경로를 적는다.
  2. 비율을 맞춰서 넣으려면 background-size: contain 을 준다.
<img src="./resource/all_ack_btn.png" style="border:none;" class="ack_alli
          onmouseover="this.src='./resource/all_ack_overbtn.png'"
          onmouseout="this.src='./resource/all_ack_btn.png'"
 />

위처럼 해도되긴한데.. 위와같은 태그가 많으면 html이 너무 더러워진다..

참고 : https://multifidus.tistory.com/182

좋은 웹페이지 즐겨찾기