이미지 태그

<Do it! HTML5+CSS3>을 기본으로 배운 내용입니다.

1) 웹에서 사용하는 이미지 형식
2) 이미지 태그

이미지

1) 웹에서 사용하는 이미지 형식

- 비트맵 이미지(bitmap image)

작은 크기의 비트맵 이미지를 크게 확대해 나타내면 이미지 테두리 부분이 울퉁불퉁해질 수 있다.

파일 형식	설명
GIF(Graphic Interchange Form)	- 표시할 수 있는 색상 수가 최대 256가지뿐이다. - 다른 이미지 파일 형식에 비해 파일 크기가 작기 때문에 아이콘이나 불릿 등 작은 이미지에 주로 사용된다. - 투명한 배경이나 움직이는 이미지를 만들 수 있다.
JPG/JPEG(Joint Photographic Experts Group)	- 사진을 위해 개발된 형식이다. - GIF보다 다양한 색상과 명암을 표현할 수 있다. - 저장을 반복하다 보면 화질이 떨어질 수 있다.
PNG(Portable Network Graphics)	- 투명 배경을 만들면서 다양한 색상도 표현할 수 있다. - 네트워크용으로 개발되었기 떄문에 최근 많이 사용한다.

- 벡터 이미지(vector image) : SVG

벡터 이미지는 이미지를 아무리 확대하거나 축소해도 원래의 깨끗한 상태 그대로 유지되는 이미지이다.
SVG이미지는 크기를 조정해도 이미지가 깨지지 않고 꺠끗이 유지되기 떄문에 로고나 아이콘에서 많이 사용되며 최근 많은 관심을 끌고 있는 데이터 시각화에서 차트나 다이어그램, 지도 등을 구현할 때도 많이 사용된다.
SVG이미지는 복잡한 데이터를 웹에 표현해 주는 d3.js나 Raphael.js같은 자바스크립트 라이브러리에서 차트나 그래프를 표현하는 방식이다.
SVG이미지는 <img>태그를 이용해 파일 형태로 삽입할 수도 있지만 태그를 이용해 직접 만들 수도 있다. 그래픽 편집 프로그램뿐만 아니라 웹 브라우저나 문서 편집게에서도 이미지를 편집할 수 있다.

<head>
  <script src="modernizr-custom.js"></script>
</head>
<body>
  <img src="이미지.svg">
  <script>
    if (Modernizr) {
      //SVG기능을 지원할 경우
    } else {
      //지원하지 않을 경우
    }
  </script>
</body>

2) 이미지 태그

- <img> 태그

웹 문서에 이미지를 삽입할 때 사용하는 태그이다.

src속성을 사용해 이미지 파일이 있는 경로를 알려 주어야 화면에 이미지를 표시할 수 있다.

<img src="경로" [속성="값"]>

- <img> 태그와 사용하는 속성들

속성	설명
src 속성	이미지를 웹 문서에 넣으려면 src 속성에 정확한 파일 경로를 지정해야 한다. 1. 내 컴퓨터의 이미지 파일 경로 지정 <img src="images/lotus.jpg"> 2. 웹 상의 링크를 복사해 이미지 경로 지정 <img src="http://www.~~~.jpg">
alt 속성	이미지를 설명하는 대체 텍스트를 삽입할 때 사용한다. <img src="home.jpg" alt="홈으로 가기">
width, height 속성	이미지 파일을 브라우저 창에 원하는 크기로 조정해 넣고 싶을 때 사용한다. <img src="이미지 경로" width="넓이 크기" height="높이 크기">

저작자표시 비영리 변경금지

'💻WEB FrontEnd > HTML5' 카테고리의 다른 글

폼, 드롭다운 목록 (0)	2020.07.07
하이퍼링크 태그 (0)	2020.07.06
텍스트, 목록, 표 관련 태그 (0)	2020.07.05
웹 호스팅 (0)	2020.07.05
HTML 문서 기본 구조, 특수 문자표 (0)	2020.07.05

winnih_B

LINKS

CATEGORY

이미지 태그

이미지

'💻WEB FrontEnd > HTML5' 카테고리의 다른 글

티스토리툴바

이미지 태그

이미지

'💻WEB FrontEnd > HTML5' 카테고리의 다른 글

'💻WEB FrontEnd/HTML5' Related Articles

티스토리툴바