01.이미지 삽입을 해주는 <img>태그
- <img> 태그는 줄바꿈이 없는 inline 요소이다.
- 이미지를 삽임하려면 <img> 태그를 사용한다
- <img> 태그는 종료 태그 없이 사용한다.
- <img> 태그의 속성
- src="/mingyu/mingyu.jpg" ☞ 문서에 표시할 이미지 파일을 지정한다.
- width="780px;" ☞ 이미지의 가로 폭 을지정한다 (px,% 단위)
- height="780px;" ☞ 이미지의 세로 폭 을지정한다 (px,% 단위)
- alt="이미지가없어요" ☞ 이미지가 표시되지 않을 때 대체 텍스트를 입력한다.
- usemap="#맵이름" ☞ 클라이언트 (웹브라우저) 측의 이미지 맵을 지정한다
- width,height 속성의 경우 둘중 하나만 지정되면 나머지 하나는 원본 크기에 비례해서 자동으로 지정된다.
<!-- <img>태그의 src 속성 -->
<!-- HTML 문서와 같은 폴더에 있는 경우 -->
<img src="mingyu.jpg">
<!--절대 경로의 경우 -->
<img src="https://min-nine.tistory.com/html/mingyu.jpg">
<!--
상대 경로의 경우
현재 위치가 https://min-nine.tistory.com/index.html의 경우
-->
<img src="html/mingyu.jpg">
<!-- <img>태그의 src 속성 END -->
02.하이퍼링크 삽입을 하는 <a>태그
- 기본 형식은 <a href="이동할 위치"> 링크를 걸어 줄 내용물 </a>
- <a>태그의 속성
- href="URL" ☞ 링크를 통해 이동하려는 곳의 경로나 주소(URL)을 표기한다.
- target="_blank" ☞ 링크된 내용이 포시될 창을 지정해준다
- _blank -> 새로운 창에서 링크된 페이지를 연다
- _self ->현재의 창에서 링크된 페이지를 연다
- _top -> 현재의 창이 프레임으로 구성된 경우 모든 프레임이 사라지고 하나의 화면에서 페이지를 연다
- _parent -> 부모 프레임에서 링크된 페이지를 연다
- 사용자지정 -> 링크된 페이지를 표시할 피레임의 이름을 적접지정한다
- download ☞ href 속성에 의해 지정된 파일을 직접 다운로드
- 링크 클릭시 href속성에 지정한 파일을 별도 브라우저에서 열지 않고 직접 다운로드 하여 표시
- title="추가적정보,마우스 호버 시 툴팁형태로 나타남"
- 동일/다른 페이지에서 특정 위치로 이동 할 수 있다.
- 링크를 삽입하는 부분
- 같은 페이지 내에서 이동하는 경우
- <a herf = "#이동할 특정 태그의 이름"> 내용 </a>
- 다른 페이지의 특정 위치로 이동하는 경우
- <a href = "페이지경로#이동할 특정 태그의 이름">내용</a>;
- 이동할 특정 태그의 이름 표기방법
- 태그 속성중 id 값을 사용한다.
- <div id="come_here"></div>
- 클릭 시 이메일을 보낼 수 있다
- <a href = "mailto:min-nine@tistory.com"> min-nine@tistory.com </a>
- 클릭 시 자바스크립트도 실행 할 수 있다
- <a href = "javascript:gotohome();">스크립트 실행</a>
- 클릭 시 파일로 저장 및 실행 할 수 있다.
- <a href = "music.mp3">음악재생 </a>
- <a href = "download.zip">다운로드</a>
03.iframe 태그 및 이미지 맵 이용 (방송대교제에는 없고 workbook에 있음)
- <iframe> 태그 : 현재의 페이지 안에서 다른 웹페이지를 표시하는 창을 삽입하기 위한 태그
- <iframe> 태그 주요 속성
- name = "이름" ☞ 창의 이름을 지정
- src = "url" ☞ 창에 표시될 문서의 url을 지정한다.
- srcdoc ="html코드" ☞ 창에서 보여줄 html 콘텐츠 지정
- srcdoc 속성이 지정되면 src속성에서 지정된 콘텐츠는 무시한다
- width = "500px;" ☞ 창의 가로폭을 지정한다
- height = "500px;" ☞ 창의 높이를 지정한다
- 이미지 맵 : 하나의 이미지를 여러개의 영역으로 나누어 각 영역마다 링크를 지정하는것
- coords="위,아래,왼쪽,오른쪽"
- 이미지에 대한 좌표를 나타낸다.
- 0,0,10,30 20,30,40,90 등으로 사용
<img src="mingyu.jpg" usemap="#mingyumap">
<map name="mingyumap">
<area
coords="z,x,c,v"
Shape="이미지맵에서 각 영역의 모양(default,rect등)"
href=""
title=""
target=""
>
</map>
마무리
- 이미지 삽입 : <img>
- 하이퍼링크 삽입 : <a>
- <iframe> : 현재 페이지 안에 창을 삽입
- usmap 속성 이미지맵 : 하나의 이미지에 여러 링크 영역을 지정
