CSS: Image

HTML/CSS의 이미지 삽입

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

• alt="HTML" : 이미지가 정상적으로 출력되지 않을때 대신 HTML이라는 문구를 출력
• src="": 이미지 파일 경로 또는 url 주소

HTML의 속성으로 width나 height를 이용해 이미지의 크기를 조정할 수 있으나,
역시 별도의 css파일을 통해 조정하는 것이 유지 및 보수에 용이하다

따라서 별도의 css파일에

img {
  width: 150px;
}

아래와 같이 작성할 경우, 이미지의 가로 크기만 설정하더라도 자동적으로 이미지의 원본 비율을 유지하여 세로 크기까지 조정된다

Background Image 삽입

배경 이미지를 삽입하는 방법은 1. HTML과 2. CSS를 이용하는 두 가지 방법이 있다.

다만 앞서 상술했던

box-sizing: border-box;

와 같은 이유로 이미지가 HTML의 img 태그를 이용한 것인지 혹은 CSS의 background-image를 이용한 것인지는 개발자 도구에서만 확인할 수 있기 때문에 사용자는 인지하기 어렵다