인터넷프로그래밍 #2-2 링크태그와 이미지태그

 

인터넷 프로그래밍
2-2 링크태그와 이미지태그

 

단원 목표

1. 링크태그의 사용법 설명하기
2. 이미지태그의 사용법 설명하기
3. 이미지를 활용한 책갈피(Bookmark) 구성하기 

 

 

 

링크태그
하이퍼링크(Hyperlink)
-클릭하면 다른 문서로 이동.
-링크 위로 마우스를 이동하면 화살표가 작은 손모양으로 바뀜.
ex) <a href="URL"> 링크요소 </a>
*Anchor 의 약자 a 의 의미로 '닻'이라는 의미. 다른 곳으로의 이동을 의미함.
*href는 Hypertext Reference 의 약자로 연결될 곳의 참조 주소
*링크요소는 텍스트, 이미지 등 다른 html요소가 될 수도 있음

 

절대주소와 상대주소
URL(Uniform Resource Locator)
절대주소(Absolute Address)
-파일의 전체 주소로 표시함
ex) http://www.google.com/index.html
상대주소(Relative Address)
-파일의 상대적인 위치로 표시함
ex) images/google.png

 

대상(Target) 속성
-기본값(default)은 현재창임.
종류
1. _self 기본값. 클릭한 것과 동일한 창이나 탭
2. _blank 새 창이나 새 탭   ***가장 많이 사용
3. _parent 상위 프레임
4. _top 창 전체

 

이미지태그
<img src="URL" alt="alternative text">
src - 경로

alt -이미지에 문제가 있거나 시각장애우 안내를 위해 이미지에 설명글을 다는 옵션
width - 가로길이

height - 세로높이

*width와 height은 일반적으로 픽셀 값으로 지정, % 로도 사용

 

브라우저에서 인식하는 이미지 포맷

*많이 사용되는 형식은 GIF(로고 등), JPG(사진 등), PNG

 

 

HTML 문서의 배경 이미지
<div style="background-image: url('images/gafam.png');">

 

 

*** *** ***  *** ***  *** ***  *** ***  *** ***  *** *** 핵심정리 *** ***  *** ***  *** ***  *** ***  *** ***  *** *

절대주소 : url 에서 파일의 전체 주소로 표시
상대주소 : 파일의 상대적인 위치로 표시
src: source의 약자, 그림파일의 주소
alt: alternative text 의 약자로, 대체텍스트