[15] 이미지 삽입과 링크걸기 (hompi)

No, 15

이름: Master

2005/3/18(금)

이미지 삽입과 링크걸기

<img>
Img 는 금방알수 있듯이 Image 의 약자이며, 속성중의 하나인 src(source)를 사용하여 문서에 그림을 삽입할 수 있도록 해줍니다. 기본 형태는 <img src="파일명"> 이고, 종료 태그는 없습니다.

그외 속성에는 border, width, height, hspace, vspace, alt등이 있습니다.
src 이미지의 경로와 파일명을 지정합니다.
border 이미지의 테두리 두께를 설정합니다. 기본값은 border="0" 입니다.
width 이미지의 너비를 설정합니다. 픽셀이나 퍼센트(%)로 설정할수 있습니다.
height 이미지의 높이를 설정합니다. 픽셀이나 퍼센트(%)로 설정할수 있습니다.
hspace Horizental Space 이며, 이미지의 좌우여백을 줄수 있습니다.
vspace Vertical Space 이며, 이미지의 위, 아래여백을 줄수 있습니다.
alt alt속성에 이미지에 대한 설명을 지정할수 있으며, alt값을 써주면 마우스 커서가 이미지 위에 위치할 때 지정한 설명이 나타납니다.

웹문서에 쓰이는 이미지

웹 문서에 삽입할 수 있는 이미지 형식에는 BMP, JPG, GIF 등이 있으나, 대부분 JPG나 GIF파일을 사용합니다.
BMP는 화질은 좋으나 압축이 되어 있지 않은 상태라 용량이 크므로 거의 사용되지 않습니다.
GIF는 256색만을 사용할수 있지만 투명하게 만들수 있고 여러개의 파일을 묶어서 움직이는 그림을 보여줄수 있습니다.
JPG는 16만 칼라를 모두 사용할수 있으며, 압축률이 높아서 전송속도가 빠릅니다.

이미지를 클릭하여 다른문서를 뜨도록 할수 있는데 다른 문서를 링크하는 방법은 <a>태그 뒤에 <img>태그를 삽입하는 것입니다.

기본 형식은 <a href="링크할 파일명이나 URL"><img src="그림파일명"></a> 입니다.

예문을 통해서 이미지를 삽입하는 법과 링크거는 방법을 보겠습니다.

이미지를 삽입하고 border와 alt를 적용했습니다.
<img src="sky.jpg" border="10" alt="가을 하늘">

엠파스 로고이미지에 엠파스 홈페이지를 링크시킨경우입니다.
<a href="http://www.empas.com"><img src="empas.gif" border="0" alt="엠파스"></a>

img align=left 이미지의 왼쪽에 문자열을 정렬합니다.
right 이미지의 오른쪽에 문자열을 정렬합니다.
center 이미지의 중간에 문자열을 정렬합니다.
top 이미지의 제일 상단과 문자의 상단을 맞춥니다.
texttop 영문에서 g 보다 f 가 더 위로 튀어나온 것을 볼수 있는데 위로 올리간 문자의 맨위와 이미지의 상단을 맞춥니다.
middle 문자열의 밑선을 이미지의 가운데에 맞춥니다.
absmiddle 문자열의 가운데를 이미지의 가운데에 맞춥니다.
bottom 이미지의 하단과 문자열의 하단을 맞춥니다.
baseline bottom과 같은 역할을 합니다.
absbottom 영문문자열에서 해당되며, fight 라는 단어를 쓸때 f 보다 g 가 더 밑으로 내려와 있으므로 g 의 밑선과 그림의 하단을 맞춥니다.

번호	제 목	첨부		이름	작성일	조회
홈페이지 관리나 컴퓨터와 관련된 자료실입니다.
17	랜선 - 다이렉트 케이블			Master	03/28-17:41	4561
16	ws-ftp 공개버젼	ws-ftp.zip(666KB)		anddei	10/14-16:45	2649
15	이미지 삽입과 링크걸기			Master	03/18-16:00	10519
14	다른 문서에 링크걸기			Master	03/18-15:59	7815
13	배경에 음악을 삽입할수 있습니다.			Master	03/18-15:50	4386
12	이미지를 원하는 곳에 위치시킬수 있습니다.		24	Master	03/18-15:50	8494
11	이미지맵 만들기			Master	03/18-16:05	9287
10	marquee사용법			Master	03/18-15:47	5627
9	그림판에서 사진용량 줄이기			Master	03/18-15:46	24030
8	photoshop 에서 사진 용량 조절		14	Master	03/18-15:45	5305