By aPOST in CSS — 2023년 12월 23일

HTML+CSS 기초 강의 - 6. 이미지(<img>) 태그로 이미지 붙이기

HTML 문서를 가장 예쁘게 보이게 만드는 태그중 하나가 이미지 태그(<img>)입니다.

이미지 태그는 태그쌍없이 단독 태그(<img>)로 사용하는 태그이며, 이미지 위치를 표시하는 속성인 src, 이미지 크기를 표시하는 width, height 등의 속성을 사용합니다.

태그명은 <img/> 입니다.

이미지 위치를 가리키는 속성으로 src를 사용합니다.

예를들어 HTML 문서가 있는 경로에 new.jpg라는 jpeg 이미지가 있다면

와 같이 태그를 입력하면 이미지 태그가 있는 위치에 이미지가 로딩되어 표시됩니다.

이미지 크기를 지정하는 속성 값이 없을 경우 이미지 크기 그대로 웹 브라우저에 표시됩니다.

인터넷에 위치한 이미지를 링크를 걸면 인터넷에 있는 이미지도 HTML 문서 안에 바로 표시가 됩니다.

지금 보고 있는 강의의 상단 타이틀 이미지를 링크를 걸면

이미지 크기를 강제로 지정하고 싶은 경우

이렇게 강제로 크기를 지정할 수 있습니다.

크기를 강제로 지정할 경우 가로세로 비율이 무시디고 지정한 크기 안에 이미지가 들어가기 때문에 이미지가 왜곡되어 보일 수 있습니다.

크기값이 없는 경우 이미지는 1:1 크기로 브라우저에 표시됩니다.

이미지 가로/세로 비율은 유지한 채 가로 크기를 맞추려면 세로 크기 속성 없이 가로 크기만 표시하면 됩니다.

이렇게 하면 가로 크기는 410px 로 고정되고 세로 크기는 가로 크기가 줄어든 비율만큼 줄어듭니다.

원래 이미지 크기가 820px x 300px 였으므로 너비가 절반인 410px로 줄어들면 높이는 150px로 줄어들게 됩니다.

반대로

이렇게 높이값만으로 조절할 수도 있습니다.

사용 빈도가 다소 낮지만 이미지 태그에는 다양한 속성을 부여할 수 있습니다.

이미지 태그에서 사용할 수 있는 속성들은 다음과 같습니다.

속성	사용값	설명
width	픽셀	이미지 너비 지정
height	픽셀	이미지 높이 지정
src	URL	이미지 경로 지정
alt	문자열	이미지를 대체하는 텍스트 내용을 입력. 인터넷 회선 환경이나 브라우저 제약등으로 이미지를 표시할 수 없는 경우 대신해서 표시됩니다.
crossorigin	anonymous use-credentials	HTML5에서 새로 추가. 다른 사이트에서 스크립트로 쉽게 말하면 AJAX로 다른 사이트에서 스크립트를 통해 이미지를 끌어다 쓸 수 있게 허용할지 여부를 지정합니다.
ismap	ismap	이미지가 서버사이드 이미지맵의 일부인지 여부를 표시.
longdesc		이미지의 상세 설명을 담은 URL을 지정
sizes		각각의 페이지 레이아웃 크기별 이미지 크기 지정
srcset	URL	sizes 속성과 함께 사용 가능. 다양한 상황에서 사용할 수 있는 이미지 URL을 지정. 반응형 웹, 또는 다양한 해상도 지원을 해야하는 경우, 다양한 해상도의 이미지 아이콘 경로를 세트로 표시해 조건에 맞게 표시되도록 할 수 있습니다.
usemap	#mapname	이미지맵 ID를 지정
id	문자열	이미지 고유 ID 표시

속성들을 활용해 이미지 태그를 생성하면 다음과 같은 이미지 태그를 만들 수 있습니다.

사라진 속성들

HTML5 로 버전업되면서 이미지 태그에 사용하면 몇몇 속성은 더 이상 사용되지 않습니다.

align, border, hspace, vspace 와 같은 속성들은 더 이상 사용되지 않으며, HTML5 에서는 비표준입니다.

이런 속성들이 보이는 HTML 문서들은 구버전 문서입니다. 사용하지는 않더라도 이런 속성들이 있다는 것 정도는 알고 있어야 합니다.

태그 끝에 / 붙이기

HTML5 로 버전업되면서 또 달라진 태그 표준이 있습니다. 태그쌍 없는 단독 태그의 경우 과거에는 태그 끝 부분에 "/"를 써서 단독 태그로 끝난다는 표시를 일일이 해야 했으나, 이제는 더 이상 끝나는 "/" 표시를 하지 않습니다.

즉, <img ... /> 로 표기하던 태그는 <img ... > 로 사용하면 됩니다.