이미지

• <img>

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

  alt: 이미지가 뜨지 않았을 때(서버에서 이미지가 삭제됐거나 잘못된 이미지 주소일 때..), 이미지 대신 보여줄 텍스트
  src: 이미지 파일 경로 or 이미지 url 주소
  width
  height
  가로/세로 중에서 하나의 값만 입력하여도, 브라우저에서 알아서 같은 비율로 나머지 크기도 줄여줌

• background-image
  CSS로 이미지 생성
  사이트에 이미지가 있을 때 어떤것은 img 태그로 만들고, 어떤것은 css의 background-image 속성으로 이미지를 추가했는지 사용자는 알기 어려움
  개발자도구를 열어서 직접 확인해야만 알 수 있음.

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

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

div태그는 자식태그, 즉 div태그 내부에 있는 내용이나 요소의 크기에 의해 세로가 결정. div의 가로크기는 화면의 가로 크기만큼
그래서 width, height 값을 지정해줘서 div안 텍스트가 사라지면 0px * 0px가 되지 않도록 하고, background-size: 100%;해서 가로 세로 크기에 이미지 크기를 맞춰서 다 보이게 해야 함.

block element : 가로 전체를 차지하는 것