03-1 이미지
웹 페이지에서 사용할 수 있는 이미지 파일은 파일 크기가 크지 않으면서도 화질이 좋아야하기 때문에 몇 가지 파일 형식만 사용할 수 있다.
만약 다른 형식으로 된 이미지 파일을 웹에서 사용하려면 다음과 같은 파일 형식으로 변화해야 한다.
GIF: 표시할 수 있는 색상 수가 최대 256가지뿐이지만 다른 이미지 파일 형식에 비해 파일 크기가 작기 때문에 아이콘이나 불릿 등 작은 이미지에 주로 사용한다. 투명한 배경이나 움직이는 이미지를 만들 수 있다는 장점이 있다.
JPG/JPEG: 사진을 위해 개발된 형식으로 GIF보다 다양한 색상과 명암을 표현할 수 있다. 저장을 반복하다 보면 화질이 떨어질 수도 있다.
PNG: 투명 배경을 만들면서 다양한 색상도 표현할 수 있으며 네트워크용으로 개발되었기 때문에 최근 많이 사용한다.
1.<img>태그: 이미지 삽입하기
src 속성을 사용해 이미지 파일이 있는 경로를 알려 주어야 화면에 이미지를 표시할 수 있다.
2.alt 속성: 이미지를 설명해 주는 대체 텍스트
이미지를 설명하는 대체 텍스트를 삽입할 때 사용한다.
3.width, height 속성: 이미지 크기 조정하기
4.<figure>, <figcaption>태그: 이미지에 설명 글 붙이기
HTML5d에서는 이미지뿐만 아니라 표나 멀티미디어 요소 어디에나 설명 글을 함께 붙일 수 있다.
1)<figure>태그: 설명 글을 붙일 대상 지정
설명 글을 붙여야 할 대상을 지정하거나 웹 문서에서 오디오나 비디오 같은 멀티미디어 파일을 비롯해 사진이나 표, 소스 코드 등 웹 문서 안에서 한단위가 되는 요소를 묶을 때 사용한다.
한 단위가 되는 요소를 나타내기 위해서는 <figure>태그만 사용하고 설명 글을 사용하기 위해서는 <figure>태그 안에 <figcaption> 태그를 사용해 설명 글을 표시한다.
2)<figcaption>태그: 설명 글 붙이기
설명 글이 필요한 대상은 <figure> 태그로 묶고 설명 글은 <figcaption> 태그로 묶는다.
03-2 링크 만들기
1.<a>태그, href 속성: 링크 만들기
<a>태그는 텍스트와 함께 사용하면 텍스트 링크가 되고 이미지와 함께 사용하면 이미지 링크가 된다.
기본형)
<a href="" >텍스트</a>
<a href=""><img src=""></a>
| 속성 | 설명 |
|---|---|
| href | 링크한 문서나 사이트의 주소를 입력한다. |
| target | 링크한 내용이 표시될 위치(현재 창 또는 새 창)를 지정한다. |
| download | 링크한 내용을 보여 주는 것이 아니라 다운로드 한다. |
| rel | 현재 문서와 링크한 문서의 관계를 알려준다. |
| hyrflang | 링크한 문서의 언어를 지정한다. |
| type | 링크한 문서의 파일 유형을 알려준다. |
1) 텍스트 링크의 밑줄과 글자 색 바꾸기
기본적으로 밑줄이 있는 파란색 글자로 표시된다.
링크를 클릭해 링크된 내용을 한 번 살펴보고 나면 보라색으로 바뀐다.
텍스트 링크를 누르고 있으면 즉 링크를 활성화시키면 글자 색은 빨간색으로 바뀐다.
CSS를 통해 텍스트 링크의 색을 바꾸고 밑줄을 없앨수 있다.
<style>
a{
text-decoration: none;
color: black;
}
</style>2) target 속성: 새 탭에서 링크 열기
| 속성 값 | 설명 |
|---|---|
| _blank | 링크 내용이 새 창이나 새 탭에서 열린다. |
| _self | target 속성의 기본 값으로 링크가 있는 화면에서 열린다. |
| _parent | 프레임을 사용했을 때 링크 내용을 부모 프레임에 표시한다. |
| _top | 프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체 화면에 표시한다. |
3) 한 페이지 안에서 점프하는 앵커 만들기
다른 페이지 말고 한 페이지 내에서도 링크를 만들 수 있다.
'앵커'라고 불리는 이 기능은 페이지가 긴 웹 문서에서 특정 요소를 클릭하면 그 위치로 한 번에 이동하도록 도와준다.
앵커를 사용하려면 우선 이동하고 싶은 위치마다 id 속성을 이용해 앵커를 만들고 각각 다른 이름을 지정해야 한다.
기본형)
<태그 id="앵커이름"> 텍스트 또는 이미지 </태그>
<a href="#앵커 이름"> 텍스트 또는 이미지 </a>
4) <map>태그, <area>태그, usemap 속성: 이미지 맵 지정하기
하나의 이미지에 여러 개의 링크를 걸 수도 있다.
즉 한 이미지상에서 클릭 위치에 따라 서로 다른 링크가 열리는 것이다.
이것을 '이미지 맵'이라고 한다.
일반적으로 웹 사이트보다 메일 등에서 사용한다.
이미지 맺은 이미지에 영역을 만든 후 링크를 추가해야 하기 때문에 <map>태그를 이용해 이미지 맵을 만들고 <img>태그에서 usemap 속성으로 이미지 맵을 지정한다.
이미지 맵으로 사용할 이미지에 영역을 표시할 때는 <area>태그를 사용하는데 그 속성은 아래와 같다.
기본형)
<map name="맵이름">
<area>
<area>
...
</map>
<img src="이미지 파일" usemap="#맵이름">| 속성 | 설명 |
|---|---|
| alt | 대체 텍스트를 지정한다. |
| coords | 링크로 사용할 영역을 시작 좌표와 끝 좌표를 이용해 지정한다. |
| download | 링크를 클릭했을 때 링크 문서를 다운로드한다. |
| href | 링크 문서 경로를 지정한다. |
| media | 링크 문서를 어떤 미디어에 최적화시킬지 지정한다. |
| rel | 현재 문서와 링크 문서 사이의 관계를 지정한다. |
| shape | 링크로 사용할 영역의 형태를 지정한다. |
| target | 링크를 표시할 대상을 지정한다. |
| type | 링크 문서의 미디어 유형을 지정한다. |
03-3 SVG 이미지
웹에서 사용할 수 있는 이미지 파일 형식은 GIF나 JPG, PNG 밖에 없다고 앞에서 설명 했다. 그런데 최근에 브라우저에서 SVG 파일을 지원하게 되면서 아이콘이나 로고 이미지에 SVG 이미지 파일 형식이 많이 사용되고 있다.
1.SVG 파일 형식이란?
요즘 웹 사이트를 표시할 화면 크기가 다양하기 때문에 같은 이미지라도 작게 표현해야 할때가 있고 크게 표현해야 할 때가 있다. 그런데 원래 작은 크기였던 gif, jpg/jpeg, png 파일을 크게 확대해 나타내면 이미지 테두리 부분이 울퉁불퉁 해진다.
이런 이미지를 비트맵 이미지라고 하는데 반면 이미지를 아무리 확대하거나 축소해도 원래의 깨끗한 상태 그대로 유지되는 이미지를 백터 이미지라고 한다.
그런 이미지가 SVG 이미지이다.
크기를 조정해도 이미지가 깨지지 않고 깨끗이 유지되기 때문에 로고나 아이콘에서 많이 사용되며 최근 많은 관심을 끌고 있는 데이터 시각화에서 차트나 다이어그램, 지도 등을 구현할 때도 많이 사용된다.
SVG 이미지는 <img>태그를 이용해 파일 형태로 삽입할 수도 있지만 태그를 이용해 직접 만들 수도 있다.
2.SVG 이미지 삽입하기
<img src="images/muffin.svg">
3.SVG 파일을 지원하지 않는 브라우저를 위해
대부분의 모던 브라우저에서는 SVG 파일을 지우너하지만 인터넷 익스프로러 8이하를 고려해야하거나 안드로이드 2.3이하 버전에서는 svg 파일을 표시할 수 없다.
이런 경우 svg 파일 대신 png 이미지 파일을 사용해야 한다.
브라우저에서 특정 기능을 지원하는지 여부를 테스트 해주는 툴은 Modernizr
ex)
<head>
<meta charset="utf-8">
<title>insert SVG</title>
<script src="modernizer-custom.js></script>
</head>
<body>
<img src="muffin.svg">
<script>
if(!Modernizr.svg){
$("img").attr("src", "muffin.png");
}
</script>
</body>