13. HTML 이미지 넣기

1. HTML 이미지 넣기

html에 이미지 넣기를 해보겠습니다.

 

이미지를 넣는 방법은 2가지가 있는데요 

1. img 태그를 사용
2. background-image로 이미지 넣기

1. img로 태그를 사용하여 이미지 넣기

방법은 간단합니다.

<img alt="HTML" src="https://www.w3schools.com/whatis/img_js.png">

위와 같이 하시면 됩니다.

 

그럼 속성을 하나하나 살펴볼까요 ?

• alt: 이미지가 뜨지 않았을 때(서버에서 이미지가 삭제됐거나 잘못된 이미지 주소일 때..), 이미지 대신 보여줄 텍스트
• src: 이미지 파일 경로 or 이미지 url 주소

보면 사진이 너무 큰것 같습니다.

 

사이즈를 줄여보도록 하겠습니다.

img {
  width: 150px;
}

위와 같이 css설정으로 크기를 줄일수도 있습니다.

 

img 태그의 속성중 width와 heigth가 있지만 css에서 작성하시는게 나중에 유지보수 하실때 좋습니다.

2. background-image로 이미지 넣기

background-image로 이미지를 넣는 방법도 간단합니다.

1. index.html파일에 이미지를 넣은 영역을 추가해주고
<div class="bg-img">배경이미지</div>

2. css파일에서 이미지 설정을 해준다.
.bg-img {
  background-color: yellow;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
}

background-color 는 배경색을 추가하는 것이고

background-image 는 배경 이미지를 추가하는 것입니다.

 

크기 조정도 가능합니다.

.bg-img {
  height: 300px;
  width: 300px;
  background-size: 100%;
}

간단하게 설명드리면 

 

가로,세로 300px

 

background-size:100%는 배경이미지 크기를 div.dg-img만큼 줄이라는 의미입니다.

 

사진의 크기가 가로,세로 300px보다 클때 background-size를 속성을 사용하시면 사진의 크기가 가로,세로 300px로 맞춰집니다.