HTML 기초, <img>태그와 src, alt, border 속성 (11번째)

저의 HTML 공부를 도와주고 있는 '행복해지는 HTML+Css+Javascript'의 HTML 과정이 벌써 1/3 가량 진행했네요.

아직 많이 남았지만 스킨을 만들 생각하니까 설렘설렘. *-_-* 오늘도 열심히 배워봅시다!

기본태그와 텍스트에 대해서 공부하고 이제 이미지태그를 공부할 차례입니다. 오오! 이미지태그라니 z(+_+)b

그럼 시~작 ♬♪

 

HTML 기초, <img> 태그와 scr, alt, border 속성

 

◎ <img> 태그

 

인터넷이 지금과 같은 인기를 끌 수 있게 된 이유는 다양한데요. 그 중 하나는 이미지 / 동영상 / 오디오 등

멀티미디어 데이터를 쉽게 접할 수 있었기 때문입니다. 인터넷 환경에서는 책과 다르게 정보만 빠르게 습득하고 빠지는분들이

많아서 지루한 글이나 이미지가 없는글은 아무리 좋은 내용이라도 읽히지 않는 불상사가 생길 수 있다고 생각합니다.

저도 그렇게 생각하거든요. 전부는 아니지만!

 

<img> 태그의 속성

 

태그	속성	속성값	설명
IMG	src	이미지 파일 경로	HTML 문서에 표시할 이미지 파일의 경로를 지정
	align	문자열	이미지 정렬 방식을 지정
	alt	문자열	이미지 설명 문장을 지정
	width	숫자	이미지 폭 지정
	height	숫자	이미지 높이 지정
	border	숫자	이미지 테두리 두께 지정
	hspace	숫자	이미지 좌우 여백 지정
	vspace	숫자	이미지 상하 여백 지정

 

◎ 이미지 삽입을 위한 src 속성

 

HTML에서 자주 사용하는 이미지 파일인 gif, jpeg 파일은 웹 브라우저에서 바로 인식 할 수 있는 파일입니다. <img> 태그의

'src' 속성에 이미지 파일(gif, jpeg)의 경로명을 지정하면 원하는 이미지를 웹 브라우저를 통해 볼 수 있습니다.

 

이미지를 삽입하거나 관리하기 위해 관련되는 태그는 image의 약어 <img>태그를 사용합니다.

 

예문)

 

<img src="이미지 파일명">

 

 

 

# 상대 경로, 절대 경로

 

<img> 태그를 사용해 홈페이지에 이미지를 넣을 수 있습니다. 이미지가 출력되도록 하기 위해서는 src 속성에 파일 경로명을

지정하면 됩니다. 하지만, 경우에 따라서 웹 브라우저에 이미지가 나타나지 않는 경우가 생깁니다.

이는 이미지를 삽입할 때 경로를 정확하게 지정하지 않았기 때문인데요.

 

"images\와장창 짤.jpg"와 같이 HTML 문서가 저장된 위치를 기준으로 경로를 기술하는 것을 상대 경로라 하고, 

"c:\Users\bong\Document\html_work\images\와장창 짤.jpg"와 같이 루트 디렉토리부터 해서 일일이 경로를

지정하는 것을 절대 경로라고 합니다.

 

 

 

◎ 이미지에 설명을 나타내는 alt 속성

 

alt 속성을 사용하면 이미지를 웹 브라우저에 삽입한 후 마우스를 이미지에 가져가면 설명이 도움말처럼

나오게 할 수 있습니다. 이미지 파일이 크면 인터넷에서 로드하는 시간이 길어 질 수 있습니다. 이때 alt 속성을 사용하면

이미지가 나타나기 전에 어떤 그림인지를 설명을 통해 알 수 있도록 할 수 있습니다.

 

예문)

 

<img src="이미지 파일명" alt="이미지 파일의 설명">

 

 

 

 

◎ 이미지의 테두리선을 변경하는 border 속성

 

<img> 태그에서 border 속성을 주어 이미지의 테두리선을 지정해 줄 수 있고 그 선의 두께도 조절할 수 있습니다.

두께는 픽셀 단위로 설정합니다.

 

예문)

 

<img src="이미지 파일명" border="픽셀수">