링크와 이미지 요소

 

 

링크와 이미지

: 하이퍼링크 사용하여 문서연결할때는 a요소,

웹문서에 텍스트가 아닌 이미지 개체를 사용할때 img 요소를 사용한다. 

 

1.하이퍼링크(a)

 a 요소는 텍스트나 이미지 콘텐츠에 링크를 설정할 때 사용한다.

 

절대경로와 상대경로

웹 문서에서 링크를 설정하거나 이미지를 삽입 할때 외부 스타일시트 문서를 연결하는 작업등을 할 때는

파일경로를 지정해야 하는데 파일 경로 지정방식에는 "절대 경로"와 "상대 경로"가 있다.

주로 외부사이트나 외부 자원을 연결하는 경우에는 절대 경로를 사용하고 사이트 내부에서 페이지 링크 시 상대 경로를 사용한다.

 

 -절대 경로

   절대 경로는 전체 구조 내에서 위치를 표시하는 방법이다. 만약 로컬 기준으로 절대 경로를 지정하는 경우,

   file:///프로토콜을 시작으로 연결하려는 파일의 전체경로를 명시한다.

 

 -상대 경로

   상대 경로는 작업하고 있는 파일의 현재 위치를 기준으로 경로를 지정하는 방법이다.

   상대 경로의 형식으로 정리해 보면 총 4가지 경우가 있으며 아래와 같다.

  

    1)연결하려는 파일이 현재 편집 중인 문서와 같은 폴더 내에 위치한 경우

    2)연결하려는 파일이 현재 편집 중인 문서보다 하위 폴더에 위치한 경우

    3)연결하려는 파일이 현재 편집 중인 문서보다 상위 폴더에 위치한 경우

    4)연결하려는 파일이 현재 편집 중인 문서와 같은 레벨의 폴더에 위치한 경우

 

WCAG 1.0에서는 a 요소를 설정할 때 구체적인 의미를 가지는 텍스트를 포함하여 작성하도록 권고하고 있다.

 

예시1)

<h2>공개정보 목록</h2>

<ul>

      <li>2020년 7월 목록 <a href="파일이름.hwp"><img src="파일명.gif" alt="다운로드" /></a></li>

</ul>

 

위와 같은 경우에는 링크 목록에 "다운로드"라는 이름으로만 표시되기 때문에 몇년도의 자료인지 알수가 없다.

이때는 title 속성을 사용하여 링크의 설명을 보완하면서 사용자의 활용성을 높여줄수 있다.

 

예시2)

<h2>공개정보 목록</h2>

<ul>

      <li>2020년 7월 목록 <a href="파일이름.hwp" title="2020년 7월 목록">

      <img src="파일명.gif" alt="다운로드" /></a></li>

</ul>

 

위와 같이 변경하면 링크의 title속성은 스크린 리더에서 기본으로 읽어주지 않기 때문에 설정을 바꿔야 하고,

텍스트로 제공하고 있는 같은 정보를 title로 중복제공하는 문제점이 발생한다.

따라서, 예시3과 같이 변경하여 보완가능하다.

 

예시3)

<h2>공개정보 목록</h2>

<ul>

      <li><a href="파일이름.hwp">2020년 7월 목록 <img src="파일명.gif" alt="다운로드" /></a></li>

</ul>

 

위와 같이 변경했을때 스크린 리더로 링크목록을 불러오면 "2020년 7월 목록"으로 표시가 된다.

 

2.이미지(img)

웹문서에 텍스트가 아닌 이미지 개채를 삽입할 때는 빈요소인 img요소를 이용해야 하며,

img요소의 경우 src속성과굵게 alt속성을 활용할 수있다.

그러나 이 두가지 속성이외에 이미지의 크기 정보를 지정하는 것이 좋다. 이미지의 크기정보를 지정할 경우에는 width와 height 속성을 사용한다.

alt속성은 이미지가 보이지 않는 환경에서 대체 텍스트를 제공하기 위한 목적으로 사용하고 이미지 정보와 동등한 정보를 제공해야 한다.

만약 alt속성으로 대체 텍스트를 지정하기 어려운 경우에는 longdesc 속성을 이용하여 이미지에 대한 대체 정보로 연결할 수 있다.

 

이미지 맵(map, area)

이미지 맵은 이미지의 복수 영역에 링크를 설정할 때 사용할 수 있는데

이미지 맵에는 크게 클라이언트 사이드 이미지맵과 서버사이드 이미지맵이 있다.

 

클라이언트 사이드 이미지 맵은 사용자가 이미지의 특정 영역을 클릭할 경우

브라우저에서 클릭한 곳의 좌표를 기준으로 링크위치를 판단하는 형태를 말한다.

이런 동작은 브라우저에서 처리되기 때문에 "클라이언트 사이드 이미지 맵"이라고 부른다.

 

서버 사이드 이미지 맵은 사용자가 이미지의 특정 영역을 클릭하면 서버에 있는

CGI등의 프로그램을 통해 클릭한 곳의 좌표가 서버로 전송된다.

 

이 두가지 유형의 이미지 맵은 서버사이드 이미지 맵보다 클라이언트 사이드 맵이 반응, 처리속도, 키보드 조작등에서

우위에 있기 때문에 WCAG1.0에서는 클라이언트 사이드 이미지 맵을 사용하도록 권고하고 있다.

 

 

※이미지 형식(JPEG,GIF,PNG)

사진 또는 디자인된 시안을 웹에서 사용하기 위해서는 용량등을 최적화한 이미지 파일로 만들어 사용해야 한다.

주로 JPEG,GIF,PNG등의 이미지 확장자를 사용하는데 이 확장자들은 파일 포맷의 차이로 구분된다.

 

1)JPEG(Joint Photographic Experts Group)

JPEG는 손실 압축 방법의 표준형식으로 ISO와 ITU-T에서 제정했다. JPEG를 사용하는 파일 형식을 "JPEG 이미지"라고 부르며

jpg,jpeg,jpe 등의 확장자를 사용한다. JPEG는 웹에서 사진등의 정보를 전송할 때 가장 널리 사용하는 파일 형식으로

24비트의 수백만 가지 색상을 사용하기 때문에 다양한 디자인이나 사진을 압축하는데 효과적이다.

이 압축방법은 문자, 선, 세밀한 격자등 고주파 성분이 많은 이미지의 변환에서는 GIF나 PNG보다 품질이 나쁜경우가 있다.

 

2)GIF(Graphics Interchange Format)

GIF는 비트맵 그래픽 파일포맷으로 1987년 컴퓨서브가 발표했다. GIF는 웹에서 가장 널리 쓰이는 파일 포맷으로

웹에서 오래 전부터 지원하는 양식이다. GIF는 최대 256색까지 저장할 수 있는 비손실 압축형식으로

투명한 이미지(단색 투명)를 제작하거나 애니메이션 등의 기능을 제공하며 파일 크기가 가장 작기 때문에 자주 사용된다.

이 파일 형식은 클립아트나 단순한 컬러와 깔끔한 라인, 회색 또는 단색으로 된 이미지에 적합하다.

이미지의 크기가 많이 커지는 경우 jpg보다 용량이 커질 수 있으므로 최종 용량 크기를 비교하는 것이 좋다.

사진 이미지를 GIF 형식으로 저장하면 색상 정보가 많이 손실되고

색상의 그라데이션이 자연스럽게 표현되지 못하고 계단현상이 나타난다.

 

3)PNG(Portable Network Graphics)

PNG는 비손실 그래픽 파일 포맷으로, 특허 문제가 얽힌 GIF 포맷의 문제를 해결하고 개선하기 위해 고안되었다.

PNG는 GIF보다 약간 더 압축률이 높고 안티에일리어싱과 투명 기능 다른 비트 심도와 저장 방법들을 지원한다.

PNG는 8비트 알파 채널을 사용하여 파일의 투명도를 정의하는데 GIF보다 부드러운 투명도를 지원하고

JPEG보다 깔끔하게 저장되어 웹에서 많이 활용된다.