웹의 뼈대 html의 이해 - 이미지 태그와 하이퍼링크...
TRANSCRIPT
![Page 1: 웹의 뼈대 HTML의 이해 - 이미지 태그와 하이퍼링크 태그elearning.kocw.net/contents4/document/lec/2013/Seowon/Choehyunj… · html의 이해 - 이미지 태그와](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7931167b53e06555d2944/html5/thumbnails/1.jpg)
HTML의 이해 - 이미지 태그와 하이퍼링크 태그
최현종(서원대학교)
![Page 2: 웹의 뼈대 HTML의 이해 - 이미지 태그와 하이퍼링크 태그elearning.kocw.net/contents4/document/lec/2013/Seowon/Choehyunj… · html의 이해 - 이미지 태그와](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7931167b53e06555d2944/html5/thumbnails/2.jpg)
• 이미지 다루기 – 웹에서의 이미지 사용
• 인터넷에서 이미지 다루기 - 화질보다는 전송 속도가 중요 - 사용 가능한 파일 형식의 규정 (GIF, JPG, PNG)
• 이미지와 경로 - 웹 문서에 이미지 삽입 시 경로에 주의 - 경로 : HTML 문서에서 이미지 파일까지 어떻게 찾아갈 것인가 알려주는 일종의 주소 - 상대 경로 예) image/ccc.jpg - 절대 경로 예) http://comedu.seowon.ac.kr/~eridanus/ccc.jpg
HTML의 기초 2
![Page 3: 웹의 뼈대 HTML의 이해 - 이미지 태그와 하이퍼링크 태그elearning.kocw.net/contents4/document/lec/2013/Seowon/Choehyunj… · html의 이해 - 이미지 태그와](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7931167b53e06555d2944/html5/thumbnails/3.jpg)
– 이미지 삽입 - <IMG> 태그 • (형식) <IMG SRC=“파일경로”> • <IMG> 태그의 속성
속성 설명 속성값
SRC 이미지 파일의 경로 지정(필수 속성) 파일경로, URL
ALT 이미지 위에 마우스 커서를 올려놓았을 때, 간단한 설명글이 나타나도록 함
텍스트
ALIGN 이미지의 정렬 방법 지정 left, right, top, middle, bottom
BORDER 이미지 주위에 테두리선 그림 0(테두리 없음) 또는 숫자
HEIGHT 이미지의 높이 조절 픽셀 값
WIDTH 이미지의 너비 조절 픽셀 값
HSPACE 이미지의 좌우 여백 지정 픽셀 값
VSPACE 이미지의 상하 여백 지정 픽셀 값
![Page 4: 웹의 뼈대 HTML의 이해 - 이미지 태그와 하이퍼링크 태그elearning.kocw.net/contents4/document/lec/2013/Seowon/Choehyunj… · html의 이해 - 이미지 태그와](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7931167b53e06555d2944/html5/thumbnails/4.jpg)
<IMG> 태그 활용 예제
그림 10. <IMG> 태그
![Page 5: 웹의 뼈대 HTML의 이해 - 이미지 태그와 하이퍼링크 태그elearning.kocw.net/contents4/document/lec/2013/Seowon/Choehyunj… · html의 이해 - 이미지 태그와](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7931167b53e06555d2944/html5/thumbnails/5.jpg)
하이퍼링크 태그 링크 만들기 - <A> 태그
(형식) <A HREF=“연결 경로” 속성=“속성값”>텍스트</A>
<A> 태그의 속성
링크 색상 조절 <BODY> 태그의 링크 색상 관련 속성
속성 설명 속성값
HREF 연결할 문서의 경로나 홈페이지 URL 지정 문서 경로, URL
NAME 문서 내부에서 점프할 앵커 이름 지정 영문으로 된 앵커 이름
TARGET 링크된 내용이 열릴 대상을 지정 _blank, _parent, _self, _top
속성 설명
LINK 링크의 색상
VLINK 방문했던 링크의 색상
ALINK 링크를 클릭하는 순간의 색상
![Page 6: 웹의 뼈대 HTML의 이해 - 이미지 태그와 하이퍼링크 태그elearning.kocw.net/contents4/document/lec/2013/Seowon/Choehyunj… · html의 이해 - 이미지 태그와](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7931167b53e06555d2944/html5/thumbnails/6.jpg)
텍스트 링크의 색상 조절 예제
그림 11. 예제
![Page 7: 웹의 뼈대 HTML의 이해 - 이미지 태그와 하이퍼링크 태그elearning.kocw.net/contents4/document/lec/2013/Seowon/Choehyunj… · html의 이해 - 이미지 태그와](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7931167b53e06555d2944/html5/thumbnails/7.jpg)
이미지 링크 예제
그림 12. 예제
![Page 8: 웹의 뼈대 HTML의 이해 - 이미지 태그와 하이퍼링크 태그elearning.kocw.net/contents4/document/lec/2013/Seowon/Choehyunj… · html의 이해 - 이미지 태그와](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7931167b53e06555d2944/html5/thumbnails/8.jpg)
TARGET 속성 새로운 브라우저 창으로 링크 문서 열기
프레임으로 링크 문서 열기
TARGET 속성의 속성값
속성값 설명
_blank 새로운 브라우저 창을 열고 거기에 링크 내용을 표시
_self 현재 링크가 있는 브라우저 창에 표시 (TARGET속성의 기본 속성값)
_parent 프레임에서 사용
_top 프레임에서 사용
NAME 속성 문서 안의 지정한 위치로 이동
웹 문서가 길 경우, 문서 안에 위치를 지정해 놓고 그 위치로 한번에 이동할 수 있는 기능 (앵커)
(형식) <A HREF=“#앵커이름”> 텍스트 </A> 클릭할 곳에 …… <A NAME=“앵커 이름”></A> 이동할 곳에
![Page 9: 웹의 뼈대 HTML의 이해 - 이미지 태그와 하이퍼링크 태그elearning.kocw.net/contents4/document/lec/2013/Seowon/Choehyunj… · html의 이해 - 이미지 태그와](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7931167b53e06555d2944/html5/thumbnails/9.jpg)
앵커(anchor) 기능 예제
그림 13. 예제
![Page 10: 웹의 뼈대 HTML의 이해 - 이미지 태그와 하이퍼링크 태그elearning.kocw.net/contents4/document/lec/2013/Seowon/Choehyunj… · html의 이해 - 이미지 태그와](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7931167b53e06555d2944/html5/thumbnails/10.jpg)
여러 가지 링크 메일 링크
편리하게 메일을 보낼 수 있는 기능
(형식) <A HREF=“mailto:받을사람 메일주소”>텍스트</A>
사운드 재생 링크
다운로드 링크
여러 가지 링크 예제
![Page 11: 웹의 뼈대 HTML의 이해 - 이미지 태그와 하이퍼링크 태그elearning.kocw.net/contents4/document/lec/2013/Seowon/Choehyunj… · html의 이해 - 이미지 태그와](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7931167b53e06555d2944/html5/thumbnails/11.jpg)
그림 15. 예제