html image 넣는 법(이미지가 여러 개로 겹쳐보이는 이유)

방법1. image tag를 사용한다.

// alt: 사진이 깨진 경우, 마우스를 올리면 나타날 대체어
<img class="picture" src="넣고 싶은 사진의 링크" alt="대체용어">

// 이때 css로 background: url("사진 링크");을 주면 사진이 2겹이 되어버린다.
// img tag를 썼다면 background 속성은 사용 X

방법2. background-image css를 사용한다.

- html

// li나 a tag 등 사진을 넣을 tag를 준비
// a tag를 사용하면 사진을 눌렀을 경우 herf에 지정한 링크로 이동되는 버튼으로 활용 가능
<li class="li-picture"></li>
<a class="a-picture" herf="이동할 URL"></a>

- css

/* 
background-image: 이미지 링크
background-repeat: 이미지의 반복 여부, no-repeat을 해야 width, height 조정했을 때 그림이 여럿 등장하지 않는다.
background-size: 이미지가 어느 정도 크기로 채워지는지
자세한 속성: https://developer.mozilla.org/ko/docs/Web/CSS/background-size
width: 너비
height: 높이
background-size의 default 값은 auto. auto로 해야 width와 height가 지정한대로 적용됨.
*/

.li-picture{
	background-image: url("사진 링크");
    background-repeat: no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
}

 

** img tag에 background 속성으로 또 이미지를 넣을 경우 이미지가 여러 겹으로 겹쳐지기에 1개만 사용해야 한다. **