웹의 뼈대 HTML의 이해 - 이미지 태그와 하이퍼링크...

HTML의 이해 - 이미지 태그와 하이퍼링크 태그

최현종(서원대학교)

• 이미지 다루기 – 웹에서의 이미지 사용

• 인터넷에서 이미지 다루기 - 화질보다는 전송 속도가 중요 - 사용 가능한 파일 형식의 규정 (GIF, JPG, PNG)

• 이미지와 경로 - 웹 문서에 이미지 삽입 시 경로에 주의 - 경로 : HTML 문서에서 이미지 파일까지 어떻게 찾아갈 것인가 알려주는 일종의 주소 - 상대 경로 예) image/ccc.jpg - 절대 경로 예) http://comedu.seowon.ac.kr/~eridanus/ccc.jpg

HTML의 기초 2

– 이미지 삽입 - <IMG> 태그 • (형식) <IMG SRC=“파일경로”> • <IMG> 태그의 속성

속성 설명 속성값

SRC 이미지 파일의 경로 지정(필수 속성) 파일경로, URL

ALT 이미지 위에 마우스 커서를 올려놓았을 때, 간단한 설명글이 나타나도록 함

텍스트

ALIGN 이미지의 정렬 방법 지정 left, right, top, middle, bottom

BORDER 이미지 주위에 테두리선 그림 0(테두리 없음) 또는 숫자

HEIGHT 이미지의 높이 조절 픽셀 값

WIDTH 이미지의 너비 조절 픽셀 값

HSPACE 이미지의 좌우 여백 지정 픽셀 값

VSPACE 이미지의 상하 여백 지정 픽셀 값

<IMG> 태그 활용 예제

그림 10. <IMG> 태그

하이퍼링크 태그 링크 만들기 - <A> 태그

(형식) <A HREF=“연결 경로” 속성=“속성값”>텍스트</A>

<A> 태그의 속성

링크 색상 조절 <BODY> 태그의 링크 색상 관련 속성

속성 설명 속성값

HREF 연결할 문서의 경로나 홈페이지 URL 지정 문서 경로, URL

NAME 문서 내부에서 점프할 앵커 이름 지정 영문으로 된 앵커 이름

TARGET 링크된 내용이 열릴 대상을 지정 _blank, _parent, _self, _top

속성 설명

LINK 링크의 색상

VLINK 방문했던 링크의 색상

ALINK 링크를 클릭하는 순간의 색상

텍스트 링크의 색상 조절 예제

그림 11. 예제

이미지 링크 예제

그림 12. 예제

TARGET 속성 새로운 브라우저 창으로 링크 문서 열기

프레임으로 링크 문서 열기

TARGET 속성의 속성값

속성값 설명

_blank 새로운 브라우저 창을 열고 거기에 링크 내용을 표시

_self 현재 링크가 있는 브라우저 창에 표시 (TARGET속성의 기본 속성값)

_parent 프레임에서 사용

_top 프레임에서 사용

NAME 속성 문서 안의 지정한 위치로 이동

웹 문서가 길 경우, 문서 안에 위치를 지정해 놓고 그 위치로 한번에 이동할 수 있는 기능 (앵커)

(형식) <A HREF=“#앵커이름”> 텍스트 </A> 클릭할 곳에 …… <A NAME=“앵커 이름”></A> 이동할 곳에

앵커(anchor) 기능 예제

그림 13. 예제

여러 가지 링크 메일 링크

편리하게 메일을 보낼 수 있는 기능

(형식) <A HREF=“mailto:받을사람 메일주소”>텍스트</A>

사운드 재생 링크

다운로드 링크

여러 가지 링크 예제

그림 15. 예제

웹의 뼈대 HTML의 이해 - 이미지 태그와 하이퍼링크...

Documents

Transcript of 웹의 뼈대 HTML의 이해 - 이미지 태그와 하이퍼링크...