[HTML] 이미지 태그, <img> 태그

<img> 태그

- image

- 해당 위치에 이미지를 출력하는 역할

- 단독 태그

- 인라인 태그

<img> 속성

1. src

- source

- 이미지 파일의 URL(상대, 절대, 외부)

2. alt

- Alterante Text

- 대체문자열

- 이미지를 출력하지 못하면 대신 보여주는 텍스트

- 이미지를 대변하는 메타정보로도 사용된다.

 

 <h1>고양이</h1>

 

 <img src ="../images/cat01.jpg" alt ="야옹이">

 <img src ="../images/cat02.jpg" alt="고양이">

 <img src ="../images/cat03.jpg">

  

 <img src ="/WebClientTest/images/cat01.jpg" width="500" height="376">1

 <img src ="images/cat01.jpg" width="25" height="94">

 

 <!-- width나 height 중에 하나만 명시되어 있으면 나머지 값은 원본의 종횡비를 기준으로 자동으로 계산된다. -->

 <img src ="images/cat01.jpg" width ="50">

 

 <h1>A.</h1>

 <img src ="images/cat01.jpga" width ="250" height ="188">

 

 <h1>B.</h1>

 <img src ="images/cat01.jpga" >

 

 <h1>링크</h1>

 

 

 <a>태그는 인라인태그

 -> 인라인 태그는 자식으로 인라인태그만 올 수 있다.

 

<a href="#">고양이</a> <!-- 텍스트 링크 -->

<a href ="#"><img src="images/catty01.png" border = "0"></a>

 

 

 웹에서 사용가능한 이미지 파일 포맷

 - jpg(jpeg), gif, png

 

 이미지 포맷

 1. 래스터 방식

  - 비트맵 이미지

  - 흔히 우리가 사용하는 이미지

  - 사진, 아이콘 등..

  - 이미지 정보를 화소로 저장

  - 장점 : 디테일한 이미지(사진)

  - 단점 : 확대/축소 취약 > 이미지 열화(품질 저하)

  a. jpg(jpeg)

  - 사진 표현

  - 손실 압축 방식

  - 16만 색상 지원

  b. gif

  - 비손실 압축 방식

  - 최대 256색상 지원

  - 아이콘, 그래프 표현

  - 투명 레이어 지원

  - 애니메이션 지원 -> Animated GIF

  c. png

  - 비손실 압축 방식

  - jpg + gif > gif 폐기 > png 대체

  -------------------------------------------웹 공식 지원

  d. bmp

  - MS 자체 포맷

  - 그림판

  - 브라우저 지원함(공식X)

 2. 벡터 방식

  - 플래시, 일러스트레이터

  - 아이콘, 그래프

  - 수학 공식으로 저장

  - 폰트

  - 장점 : 확대/축소 품질 변화 없음

  - 단점 : 디테일한 이미지 표현 불가능

  - HTML5 > SVG(XML)

<rectangle point = "100,200" width="300" height="200">