11. HTML/CSS _ img태그 관련

1. img 태그

• 형태 : <img alt="HTML" src="이미지 경로">
• 예) <img alt="HTML" src="https://www.w3schools.com/whatis/img_js.png">

2. img 태그 속성

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

3. img 태그 크기 설정

• img 태그의 속성에는 width, height가 있어서 html에서 직접 수정 가능.
• 예)
  img {
  width: 150px;
  }

4.background-image : css를 사용하여 img 넣기

html

<div class="bg-img">배경이미지</div>

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");
}

결과 :

4.background-size : 이미지 크기 조절 property

• 형태 : 태그 { background-size: 값 }
• 예)
  .bg-img {
  background-size: 100%;
  }