[HTML&CSS Basic] 7. Image(img, background-image)

[HTML&CSS]이미지

1. <img> 태그로 이미지 넣기

<img alt="~~" src="https://www.~~~~">

 

• alt: 이미지가 불러올 수 없을 때(서버에서 이미지가 삭제됐거나 잘못된 이미지 주소일 때..), 이미지 대신 보여줄 텍스트
• src: 이미지 파일 경로 혹은 이미지 url 주소

2. background-image로 이미지 넣기(CSS 이용)

→ background-image:url("http://~~~~)

<style>
.ex{
width:300px;
height:200px;
background-image:url("https://www.trustedreviews.com/wp-content/uploads/sites/54/2021/10/Macbook-Pro-2021.jpg")
background-size:100%;
}

</style>
<div class="ex">Macbook Pro</div>

 

Macbook Pro

 

cf.)background-size를 조절 안하면

이미지를 담는 영역인 .ex의 크기만 줄이고

배경이미지는 원본 크기로 나타남.

Macbook Pro

 

cf.) width,height값을 안 주면 

div태그의 경우,div 태그 내부에 있는 내용의 세로 크기("Macbook Pro"의 글자 height크기)가 height가 됨.

가로의 경우 div는 block요소이므로 가로 화면 전체를 차지함.

Macbook Pro