HTML/CSS - 11. 이미지

1. <img> 태그로 이미지 넣기

이미지를 웹 사이트에 추가하는 방법이 여러 가지 있는데, 가장 많이 쓰이는 방법은 img 태그를 사용하는 것이다.

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

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

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

 

img 태그의 속성(attrubute)에는 width, height가 있어서 html에서 이미지 크기를 조정할 수 있다. 하지만 유지보수나 좋은 코딩 습관을 위해 css는 항상 index.css에서 작성하는 것이 좋다.

img {
  width: 150px;
}

위 코드처럼 css에 가로만 지정해주어도, 가로의ㅏ 150px 비율에 맞춰 세로도 알맞게 바뀐다. 즉, 가로/세로 중에서 하나의 값만 입력해도 브라우저에서 알아서 같은 비율로 나머지 크기도 줄여준다.

 

---

2. background-image로 이미지 넣기

첫 번째 방법은 html에서 <img>태그로 이미지를 생성하는 것이었고, 또 다른 방법은 태그가 아닌 css를 이용해 이미지를 생성하는 것이다.

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

css로 이미지를 넣는 방법은 

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

bg-img 클래스에 배경 이미지를 넣는 css를 추가하는 것이다. 

background-color는 배경색을 추가하는 것이고, background-image는 배경 이미지를 추가하는 것이다.

background-color를 추가하지 않으면 하얀색 바탕화면이 나온다. 뒤에서 다룰 내용이지만 간략하게 설명하자면,

div태그는 자식태그, 즉 div태그 내부에 있는 내용이나 요소의 크기에 의해 세로가 결정된다. div의 가로 크기는 화면의 가로 크기만큼 이이다.

이렇게 가로 전체를 차지하는 것을 block 요소라고 하며 p, header, h1 등등이 block요소이다. div태그에는 자식 태그나 div태그 내부에 있는 내용의 세로 크기가 곧 div태그의 세로가 된다. div태그의 가로 크기는 div태그의 내부에 뭔가가 있기만 하면 화면 전체의 너비가 곧 자기의 가로 크기가 된다.

다시 bg-img 배경 이미지로 돌아와서..

.bg-img {
  height: 300px;
}

이렇게 배경 이미지의 높이를 지정해 줄 수 있고,

.bg-img {
  width: 300px;
}

이렇게 배경이미지의 넓이를 지정해 줄 수 있다.

하지만, 이렇게 지정해주면 이미지를 담는 영역만 변경되고 배경이미지의 실제 크기인 원본크기는 변하지 않는다.

배경이미지의 원본크기를 변경해주고 싶으면

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

이런 식으로 사이즈에 퍼센트를 줄 수 있다. 위 코드 내용은 div.bg-img 가로 크기만큼 꽉 채워 그려주라는 의미이다.