1. 이미지 태그

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

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

src: 이미지 파일 경로 or 이미지 url 주소

img 태그의 속성(attribute)에는 width, height가 있어서 html에서 직접 수정 가능

img {
  width: 150px;
}

가로/세로 중에서 하나의 값만 입력하여도
브라우저에서 알아서 같은 비율로 나머지 크기도 줄여준다.

background-image로 이미지 넣기

태그가 아니라 css를 이용해 이미지를 생성

index.html

<div class="bg-img">배경이미지</div>코드를 입력하세요

index.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 는 배경 이미지를 추가.

div.bg-img의 가로크기는 화면 전체,
세로 크기는 "배경이미지" 텍스트 높이

div태그는 자식태그,
즉 div태그 내부에 있는 내용이나 요소의 크기에 의해 세로가 결정.
div의 가로크기는 화면의 가로 크기만큼.
이렇게 가로 전체를 차지하는 것을 block 요소라고 하며
p, header, h1 등등이 block 요소입니다.