이미지 삽입

태그로 이미지 넣기

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

• alt: 이미지가 뜨지 않았을 때(서버에서 이미지가 삭제됐거나 잘못된 이미지 주소일 때),
  이미지 대신 보여줄 텍스트
• src: 이미지 파일 경로 or 이미지 url 주소
• 이미지에 class 줄 수도 있는데,
  이럴 때는 맨뒤에 넣어야 되는 듯 앞에 넣으니까 안되네

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

하지만 유지보수나 좋은 코딩 습관을 위해 css는 항상 style.css에서 작성하는 것이 좋다.

img {
  width: 150px;
}

background-image 로 이미지 넣기

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

bg-img 클래스에 배경이미지를 넣는 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");
}

가로크기는 화면 전체이고, 세로 크기는 "배경이미지" 텍스트 높이 만큼이다.

div태그는 그 자식(내부 내용) 의 크기에 따라 바뀜.

가로는 화면 전체 차지 한다. (block element)

이미지 크기를 정할거면, 이미지를 담는 공간 크기도 같이 정해야 한다.

(div 크기 설정도 중요하다는 말)

.bg-img{
background-size : 100%
}

위 코드는 해당 이미지가 div의 가로 크기만큼 꽉 채워서 그려주라는 의미