html의 <img> 태그
<body>
<img src="이미지 경로" alt="대체 텍스트">
</body>alt속성으로 이미지가 로드되지 않았을 때, 나타날 텍스트를 지정할 수 있다.- 이미지가 이미지로서 문서에서 의미가 있을 때 사용한다.
- 해당 페이지를 프린트하게 되면
<img>태그를 사용한다. 그래야만 이미지도 출력될 때 나타난다.
css에서 background-image 속성 적용
<body>
<div>안녕하세요</div>
<style>
div {
background-image: url("http://image.yes24.com/goods/53900323/XL");
width: 200px;
height: 200px;
background-size: contain;
background-repeat: no-repeat;
}
</style>
</body>- 이미지가 단순 디자인 역할로 사용된다면 css의
background-image속성을 사용한다.
이때 url("") 값을 사용하여 따옴표 안에 주소를 경로 및 주소를 작성한다. - 이미지 안에 텍스트가 있을 때 사용한다.
Front-end Developer