Do it! HTML5+CSS3 3장
03 이미지와 하이퍼링크
1) 이미지
● 웹에서 사용하는 이미지 형식
GIP, JPG/JPEG, PNG
웹 페이지에서 사용할 수 있는 이미지 파일은 파일 크기가 크지 않으면서도 화질이 좋아야 하기 때문에 몇 가지 파일 형식만 사용할 수 있다. 만약 다른 형식으로 된 이미지 파일을 웹에서 사용하려면 파일 형식을 변형해야 한다.
● <img> 태그 - 이미지 삽입하기
기본형 <img src= "경로" [속성="값"]>
웹 문서에 이미지를 삽입할 때는 <img> 태그를 사용한다. 이때 src 속성을 사용해 이미지 파일이 있는 경로를 알려 주어야 화면에 이미지를 표시할 수 있다.
src 속성 - 이미지 파일 경로 지정하기
이미지를 웹 문서에 넣으려면 src 속성에 정확한 파일 경로를 지정해야 한다. '경로'란 현재 HTML 문서에서 이미지 파일까지 찾아가기 위한 길로 이 길이 정확하지 않다면 웹 문서에 이미지가 표시되지 않는다. 이때 내 컴퓨터에 이미지 파일이 있는 경우와 웹 상의 이미지 링크를 사용하는 경우에 따라 이미지 경로에 들어가는 값도 다르다.
a) 내 컴퓨터의 이미지 파일 경로 지정하기
이미지 파일의 경로는 웹 문서파일의 위치를 기준으로 정해진다. 웹 문서 파일과 이미지 파일이 같은 경로에 있다면 src 속성에는 간단한 이미지 파일의 이름만 적으면 된다. 예를 들어 index.html과 lotus.jpg 파일이 같은 폴더에 있다면 src 속성에 파일 이름만 적으면 된다.
<img src = "lotus.jpg">
반면, 웹 문서가 있는 폴더에 하위 폴더를 만들고 그 폴더에 이미지 파일을 저장했다면 src 속성에 하위 폴더와 함께 이미지 파일이름을 적어야 합니다. 예를 들어 images라는 하위 폴더가 있고 거기에 있는 lotus.jpg 파일을 웹 문서에 표시하려면 다음과 같이 작성해야 한다.
<img src = "images/lotus.jpg">
b) 웹 상의 링크를 복사해 이미지 경로 지정하기
크롬 브라우저에서는 웹 페이지에 넣고 싶은 이미지를 마우스 오른쪽 버튼으로 클릭하고 [이미지 주소 복사]를 선택하면 이미지 경로를 알 수 있다. 이렇게 복사한 웹 이미지 파일의 경로를 src속성의 값으로 지정한다. 다만, 웹 이미지는 인터넷에 접속할 수 있어야 화면에 표시된다.
반면, 인터넷 익스플로러 브라우저를 사용한다면 웹 문서에 넣고 싶은 이미지를 마우스 오른쪽 버튼으로 클릭해 [속성]을 선택한 후 속성 창에서 [주소] 부분을 복사해 사용하면 된다. 주의해야 할 점은 다른 사람이 블로그나 사진 공유 사이트에 올린 사진이나 이미지는 저작권 자의 허락 없이 다른 곳에 옮기거나 다운로드해 사용하면 안 된다는 점이다. 사용이 허락된 상태더라도 개인적인 용도로만 사용할 수 있는지, 상업적인 용도로도 사용할 수 있는지 확인해야 한다.
● alt 속성 - 이미지를 설명해 주는 텍스트
<img src="home.jpg" alt="홈으로 가기">
alt 속성은 이미지를 설명하는 대체 텍스트를 삽입할 때 사용한다. 불릿(bullet) 이미지나 작은 아이콘처럼 특별한 의미 없이 화면을 꾸미기 위해 사용한 이미지에는 대체 텍스트를 지정하지 않아도 된다. 이런 경우, alt= ""라고 지정하면 된다.
● width, height 속성 - 이미지 크기 조정하기
이 속성으로 작은 이미지를 크게 표시할 경우, 화질이 나빠질 수 있다.
● <figure>, <figcaption> 태그 - 이미지에 설명 글 붙이기
HTML5 이전에는 이미지에 설명 글(캡션)을 붙이기 위해 <p> 태그를 사용해 텍스트 단락을 표시한 후 위치를 조절해야만 했다. 그래서 이미지 위치를 바꾸면 설명 글 내용도 함께 옮겨야 했다. 하지만 HTML5에서는 이미지뿐만 아니라 표나 멀티미디어 요소 어디에나 설명 글을 함께 붙일 수 있게 되었다.
<figure> 태그 - 설명 글을 붙일 대상 지정
<figure> 요소 </figure>
<figure> 태그는 설명 글을 붙여야 할 대상을 지정하거나 웹 문서에서 오디오나 비디오 같은 멀티미디어 파일을 비롯해 사진이나 표, 소스 코드 등 웹 문서 안에서 한 단위가 되는 요소를 묶을 때 사용한다. 한 단위가 되는 요소를 나타내기 위해서는 <figure> 태그만 사용하고 설명 글을 사용하기 위해서는 <figure> 태그 안에 <figcaption> 태그를 사용해 설명 글을 표시한다. 예를 들어 이미지만 삽입한다면 <figure> 태그를 사용하지 않아도 되지만 이미지에 설명 글을 넣으려면 이미지를 <figure> 태그로 묶어 주어야 한다.
<figcaption> 태그 - 설명 글 붙이기
<figcaption> 설명 글 </figcaption>
설명 글이 필요한 대상은 <figure> 태그로 묶고 설명 글은 <figcaption> 태그로 묶습니다. 설명 글을 붙일 수 있는 대상은 이미지나 오디오, 비디오 같은 미디어 파일이 될 수도 있고 텍스트 단락이나 표가 될 수도 있다. 또한 여러 개의 이미지나 미디어 파일에 하나의 설명 글을 표시할 수도 있다.
2) 링크 만들기
● <a> 태그, herf 속성 - 링크 만들기
기본형 <a herf="링크할 주소" [속성="속성 값"]> 텍스트 </a>
<a herf="링크할 주소" [속성="속성 값"]><img src="이미지 파일 경로"> </a>
<a> 태그 안에서 사용할 수 있는 주요 속성들-
herf : 링크한 문서나 사이트의 주소를 입력한다.
target : 링크한 내용이 표시될 위치(현재 창 또는 새 창)를 지정한다.
download : 링크한 내용을 보여 주는 것이 아니라 다운로드 한다.
rel : 현재 문서와 링크한 문서의 관계를 알려준다.
herflang : 링크한 문서의 언어를 지정한다.
type : 링크한 문서의 파일 유형을 알려준다.
링크를 만드는 <a> 태그는 텍스트와 함께 사용하면 텍스트 링크가 되고 이미지와 함께 사용하면 이미지 링크가 된다.
● target 속성, herf 속성 - 새 탭에서 링크 열기
_blank : 링크 내용이 새 창이나 새 탭에서 열린다.
_self : target 속성의 기본 값으로 링크가 있는 화면에서 열린다.
_parent : 프레임을 사용했을 때 링크 내용을 부모 프레임에 표시한다.
_top : 프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체 화면에 표시한다.
● 한 페이지 안에서 점프하는 앵커 만들기
기본형 <태그 id="앵커 이름"> 텍스트 또는 이미지 </태그>
<a herf="#앵커 이름"> 텍스트 또는 이미지 </a>
● <map> 태그, <area> 태그, usemap 속성 - 이미지 맵 지정하기
기본형 <map name="맵이름">
<area>
<area>
.......
</map>
<img src="이미지 파일" usemap="#맵이름">
하나의 이미지에 여러 개의 링크를 걸 수도 있는데 한 이미지상에서 클릭 위치에 따라 서로 다른 링크가 열리는 것이다. 이것을 '이미지 맵'이라고 한다. 일반적으로 웹 사이트보다 메일 등에서 사용한다. 이미지 맵은 이미지 영역을 만든 후 링크를 추가해야 하기 때문에 <map> 태그를 이용해 이미지 맵을 만들고 <img> 태그에서 usermap 속성으로 이미지 맵을 지정한다. 이미지 맵으로 사용할 때는 <area> 태그를 사용하는데 <area> 태그에서 사용할 수 있는 속성은 다음과 같다.
alt : 대체 텍스트를 지정한다.
coords : 링크로 사용할 영역을 시작 좌표와 끝 좌표를 이용해 지정한다.
download : 링크를 클릭했을 때 링크 문서를 다운로드한다.
herf : 링크 문서(사이트) 경로를 지정한다.
media : 링크 문서(사이트)를 어떤 미디어에 최적화시킬지 지정한다.
rel : 현재 문서와 링크 문서 사이의 관계를 지정한다.
shape : 링크로 사용할 영역의 형태를 지정한다.
target : 링크를 표시할 대상을 지정한다.
type : 링크 문서의 미디어 유형을 지정한다.
3) SVG 이미지
SVG 파일 형식이란?
원래 작은 크기였던 gif나 jpg/jpeg, png 파일을 크게 확대해 나타내면 이미지 테두리 부분이 울퉁불퉁해진다. 이런 이미지를 비트맵 이미지(bitmap image)라고 한다. 반면, 이미지를 아무리 확대하거나 축소해도 원래의 깨끗한 상태 그대로 유지되는 이미지를 백터 이미지(vector image)라고 하는데 그런 이미지가 SVG 이미지다.
SVG 이미지는 <image> 태그를 이용해 파일 형태로 삽입할 수도 있지만 태그를 이용해 직접 만들 수도 있다.
SVG 형식의 한계(Limitations of the format)
SVG 이미지는 래스터 이미지 비해 용량이 큰 경우도 있습니다. 이미지의 용량은 여러 가지 요인 의해서 좌우되고, 경우에 따라서는 SVG가 래스터 이미지 보다도 파일 사이즈가 더 커질 수도 있습니다. 따라서, 몇 가지 테스트를 해 볼 필요가 있고, 대개의 경우는 보정을 통해 파일 크기를 크게 줄일 수 있습니다. 그래픽 툴에서 그리는 모든 요소는 패스로 출력되므로 불필요한 패스를 생성하지 않도록 늘 염두에 두어야 합니다.
SVG 형식은 그래픽 툴을 통해 적용한 블러 또는 색상조정 같은 필터는 지원하지 않습니다. SVG 에서 원본과 동일한 결과를 얻기 위해서는 가능한 심플하게 디자인 하는 것이 좋습니다. 일부 필터는 SVGs에 지원이 되긴 하지만, 대부분의 그래픽 툴은 이런 필터들을 제대로 지원하지 않기 때문에 사용하지 않는 편이 낫습니다.
출처: https://www.designlog.org/2512464 [디자인로그(DESIGN LOG)]
SVG 파일을 지원하지 않는 브라우저를 위해
대부분의 모던 브라우저에서는 svg 파일을 지원하지만 인터넷 익스플로러 8이하를 고려해야 하거나 안드로이드 2.3 이하 버전에서는 svg 파일을 표시할 수 없다. 이런 경우, SVG 이미지 파일 대신 PNG 이미지 파일을 사용해야 한다.
이럴 때는 사용자의 브라우저가 svg 파일을 지원하는지 먼저 테스트를 해보고 SVG를 지원하지 않는다면 <img> 태그의 src 속성에 png 경로를 지정해 주는 식으로 사용한다. 이렇게 브라우저에서 특정 기능을 지원하는지 여부를 테스트해 주는 툴이 Modernizr 이다.
