데브렉 동영상 강의

HTML/CSS/JAVASCRIPT 강의실

인터넷 개요/네트워크개요/HTML/CSS/JAVASCRIPT 강의실입니다. 기초 및 활용에 대한 코드조각을 모아 놓은 게시판입니다.

시삽: 레드플러스 님

게시판 이동:

제목 : 8일차 강의내용 - 그림 연결

글번호:

작성자:

관리자

작성일:

2001/01/12 오전 1:30:00

조회수:

6301

파일:

GSY.jpg (28 KB) / 전송수: 3022

HTML

학습내용 : HTML 그림 연결 태그 (2001/01/11) UPDATE(2001/03/12)

<IMG> 태그
사용법	<IMG SRC="그림 파일의 이름">
설 명	그림을 HTML문서에 연결할 때에 사용한다.
예 제	그림을 연결할 때는 웹사이트에 있는 그림을 연결할 때면, 해당사이트의 주소와 그림파일 이름을 연결시켜주면 되고, 자신의 경로에 있는 그림을 연결할 때는, 주로 images라는 폴더를 만들어서 사용한다.
속 성	ALIGN =left, right, top, texttop,middle,absmiddle, baseline, bottom, absbottom 한 줄Line에서 그림의 위치와 글자에 대한 상대적 높낮이를 결정한다. ALT=설명 그림에 대한 풍선도움말 ToolTip을 지정한다. ISMAP 다른 곳에서 이미지맵<MAP>을 불러들일 때에 사용한다. <A HREF="http://machine/htbin/imagemap/sample"> <IMG SRC="sample.gif" ISMAP></A> 위처럼 사용할 수 있는데, 주의할 것은 HTTP server에 이미지맵을 조정할 수 있는 cgi-bin software가 설치되어 있어야 한다는 것이다. SRC=주소 그림이 위치한 주소를 지정한다. WIDTH=값, HEIGHT=값 그림의 가로, 세로의 길이를 지정한다. 이 때, 그림이 가지는 고유의 값을 지정할 수도 있고, 축소 또는 확대하여 나타낼 수도 있다. 길이를 지정하는 것이 그림이 떠오르는 시간을 줄일 수 있다. BORDER=값 그림의 테두리를 설정한다. VSPACE=(세로)값, HSPACE=(가로)값 그림과 글자간의 가로와 세로의 간격을 지정한다. LOWSRC 이것은 다음과 같이 사용하는데, <IMG SRC="high.gif" LOWSRC="low.gif"> HTML에 접속하면, 브라우저는 먼저 LOWSRC에 지정한 그림을 나타나게 하고,모든 문서가 다 나타났을 때, 그 그림 위에 SRC에서 지정한 그림이 나타나도록 한다. 이 때, 두 그림의 길이를 지정하지 않았다면, LOWSRC의 원래 크기에 해당하는 크기에 맞추어 SRC에서 지정한 그림이 드러나도록 한다. NAME HTML문서상에서의 그림의 이름을 지정한다.

이미지 포맷 형태

그래픽의 포맷 형태에는 수많은 저장 형식이 있는데 이는 엄밀히 말하자면 그래픽을 압축하는 기술의 차이에서 오는 확장자의 형식이라 말할 수 있다.
즉 어떠한 그래픽을 저장할때 압축방식에 따라 포맷이 달라지는 것이다.

일반적으로 고급의 이미지들을 전달하려면 파일의 크기가 크지고 복잡하게 된다.
결국 통신이란 전화선 이라는 전송방식 안에서 이러한 이미지들을 전달해야 하는 문제때문에 보다 작은 크기의 그래픽 파일이 필요로 하게 된다.

인터넷 상에는 GIF 포맷과 JPEG(JPG)포맷만이 지원된다.
사진처럼 색상에 음영도 많고 그라데이션도 사용하는 복잡한 이미지의 경우 ,GIF보다는 JPEG이 파일 크기를 훨씬 작게(보기에도 좋게)만들어 준다.

한편, GIF는 색상 수도 적고 밋밋한 이미지(아이콘.도표...)에 대해 파일 크기도 더 작고 이미지의 질도 더 좋게 만들어 준다. JPEG는 24비트 색상(1670만 색상) 을 지원하는 반면에 GIF는 8비트 색상(256 색상)만을 지원 할 수 있다,

저장방식	설명
GIF	GIF(Graphic Interchange Format)포맷은 컴퓨서브(Compuserve)라는 미국통신망 회사에서 전화선을 통해 그래픽 이미지 파일을 신속히 교환할 목적으로 개발한 것이다. GIF 파일은 그림을 매우 효과적으로 압축 할 수 있는 LZW압축포맷으로 저장하기 때문에 그래픽 파일을 다운로드 하는데 비교적 적은 시간이 소요된다. GIF포맷의 최대 장점은 컴퓨터 시스템의 종류에 상관없이 잘 작동한다는 것이다. 일반적으로 GIF는 256컬러 이상은 지원하지 않으나, 최근 발표된 GIF24라는 표준은 24비트 이상의 해상도를 지원한다고 한다. GIF 파일 포맷에는 두가지의 저장방식이 있다. GIF89a와 GIF87a가 그것인데 이 두가지의 차이점은 투과성과 인터레이스 방식이 있느냐 하는 차이다. GIF89a는 투과성과 인터레이스 방식(이미지가 점진적으로 뚜렷해지는 현상)의 에니메이션이 지원된다. GIF87a는 일반적인 GIF저장방식이다. GIF 이미지 포맷의 단점은 색상수의 한계(256 색상)로 JPEG 이미지 보다 색상이 어둡거나 거칠게 표현된다. GIF이미지는 웹페이지에서 아이콘, 로고, 선 등의 비교적 간단한 이미지를 표현 하는데 사용한다. 최근 24비트 이상을 지원하는 GIF24의 출시로 나아질 전망이다. 포맷을 지원하는 일반적인 프로그램 으로는 Adobe Photoshop, Paint Shop Pro, Gif Construction Set 등 여러가지가 있다.
JPEG	JPEG(Joint Photographic Experts Group)은 해상도가 매우 높고(24비트 이상 지원)압축 효율도 놀랄만 하여 대부분의 전문가들이 선호하는 그래픽 포맷이며, 압축률의 정도를 사용자가 정할 수 있다. 무엇보다 큰장점은 일반적으로 1/10이상의 압축률로 인해 용량이 큰 사진등의 이미지를 웹 페이지에 사용 할때 유용하게 사용 할 수 있다. 현재 JPEG이미지를 지원하는 웹브라우저가 늘어나는 추세 이므로 활용 빈도가 늘어나고 있디.(현재 대부분의 웹브라우저가 지원) JPEG는 그렇게 기본적이 아니라고 생각되는 이미지 정보의 부분들을 없애 버리므로써 이미지를 압축한다. 이런 종류의 압축체계는('손실이 많은 압축'이라고 함)아주 많은 압축 단계를 수행 하게 되지만, 이미지의 질에 있어서, 특히 선명한 윤곽 부분에서 질이 조금 떨어지게 된다. 그러나 윤곽이 선명하지 않은 사진같은 이미지들에 있어서는 이정도의 압축으로 생기는 손실 효과는 눈에 띄지 않는다. 최근에 넷스케이프와 그밖의 브라우저 제조업체들이 인터레이스 방식을 첨가시킨 Progressive JPEG를 지원하기 시작했다. 포맷을 지원하는 일반적인 프로그램 으로는 Adobe Photoshop, Paint Shop Pro등 그래픽 프로그램의 대부분이 지원한다.
기타	TIF, EPS 같은 포맷도 이론적으로는 제공될 수도 있어나 실제 사용은 하지 않는다.

그래픽 포맷의 특징
	GIF87a	GIF89a	JPEG	Progressive JPEG
대부분의 브라우저들에 기본적으로 탑재	*	*	*	*
손실이 없는 압축	*	*
투명한 배경 지원		*
인터레이스 방식 지원	*	*
에니메이션 지원		*
표현 가능한 최대 색상수	256	256	16.7만	16.7만

※ 학습정리

※ 관련문제

※ 참고문헌/사이트

태그사전

HTML Reference Library 4

(댓글을 남기려면 로그인이 필요합니다.)

관련 아티클 리스트
	제 목	파일	작성자	작성일	조회
	8일차 강의내용 - 마퀴 태그(움직이는 문자)	-	관리자	2001-01-12	7361
	8일차 강의내용 - 그림 연결		관리자	2001-01-12	6301
	예제. 022. 이미지연결하기(IMG태그).htm		레드플러스	2003-05-14	5742
	Re : 위 예제에서 사용된 이미지		레드플러스	2003-05-14	4779
	이미지 자동 생성 사이트	-	레드플러스	2013-06-29	3881
	img 태그를 사용하여 이미지 표현하기		레드플러스	2015-05-28	3273
	7일차 강의내용 - HTML 사이트 연결 태그 - UPDATE(2001.03.12)	-	관리자	2001-01-12	6397

.NET Korea

HTML/CSS/JAVASCRIPT 강의실