SW 개발

[html 기초강좌] - 03. 이미지와 하이퍼링크

. . . 2021. 5. 14. 14:21
반응형
  • 다음의 내용은 Doit HTML5 책 내용을 스터디 하면서 정리한 내용입니다.
  • 제가 모르고 확인해야할 내용만 요약, 정리하였습니다. 즉, 중간중간 빠진내용이나 챕터가 상당히 많습니다.
  • Doit HTML5 책은 웹 초보가 보기에 상당히 좋은 내용입니다.
  • 정식으로 공부하실분은 정식으로 책을 구입하여 스터디 하시길 추천드립니다.

html 기초강좌 리스트 :

이미지와 하이퍼링크

웹에서 사용되는 이미지형식

종류 내용
GIF 표시할수있는 색상수가 245가지파일크기 작기때문에 아이콘이 불릿등 작은이미지에 주로사용투명한 배경 / 움직이는 이미지 만들수있다.
JPG / JPEG 사진을 위해 개발된
PNG 투명 배경을 만들면서 다양한 색상네트워크용으로 개발되었기 최근 많이사용

IMG 태그

이미지를 삽입할때 쓰는 태그

<img src="경로" [속성="값"]>
<span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1">​</span>
  • 속성
    • src : 경로
    • width, height : 이미지 크기조정
    • alt : 이미지를 설명해주는 텍스트
  • 설명글을 붙이려면 figure / figcaption 태그를 추가로 이용한다.

링크만들기

<a herf="링크할 주소" [속성="속성값"]> 텍스트 </a>
<a herf="링크할 주소" [속성="속성값"]><img src="이미지경로"></a>
  • 다른 페이지로 넘어가는 태그
  • 속성
    • herf : 링크한 문서나 사이트의 주소
    • target : 링크한 내용이 표시될 창 위치
      • _blank : 링크한 내용이 새창이나 새탭에서 열림
      • _self : target 속성의 기본값으로 링크가 있는 화면에서 열림
      • _parent : 프레임사용시 부모프레임에서 표시
      • _top : 프레임을 사용했을때 프레임에서 벗어나 링크의내용을 전체화면에 표시
    • download : 링크한 내용을 보여주는것이 아니라 다운로드로 진행
    • rel : 현재 문서와 링크한 문서와의 관계
    • herflan : 링크한 문서의 언어
    • type : 링크한 문서의 파일유형 명시

한 페이지 안에서 점프하는 앵커 만들기

다른페이지말고 한페이지 내에서도 링크를 만들수있다.

앵커(anchor)라고 불리는 이기능은 페이지가 긴 웹문서에서 특정 요소를 클릭하면 그 위치로 한번에 이동하도록 도와준다.

<태그 id="앵커이름"> 텍스트또는 이미지 </태그>
<a herf="#앵커이름"> 텍스트또는 이미지 </a>

예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>링크 만들기</title>
</head>
<body>
    <h1>앵커 만들기</h1>
    <p>contents_contents </p>
    <ul id="menu">
        <li><a href="#content1">메뉴1</a></li>
        <li><a href="#content2">메뉴2</a></li>
        <li><a href="#content3">메뉴3</a></li>
    </ul>
    <h2 id="content1">내용1</h2>
    <p>contents_contents </p>
    <p>contents_contents </p>
    <p>contents_contents </p>
    <p><a href="#menu">[메뉴로]</a></p>
    <h2 id="content2">내용2</h2>
    <p>contents_contents </p>
    <p>contents_contents </p>
    <p>contents_contents </p>
    <p><a href="#menu">[메뉴로]</a></p>
    <h2 id="content3">내용3</h2>
    <p>contents_contents </p>
    <p>contents_contents </p>
    <p>contents_contents </p>
    <p><a href="#menu">[메뉴로]</a></p>
</body>
</html>

SVG 이미지

SVG는 백터이미지다.

  • jpg / jpeg / png 파일등은 확대시 이미지 깨짐 => 비트맵이미지
  • 이미지를 확대 축소 해도 원래의 상태 그대로 유지됨 => 백터이미지

SVG 란 ?

  • <img> 태그를 이용해서 파일형태로 삽입가능
  • 태그를 이용해서 직접만들수있다.
  • svg 파일은 텍스트 에디터로 열경우 코드로 되어있다.
  • 2001년부터 웹 표준으로 지정되었지만 익스8 버젼 이하에서 지원하지 않았기 때문에 거의 사용하지 않았지만, html5를 지원하는 브라우저는 대부분 지원해서 최근 다시 각광받고있다.
  • 만약 svg 파일을 지원하지 않는경우를 대비해서… img 태그의 src 속성에 png / svg 파일을 각각 다르게 링크하는 방식이 필요할수도있다.

svg 파일을 체크하여 분기예제

<!doctype html>
<html lang="ko">
<head>
 <meta charset="utf-8">
 <title>Insert SVG</title>
 <script src="modernizr-custom.js"></script>
</head>
<body>
 <h1>SVG 이미지 삽입하기</h1>
 <img src="images/muffin.svg">
 <script>
 if (!modernizr.svg) {
 $("img").attr("src", "images/muffin.png");
 }
 </script>
</body>
</html>

이미지맵 / 이벤트

이미지맵이란 이미지에서 링크로 사용할 영역을 표ㅕ시한다.

  • usemap="#eventMap" 이와같이 사용한다.
<!doctype html>
<html lang="ko">
<head>
 <meta charset="utf-8">
 <title>이벤트 페이지</title>
</head>
<body>
 <img src="http://www.funnycom.net/images/event.png" alt="책 소개 페이지" usemap="#eventMap">
 <map name="eventMap">
 <area shape="circle" coords="230,295,40" href="http://www.easyspub.co.kr/20_Menu/BookView/A001/113#tab07" alt="동영상 강의 페이지로 가기" target="_blank">
 <area shape="rect" coords="475,1524,704,1653" href="http://cafe.naver.com/doitstudyroom" alt="스터디룸 카페로 가기" target="_blank">
 <area shape="rect" coords="475,1747,703,1882" href="http://tech-town.org" alt="저자 사이트로 가기" target="_blank">
 </map>
</body>
</html>
  • circle 속성에서의 coords : 중간좌표와 반지름
  • rect 속성에서의 coords : 시작좌표 끝좌표
반응형