반응형
- 다음의 내용은 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 : 시작좌표 끝좌표
반응형