이미지 삽입하기

<img>태그는 이미지를 추가할 때 쓰인다.

기본형은 다음과 같다

 <img src="이미지 파일 경로" alt="대체용 텍스트">

이런 식으로 이미지를 넣을 수 있다.

이미지 넣는법

src 속성에는 이미지 파일 경로를 넣어야 하는데 이때 파일의 경로는 웹 문서 파일의 위치를 기준으로 결정된다.

 

이미지의 크기 조정

이미지의 크기를 변경하고 싶다면 width 혹은 height 속성을 활용하면 된다.

width="200" 이런식으로 옵션을 추가적으로 적어주면 된다.

이때 숫자 수치는 픽셀값이며, "50%"처럼 비율값으로 설정하면 현재 웹 브라우저 창의 너비와 높이를 기준으로 이미지 크기를 결정한다.

이때 width와 height중 하나만을 입력하면 다른 하나의 값은 비율에 맞추어 알아서 계산해준다. 

높이, 너비 중 하나만 지정했을 때

높이와 너비를 모두 지정했을 때

+title옵션을 활용해 마우스를 올리면 추가정보를 툴팁으로 표시해줄 수 있다.