본문 바로가기

WEB/HTML

HTML - 그림과 링크

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="#맵이름" -> 클라이언트 측의 이미지맵 지정

 

 

 

'WEB > HTML' 카테고리의 다른 글

<iframe> 태그와 이미지 맵  (0) 2021.04.13
HTML - 하이퍼링크 삽입  (0) 2021.04.13
콘텐츠 그룹핑  (0) 2021.04.13
목록 지정  (0) 2021.04.13
글자 스타일 지정  (0) 2021.04.13