이미지와 하이퍼링크
1. 이미지
이미지 형식
-
gif
- 색상 수 최대 256가지
- 다른 형식에 비해 파일 크기가 작아 작은 이미지에 주로 사용
- 투명 배경이나 움직이는 이미지를 만들 수 있음
-
jpg/jpeg
- gif보다 다양한 색상과 명암 표현 가능
-
png
- 투명 배경 가능
- 다양한 색상 표현 가능
- 네트워크용으로 개발됨
<img> 태그
<img src="경로" [생략 가능한 속성="값"]>
- scr 속성
- 내 컴퓨터의 이미지 파일 경로
<img src="images/lotus.jpg">
- 내 컴퓨터의 이미지 파일 경로
- 웹 이미지 링크로 경로 지정
- 이미지 주소 복사
- 인터넷 익스플로러 - 마우스 우클릭>속성>주소 복사
alt 속성
<img src="" alt="이미지를 표현하는 단어"/>
-
이미지 로딩 실패 시 설명할 단어로써 쓰인다.
-
시각장애가 있는 사람들을 위해 이미지를 음성으로 설명해줄 경우 필요하다.
-
SEO에 노출되어 더 잘 검색될 수 있도록 한다.
width, height 속성
- 조절하지 않으면 원본 크기로 나온다.
<figure>, <figcaption> 태그
<figure>
<img src="경로" alt="설명글">
<figcpation>설명글</figcpation>
</figure>-
<figure>- 설명 글을 붙일 대상을 지정하거나 멀티미디어 파일, 이미지, 표, 소스 코드 등 웹문서에서 한 단위가 되는 요소를 묶을 때 사용한다.
-
<figcaption>- 설명 글을 감싸기 위한 태그
- 여러 개의 이미지나 멀티미디어 파일을 묶어 하나의 설명 글을 표시할 수도 있다.
2. 링크
<a> 태그
<a href="링크 주소"> 텍스트 혹은 이미지 <img src=""> </a>-
속성
-
href - 링크한 문서나 사이트의 주소
-
target - 링크한 내용이 현재 창 혹은 새 창에서 뜰지 지정
- _blank - 새 창 혹은 새 탭에서 열림
- _self - 기본 값. 링크가 있는 화면에서 열림
- _parent - 프레임 사용한 경우 링크 내용 부모 프레임에 표시
- _top - 프레임 사용한 경우 링크 내용 전체 화면에 표시
-
download - 다운로드 링크
-
rel - 현재 문서와 링크된 문서의 관계
-
hreflang - 링크된 문서의 언어 지정
-
type - 링크한 문서의 파일 유형
-
-
<iframe>태그- 문서(부모) 안에 다른 문서(자식)를 넣는 태그
- parent.html
<iframe src="child.html" width="" height=""></iframe>
child.html<p><a href="" target="_parent(부모 문서 창) 혹은 _top(브라우저 창 전체)"></p>
-
텍스트 링크 디폴트 디자인 없애기
a { text-decoration:none; color:black; } -
페이지 내에서 링크
<a href="#id"> 텍스트 혹은 이미지 </a>
<map> 태그, <area> 태그, usemap 속성 - 이미지 맵 지정 (하나의 이미지에 여러 링크 걸기)
기본형
<map name="맵이름">
<area>
<area>
...
</map><img src="이미지 파일" usemap="#맵이름"><area>태그 속성- alt - 대체 텍스트
- coords - 링크로 사용할 영역의 시작과 끝 좌표. ex) "0,0,80,100"
- download - 링크 문서 다운로드
- href - 링크 문서 경로
- media - 링크 문서를 어떤 미디어에 최적화시킬지 지정
- rel - 현재 문서와 링크 문서의 관계
- lternate, bookmark, help, license, next, nofollow, noreferer, prefetch, prev, search, tag
- shape - 링크로 사용할 영역 형태
- default, rect, circle, poly
- target - 링크 표시할 대상 지정
- _blank, _parent, _self, _top, 프레임 이름
- type - 링크 문서의 미디어 유형
3. SVG
SVG란?
- Scalable Vector Image
- 자바스크립트 라이브러리 - http://d3js.org/, http://dmitrybaranovskiy.github.io/raphael/
- 브라우저가 svg 지원하지 않는 경우 png 파일로 대체할 수 있다.
- http://modernizr.com/
Add your detects>SVG as an <img> tag source>Build>Download 'Build'>사용할 폴더로 파일 옮기기><head>태그 안에 <script> 태그를 이용해 웹 문서에 연결
<head>
<meta charset="utf-8">
<title>Title</title>
<srcipt src="modernizr-custom.js"></script>
</head><body>
...
<script>
if (!Modernizr.svg) {
//지원하지 않을 경우
}
</script>
</body>or
<body>
...
<script>
if (Modernizr.svg) {
//지원할 경우
} else {
//않을 경우
}
</script>
</body>* 문서에 이미지가 많다면 id 선택자로 다른 이미지와 구별해 주어야 한다.
4. 기타
- 파일 경로를 표시하는 기호들
- 하위 폴더 - /
- 상위 폴더의 하위 폴더 - ../
<script src="js/script.js"></script>body {
background-image: url("../images/background.png");
}출처 : Do it! HTML5+CSS3 웹 표준의 정석
UX에 관심 많은 개발 초보 Front-end Developer