이미지 관련 태그

이미지 관련 태그

웹에서 사용하는 이미지 형식

• 웹 페이지에서 사용할 수 있는 이미지 파일은 파일 크기가 크지 않으면서도 화질이 좋아야 하기 때문에 몇 가지 파일 형식만 사용할 수 있습니다.

파일 형식	설 명
GIF(Graphic Interchange Form)	표시할 수 있는 색상 수가 최대 256가지 뿐이지만 다른 이미지 파일 형식에 비해 파일 크기가 작기 때문에 아이콘이나 불릿 등 많은 이미지에 주로 사용합니다. 투명한 배경이나 움직이는 이미지를 만들 수 있다는 장점이 있습니다.
JPG/JPEG (Joint Photographic Experts Group)	사진을 위해 개발된 형식으로 GIF보다 다양한 색상과 명암을 표현할 수 있습니다. 저장을 반복하다 보면 화질이 떨어질 수도 있습니다.
PNG(Portable Network Graphic)	투명 배경을 만들면서 다양한 색상도 표현할 수 있으며 네트워크용으로 개발되었기 때문에 최근 많이 사용합니다.

 

<img> 태그 - 이미지 삽입하기

• 웹 문서에 이미지를 삽입할 때는 <img>태그를 사용합니다.
• 이때 src 속성을 사용해 이미지 파일이 있는 경로를 알려 주어야 화면에 이미지를 표시할 수 있습니다.

기본형 : <img src="경로" [속성="값"]>

1. src 속성 - 이미지 파일 경로 지정하기

• 이미지를 웹 문서에 넣으려면 src 속성에 정확한 파일 경로를 지정해야 합니다.
• '경로'란 형재 HTML 문서에서 이미지 파일까지 찾아가기 위한 길로 이 길이 정확하지 않다면 웹 문서에 이미지가 표시되지 않습니다.
• 이때 내 컴퓨터에 이미지 파일이 있는 경우와 웹 상의 이미지 링크를 사용하는 경우에 따라 이미지 경로에 들어가는 값도 다릅니다.

1) 내 컴퓨터의 이미지 파일 경로 지정하기

• 이미지 파일의 경로는 웹 문서 파일의 위치를 기준으로 정해집니다.
• 웹 문서 파일과 이미지 파일이 같은 경로에 있다면 src속성에는 간단히 이미지 파일의 이름만 적으면 됩니다. 예를 들어 index.html 웹 문서 파일과 이미지 img01.jpg 파일이 같은 폴더에 있다면 src 속성에 파일 이름만 적으면 됩니다. ex)<img src="img01.jpg">
• 반면 웹 문서가 있는 폴더에 하위 폴더를 만들고 그 폴더에 이미지 파일을 저장했다면 src속성에 하위 폴더와 함께 이미지 파일 이름을 적어야 합니다. 예를 들어 images라는 하위 폴더가 있고 거기에 있는 img02.jpg 파일을 웹 문서 표시하려면 ex) <img src="images/img02.jpg"> 으로 작성하면 됩니다.
• 반대로 한단계 위에 있는 폴더로 이동하기 위해서는 '..' 기호를 사용합니다. 한단계 아래 폴더로 내려오는 기호는 '/' 입니다.
• 이미지가 삽입된 웹 문서를 다른 사람에게 공유할 때는 html 문서와 함께 이미지 파일이 있는 폴더도 함께 전달해 주어야 해당 컴퓨터에서도 파일 경로를 읽을 수 있습니다.
• 웹 문서를 더 많은 사람들에게 공유하려면 FTP서버에 웹 문서와 함께 이미지 파일을 폴더 그대로 올려야 합니다.

2) 웹 상의 링크를 복사해 이미지 경로 지정하기

• 이미 인터넷에 올라와 있는 이미지 링크를 복사해 이미지 경로를 지정하는 경우 크롬 브라우저에서는 웹 페이지에 넣고 싶은 이미지를 마우스 오른쪽 버튼으로 클릭하고 [이미지 주소 복사]를 선택하면 이미지 경로를 알 수 있습니다.
• 이렇게 복사한 웹 이미지 파일의 경로를 붙여넣기하여 src 속성의 값으로 지정합니다.
• 인터넷 익스플로러 브라우저를 사용한다면 우베 문서에 넣고 싶은 이미지를 마우스 오른쪽 버튼으로 클릭해 [속성]을 선택한 후 속성 창에서 [주소] 부분을 복사해 사용하면 됩니다.
• 주의해야 할 점은 다른 사람이 블로그나 사진 공유 사이트에 올린 사진이나 이미지는 저작권자의 허락 없이 다른 곳에 롬기거나 다운로드해 사용하면 안 된다는 점입니다. 사용이 허락된 상태더라도 개인적인 용도로만 사용할 수 있는지, 상업적인 용도로도 사용할 수 있는지 확인해야 합니다.

2. alt 속성 - 이미지를 설명해 주는 대체 텍스트

• alt 속성은 이미지를 설명하는 대체 텍스트를 삽입할 때 사용합니다.
• 여기서 대체 텍스트란 웹 문서에 삽입한 이미지는 시각적인 요소이기 때문에 시각 장애인들은 그 내용을 알 수 없습니다. 웹 문서를 읽어 주는 화면 낭독기도 문서 상의 텍스트만 읽어 주기 떄문에 이미지를 만나면 건너뛰게 됩니다. 하지만 <img> 태그의 alt 속성을 이용하면 이미지에 대한 설명을 넣을 수 있고 alt 속성의 텍스트를 화면 낭독기가 시각 장애인에게 읽어 줄 수 있습니다.
• 예를 들어 클릭했을 때 홈으로 되돌아 가는 이미지라면 <img src="home.jpg" alt="홈으로 가기"> 와 같이 대체 텍스트를 추가합니다.
• 불릿 이미지나 작은 아이콘처럼 특별한 의미 없이 화면을 꾸미기 위해 사용한 이미지라면 대체 텍스트를 지정하지 않아도 됩니다. 이런 경우 alt=""라고 지정하면 됩니다.

3. width, height 속성 - 이미지 크기 조정하기

• 이미지 파일을 넣을 때 브라우저 창에 원하는 크기로 조정해 넣고 싶다면 width 속성과 height 속성을 사용하면 됩니다.
• 웹 서버에서 다운로드하는 이미지 파일의 용량은 그대로 두면서 사이트 디자인에 따라 이미지를 작게 또는 크게 표시해야 할 경우 width 속성과 height 속성을 이용하면 유용합니다. 다만 이 속성으로 작은 이미지를 크게 표시할 경우 화질이 나빠질 수 있습니다.

4. <figure>, <figcaption> 태그 - 이미지에 설명 글 붙이기

• HTML5 이전에는 이미지에 설명 글을 붙이기 위해서는 <P>태그를 사용해 텍스트 단락은 표시 한 후 위치를 조절해야 했지만 HTML5 에서는 이미지뿐만 아니라 표나 멀티미디어 요소 어디에나 설명글을 함께 붙일 수 있습니다.

 

1) <figure> 태그 - 설명 글을 붙일 대상 지정

• <figure> 태그는 설명 글을 붙여야 할 대상을 지정하거나 웹 문서에서 오디오나 비디오 같은 멀티미디어 파일을 비롯해 사진이나 표, 소스 코드 등 웹 문서 안에서 한 단위가 되는 요소를 묶을 때 사용합니다.
• 한 단위가 되는 요소를 나타내기 위해서는 <figure> 태그만 사용하고 설명 글을 사용하기 위해서는 <figure>안에 <figcaption> 태그를 사용해 설명 글을 표시합니다.
• 예를 들어 이미지만 삽입한다면 <figure> 태그를 사용하지 않다도 되지만 이미지에 설명 글을 넣으려면 이미지를 <figure> 태그로 묶어 주어야 합니다.

 

기본형 : <figure> 요소 </figure>

2) <figcaption> 태그 - 설명 글 붙이기

• 설명 글이 필요한 대상은 <figure> 태그로 묶고 설명 글은 <figcaption> 태그로 묶습니다.
• 설명 글을 붙일 수 있는 대상은 이미지나 오디오, 비디오 같은 미디어 파일이 될 수도 있고 텍스트 단락이나 표가 될 수도 있습니다. 또한 여러 개의 이미지나 미디어 파일에 하나의 설명 글을 표시할 수도 있습니다.

 

기본형 : <figcaption> 설명 글 </figcaption>

 

<figure>
    <img src="img/img01.jpg" alt="이순신장군 동상">
    <figcaption>충무공 이순신 동상은 대한민국 서울특별시 종로구 세종로 광화문 광장에 있는 이순신 동상이다.</figcaption>
</figure>

 

 

참고 : HTML5+ CSS3 웹 표준의 정석