[HTML] 이미지(Image) :: <img> 태그

이미지(Image)

<img>

• 단독 태그

 

img 태그 속성

1. img.src
   • source
   • 이미지 파일 URL
   • 필수 속성
2. img.alt 
   • alternate text → 대체 텍스트
   • 이미지를 대신해서 출력할 문자열
   • 필수 속성(이지만 안 써도 됨)

alt 속성 적용 예시

3. img.width
   • 선택 속성
4. img.height
   • 선택 속성

 

<h1>이미지</h1>
	 
<img src="images/switzerland.jpg" alt="스위스">

<hr>

<img src="images/switzerland.jpg" width="427" height="640">

<hr>

<img src="images/switzerland.jpg" width="854" height="1280">

<!-- <img src="images/푸바옹.jpg" alt="푸바오"> -->	 

<hr>

<!-- 원본의 종횡비 427:640 -->
<img src="images/switzerland.jpg" width="500" height="200">

<hr>

<!-- width or height 값만 넣어도 다른 값은 원본 비율에 맞춰 자동 계산되어 설정된다. -->
<img src="images/switzerland.jpg" height="320">

<hr>

<!-- 아쉽게도 border 색상은 변경 불가하다.(black 고정) -->
나도 보내줘 스위스.나도 보내줘 스위스.나도 보내줘 스위스.나도 보내줘 스위스.나도 보내줘 스위스.
<img src="images/switzerland.jpg" border="5" hspace="50" vspace="50">
Switzerland 가고싶다.Switzerland 가고싶다.Switzerland 가고싶다.Switzerland 가고싶다.

 

HTML 속성의 2종류
1. 필수 속성(Required): 반드시 작성해야 하는 속성
2. 선택 속성(Optional): 필요하면 작성하는 속성

 

*글 작성에 참고한 내용: 학원 쌤의 열정적인 수업