HTML에 이미지는 삽입되지 않는다, 링크될 뿐

HTML 이미지 태그 <img> 사용 방법

 

src 속성, alt 속성

1. HTML 태그와 필수 속성, src, alt

이미지 태그는 HTML 문서의 외관을 꾸미는 용도로 사용하는 태그이다.
<img> 태그는 웹 페이지에 이미지를 삽입하기 위해 사용된다.
그러나 이미는 웹 페이지에 삽입되지 않는다. 이미지는 웹 페이지에 링크될 뿐이다. 링크는 반드시 경로를 수반한다. 그리고 img태그에는 경로(src), 즉 속성 src는 필수 속성이다.

통사론 < img src =" url " alt =" alternatetext " >

위 태그에서 속성 src는 소스(source)의 약자이며 이미지의 위치(경로)를 지정한다.
다시 말하면 이미지의 위치(경로)를 링크하는 것이다.

2. img 태그는 빈 태그이다.

<img> 태그는 속성만 포함한다.
속성만 포함한다는 말은 닫는 태그가 없다는 말이다. 즉 img 태그는 빈 태그(empty element)이다.

<img> 태그에는 또 하나의 필수 속성이 있다. (img 태그는 2개의 필수 속성을 가진다)

3. alt 속성

또 하나의 필수 속성은 alt 속성이다.
이 alt 속성은 대체 텍스트를 지정한다.

3-1) alt의 뜻

alt는 alternative(뜻=대체 가능한, 대안이 되는)의 약자이다.
alternative의 뜻 그대로 '대체 텍스트'로 번역된다.
그 의미는 두 가지다
하나는 전 세계의 시각 장애인을 위해 제시되는 대체 텍스트이고
둘째는 이미지가 손상되거나, 경로 이탈하거나, 유실되었을 경우 텍스트로 설명해주는 역할을 한다. 그러므로 대체 텍스트 속성은 이미지를 안 보고도 그것을 이해할 수 있을 만큼 정확하게 적여야 한다.

3-2) alt 속성을 표시하는 방법

alt 속성을 표시하는 방법은 다음과 같다.

< img src ="img_1.jpg" alt ="Flower in Korea" >

4. 이미지의 크기를 지정하는 2가지 방법

1. style 속성 사용 방법

style 속성을 사용하여 이미지의 크기(너비와 높이)를 지정하는 방법이 있다

< img src ="img_1.jpg" alt ="dog of korea" style ="width:600px;height:400px;" >

2. width 및 height 속성 사용

< img src ="img_1.jpg" alt ="dog of korea" width ="600" height ="400" >

width 및 height 속성에서 단위가 없으면 언제나 픽셀이다.
너비와 높이를 지정하지 않으면 이미지가 로드되면서 페이지가 깜박거릴 수 있다.

위에서 보았듯이 이미지의 크기 속성으로는 width , height 및 style 모두 HTML에서 유효하다.
그러나 가급적 style 속성을 사용하는 것이 좋다.

크기를 지정하는 속성 값이 없으면 이미지는 원래 크기대로 브라우저에 표시된다.
이미지의 크기를 강제로 지정하고 싶다면, 지정이 가능하다.

<img src="1.jpg" witth="600" height="400"

강제로 지정할 경우 가로 세로 비율 무시되고 지정한 가로 세로 사이즈로 표시된다.
가로 세로 비율 유지하겠다면, 가로 크기만 적어주면 된다. 줄일 때도 마찬가지다.

큰 이미지는 로드하는 데 속도가 느려지고 시간이 많이 걸린다.
그러므로 이미지 최적화 후 사용하는 것이 웹페이지에 유리하다.

5. 이미지 태그의 속성들

아래 중에서 width, height, src, alt, id 가 주로 쓰이고 나머지는 잘 안 쓰인다.

속성	사용값(단위)	내용
width	픽셀	폭
height	픽셀	높이
src	URL	경로(위치)
alt		대체 텍스트
srcset	URL	sizes 속성과 함께 사용 가능함. 반응형 웹, 또는 기타 해상도로 이미지를 표시해야 하는 경우, 해상도별 경로를 표시
id	문자열	이미지 고유 ID 표시
crossorigin	anonymous use-credentials	타 사이트에서 스크립트로 (canvas) 안에 이미지를 끌어오는 것을 허용할지 여부 지정
ismap	ismap	이미지가 서버사이드 이미지맵 일부인지 표시
이하 생략

6. 기타 참고사항

1. 다른 폴더의 이미지 소스 표시 방법

< img src ="/images/1.gif" alt ="진도의 개" style ="width:256px;height:256px;" >

2. 다른 웹사이트의 이미지 소스 표시 방법

<img src="https://www~~.com/images/2.jpg" alt="진도의 개">