[두잇 HTML5+CSS3 웹표준의 정석] HTML Part3
이미지
웹에서 하용하는 이미지 형식
| GIF | 색상수가 256가지뿐이지만 다른 이미지 파일 형식에 비해서 파일 크기가 크지 않기 때문에 불릿이나 아이콘과 같이 작은 이미지에 사용한다. 투명한 배경, 움직이는 이미지를 만들 수 있다. |
| JPG, JPEG | 저장을 반복하면 화질이 떨어질 수 있지만 다양한 색상과 명암을 표현할수 있다. |
| PNG | 다양한 색상표현이 가능하고 투명한 배경을 만들 수 있으며 네트워크용으로 개발되었기 때문에 최근에 많이 사용하는 이미지 파일 형식이다. |
<img> 태그
:이미지 삽입하기
-scr 속성을 사용해서 이미이 파일의 경로를 알려줘야한다.
<img src="경로" >
src 속성
:이미지 파일 경로 지정하기
-이미지 파일 경로는 웹문서 파일의 위치를 기준으로 정한다.
예시1) 예를 들어서 index.html과 lotus.jpg 파일이 같은 폴더에 있다면 src 속성에 파일 이름만 적으면 됩니다.
<img src="lotus.jpg">
예시2) 반면 웹문서가 있는 폴더 안에 images라는 하위폴더가 있고 그 하위폴더 안에 이미지 파일이 있다면 다음과 같이 표기해야합니다.
<img src="images/lotus.jpg">
내 컴퓨터에서 보이는 이미지가 다른 컴퓨터에서 보이지 않는다?
다른 사람과 공유를 할 때에는 html파일과 함께 이미지 파일도 함께 전달해줘야합니다.
웹상의 링크를 복사해서 이미지 경로 지정하기
인터넷에 올라와있는 이미지를 웹문서에 첨부하고 싶을 때에는 이미지 링크를 복사해서 이미지 경로에 넣습니다.
크롬브라우저) 이미지를 마우스 오른쪽 버튼클릭하고 [이미지 주소 복사]를 선택한 후에 src 속성값으로 지정합니다.
인터넷 익스플로러) 오른쪽 버튼을 클릭해 [속성]을 선택하고 [주소]부분을 복사해 사용하면 됩니다.
alt 속성
:이미지 설명해주는 대체 텍스트
-alt 속성은 이미지에 대해서 설명해주는 대체 텍스트를 삽입할 때 사용합니다.
대체 텍스트란?
웹 문서에 삽입되는 이미지는 시각적인 요소이기 때문에 시각장애인들은 이 내용을 알지 못하고 낭독기도 건너뛰게 된다. 그렇기 때문에 이미지에 대한 설명을 시각장애인들에게 알려줄 수 있도록 alt 속성을 이용합니다.
또한 연결속도가 느리거나 이미지를 제대로 볼 수 없는 상황에서 alt 속성을 통해서 어떤 이미지였는지 알려줍니다.
불릿이나 작은 아이콘과 같이 특별한 의미가 없는 이미지는 특별한 설명이 필요없기 때문에 alt=""라고 지정합니다.
width, height 속성
: 이미지 크기 조정하기
- 너비) width="" / 높이) height=""
<figure> 태그, <figcaption> 태그
:이미지에 설명 글 붙이기
-<p> 태그를 사용할 경우에는 이미지 위치가 달라졌을 때 <p>태그 또한 텍스트 단락을 다시 조절하고 옮겨야하는 어려움이 있기 때문에 <figure>, <figcaption> 태그를 사용한다.
<figure> : 설명글을 붙일 대상을 지정한다. <figure> 태그 안에 이미지와 이미지 설명<figcaption>을 포함한다.
<figcaption> : 설명에 관련된 글을 이 태그로 묶는다.
<figure>
<img src="images/prod.jpg" alr="예멘 모카 마타리">
<figcaption>예멘 모카 마타리</figcaption>
</figure>
링크 만들기
<a> 태그, href 속성
: 링크 만들기
<a href="링크할 주소" 속성="속성값">텍스트</a>
<a href="링크할 주소" 속성="속성값"><img src="이미지 파일 경로">텍스트</a>
-텍스트 링크는 기본적으로 밑줄이 파란색으로 표시되고 한번 클릭된 링크는 보라색으로 바뀐다. 이는 css에서 변경이 가능하다.
target 속성
:링크 내용이 표시될 위치(현재 또는 새 창)을 지정합니다.
-웹문서에서 링크를 클릭하면 현재 브라우저 창에서 링크되어있는 다른 창으로 넘어가게 됩니다. 그렇게 때문에 다시 이전 창으로 돌아가려면 이전 페이지 버튼을 눌러야한다. 하지만 target 속성의 _blank를 이용해서 링크를 클릭했을 때 다른 창으로 넘어가는 것이 아닌 새로운 창이 열려 링크에 접속 할 수 있습니다.
<a href="링크" target="_blank"> 홈페이지 </a>앵커(anchor)
: 페이지가 긴 웹문서에서 특정요소를 클릭하면 그 위치로 한번에 이동하도록 도와준다.
-앵커를 사용하기 위해선 이동하고 싶은 위치마다 id속성을 이용해 앵커를 만들고 각각 이름을 지정해야합니다.
<태그 id="앵커이름"> 텍스트 또는 이미지 </태그>
<a href="#앵커이름"> 텍스트 또는 이미지 </a>
SVG 이미지
원래 작은크기였던 gif, jpg/jpeg, png의 파일을 크게 확대하면 이미지의 테두리 부분이 울퉁불퉁해지는데 이런 이미지를 비트맵 이미지(bitmap image)라고 합니다. 반면 SVG 이미지는 확대하거나 축소해도 깨끗한 상태를 유지하는데 이를 백터 이미지(vector image)라고 합니다. 로고나 아이콘에서 많이 사용되며 다이어그램, 지도 등에도 많이 쓰인다.
SVG 이미지 삽입하기
-어도비 일러스트레이터 프로그램에서 벡터 이미지를 만든 후 svg 파일로 저장하여 <img>태그를 이용해 삽입한다.
<img src="images/maffin.svg">SVG파일을 지원하지 않는 브라우저는 어떻게 해야하나요?
인터넷 익스플로러 8 이하와 안드로이드 2.3이하 버전에서는 svg 파일을 표시할 수 없다. 이런 경우에는 SVG 파일이 아닌 PNG 이미지 파일을 사용합니다. 이럴때는 SVG파일을 지원하는지 테스트 해볼 수 있는 Modernizr를 사용합니다. (책 124p)
이미지 맵
: 이미지 맵이란 하나의 이미지에 여러개의 링크를 만드는것을 말합니다.
예시)
<!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> <img src="http://www.funnycom.net/images/event.png" alt="책 소개 페이지" usemap="#eventMap">-링크를 여러개 넣고 싶은 이미지에 usemap="#태그" 를 넣는다.
<img src="http://www.funnycom.net/images/event.png" alt="책 소개 페이지" usemap="#eventMap">
<map name="eventMap">
</map>-<map>태그와 </map> 태그 사이에는 지정해야할 아래의 링크들을 넣을 것입니다.
<area shape="circle" coords="230,295,40" href="http://www.easyspub.co.kr/20_Menu/BookView/A001/113#tab07" alt="동영상 강의 페이지로 가기" target="_blank">- 원형 영역:
1. area shape는 해당 원의 영역이기 때문에 "circle"로 지정한다.
2. coords는 해당 영역의 좌표를 적어야한다.
3. 230(X), 295(Y), 40(원의 반지름)을 대입해준다.
<area shape="rect" coords="475,1747,703,1882" href="http://tech-town.org" alt="저자 사이트로 가기" target="_blank">- 사각 영역:
1. area shape는 해당 사각의 영역이기 때문에 "rec"으로 지정한다.
2. coords는 해당 영역의 좌표를 적어야한다.
3. 475(X), 1747(Y), 703(X), 1882(Y) 을 대입해준다.
-이때 각 좌표는 시작하는 사각영역의 좌표와 끝나는 사각영역의 좌표를 차례대로 적어주면 된다.