이미지 표시하기
웹 문서에 이미지를 추가할 때는 <img> 태그를 사용합니다. 이 태그는 닫는 태그를 사용하지 않는 단일 태그이므로, 태그와 태그 사이에 콘텐츠를 입력할 수 없습니다. <img> 태그를 사용해서 표시할 이미지를 지정할 때는 src 속성에 이미지의 URL을 입력하는 방식을 사용합니다.
<img src="IMAGE_URL">
URL(Uniform Resource Locator)은 인터넷에서 웹 페이지, 이미지, 비디오 등 리소스의 위치를 가리키는 문자열을 말합니다. 이미지를 표시하기 위해서는 우선적으로 표시할 이미지가 실제로 존재해야 하고, 해당 이미지가 존재하는 위치와 이미지 파일의 이름 등을 입력해야만 웹 페이지 화면을 통해 원하는 이미지를 확인할 수 있습니다.
이 글이 게시되어 있는 '위키독스' 서버에 있는 이미지 중 하나의 URL을 <img> 태그의 src 속성에 지정하고 그 결과를 확인해 보았습니다.
<body>
<h1>대표이미지</h1>
<img src="http url">
<p>이미지 설명</p>
</body>파일 위치 지정하기
src 속성에 웹 서버 주소가 아닌, 사용자의 컴퓨터에 저장되어 있는 이미지 파일의 위치를 지정해 이미지를 표시하는 경우도 있습니다. 이때에는 다음과 같은 방법들을 이용해 정확한 URL을 지정해주어야 합니다.
이미지가 웹 문서와 같은 폴더 내에 있을 때
이미지가 HTML 문서와 같은 폴더에 있을 때는 단순하게 이미지 파일의 이름만 작성해 주거나, ./ 문자열을 사용해서 '동일한 폴더에 있다'라는 것을 표시해줍니다. 파일명은 penguin.png라고 가정합니다.
<img src="penguin.png">
또는
<img src="./penguin.png">
이미지가 웹 문서의 상위 폴더 또는 하위 폴더에 있을 때
이미지가 HTML 문서의 상위 폴더에 있거나 하위 폴더에 있을 때는 이를 표현할 수 있는 문자열을 추가해서 상대적인 위치를 명확하게 입력해주어야 합니다.
상위 폴더에 있을 때는 파일명 앞에 문자열 ../을 추가해 '한 단계 위 폴더에 있다'라는 것을 명시해줍니다.
<img src="../penguin.png">
하위 폴더에 있을 때는 파일명 앞에 하위 폴더의 이름을 적어줍니다.
<img src="하위폴더명/penguin.png">
또는
<img src="./하위폴더명/penguin.png">
절대 경로를 지정할 수도 있다
이미지가 HTML 문서의 위치와 많이 동떨어진 폴더에 위치한 경우도 있을 수 있습니다. 그럴 때는 ../이나 ./과 같이 상대성을 나타내는 문자열을 사용하기 보다는 이미지 파일의 '절대 경로'를 기입해서 이미지를 표시할 수도 있습니다. 예를 들어 C드라이브 폴더 안에 있는 images라는 이름의 폴더에 이미지가 저장되어 있다면, 다음과 같이 태그를 작성하면 됩니다.
<img src="C:₩images₩penguin.png">예시에서는 절대 경로 표현 시 폴더의 경계를 표시할 때 ₩ 기호를 사용했지만, 윈도우, 맥 등 운영체제에 따라서 사용하는 기호가 달라질 수 있습니다. 예를 들면 윈도우에서는 ₩를 사용하고 맥에서는 /를 사용하는 식입니다.
대체 텍스트 추가하기
<img> 태그의 alt 속성은 이미지의 대체 텍스트를 입력하는 속성입니다. 대체 텍스트란 이미지가 아직 로드되지 않았거나 이미지 로드에 실패한 경우 이미지를 대신해 표시될 텍스트를 말합니다. 아래 예제는 실제 이미지 파일명이 penguin.png인 상황에서 <img> 태그를 두 번 사용한 예입니다.
<body>
<img src="penguin.png" alt="이미지를 대신해 내가 등장!">
<img src="no_penguin.png" alt="이미지를 대신해 내가 등장!">
</body>
위 예제에서는 <img> 태그를 두 번 사용했지만, URL을 바르게 입력한 경우에만 이미지가 표시되고 잘못 입력했을 때는 대체 텍스트가 표시되는 것을 확인할 수 있습니다.
이미지의 크기 정하기
<img> 태그는 기본적으로 이미지를 원본 크기 그대로 표시한다는 특징이 있습니다. 만일 이미지의 원본 크기가 너무 크거나 작아서 불편하다면, 사용자는 <img> 태그의 width와 height 속성을 활용해 화면에 표시될 이미지의 크기를 적절하게 변경할 수 있습니다.
width와 height에는 속성값으로 정수값을 입력합니다. 입력된 정수값은 너비(width)와 높이(height) 각각에 대해 픽셀(px)단위로 적용됩니다.
<body>
<img src="penguin.png" width="250" height="100">
<img src="penguin.png" width="100" height="100">
</body>