WEB/HTML

HTML - 그림과 링크

파이리파 2021. 4. 13. 15:32

1. 이미지 삽입

<img> - 종료태그 없이 사용

 

속성

 

• src ="이미지파일" -> 문서에 표시할 이미지 파일을 지정

일반적인 이미지 파일 형식(GIF/JPG/PNG)

HTML문서에 표시할 이미지파일의 이름/경로 지정(필수 속성)

 

 

• width="숫자" -> 이미지의 폭 지정(픽셀, %)

• height="숫자" -> 이미지의 높이 지정 (픽셀, %)

기본 출력 크기 - 이미지의 원본 크기 

속성 값 : 픽셀, %

폭과 높이 중에서 하나의 크기가 지정되면  나머지 하나의 값은 원본 크기에 비례해서 자동으로 지정

 

 

• alt="내용" -> 이미지가 표시되지 않을 때 대체될 텍스트

이미지가 화면에 표시되지 않거나 이미지가 깨지는 경우를 위해 사용

 

<body>
	<img src="flower.jpg"><br/>
	
    <img src="flower.jpg" width="100" height="100">
	
    <img src="flower.jpg" width="100">
    
    <img src="flower.jpg" width="30%" border="5">
    
    <img src="tulip.jpg" alt"새노란 튤립꽃입니다.">

</body>

• usemap="#맵이름" -> 클라이언트 측의 이미지맵 지정