이미지와 하이퍼텍스트 링크

웹에서 사용되는 이미지 파일 형식은?

웹 페이지는 기본적으로 설명은 텍스트, 메뉴나 로고 등은 이미지로 처리 한다. 웹 페이지의 경우 크기가 작고 화질이 좋은 파일 형식을 사용하여야 하는데 웹에서 사용할 수 있는 파일 형식은 GIF, JPG/JPEG, PNG 파일이 있다.

img 태그

HTML에서 이미지를 삽입하는 태그는 태그이다. 이 때 src 속성을 사용하여 해당 이미지의 주소를 넣는다.

img 태그에는 src속성과 alt속성이 있는데 src는 해당 이미지의 주소, alt는 설명이 들어간다.
다시 돌아가 파일 경로에 대해 살펴보자. 내 컴퓨터에 있는 이미지를 사용한다면 그에 맞는 파일명, 다른 폴더에 있는 경우 하위 폴더와 함께 적어주면 된다. ‘/‘는 하위폴더를 나타낸다.(한단계 위는 ‘..’을 사용한다.)

웹 상의 이미지 또한 링크 주소를 받아 붙여넣을 수 있다. 해당 사이트가 닫히지 않는 이상 사용할 수 있다. 단 이 경우 저작권에 주의하여야 한다.

alt는 이미지를 설명하는 대체 텍스트를 달 때 사용하는 속성이다. 이를 사용할 경우 시각 장애인에게 화면 낭독기가 이미지를 설명해 줄 수 있다.

width, height 속성은 너비와 높이를 조정하는 속성이다.

img의 기타 속성들

• figure, figcaption : 설명 속성 태그

이미지에 설명을 함께 붙이고 싶을 때 사용하는 태그이다. figure태그는 설명 글을 붙일 대상을 지정합니다. 예를 들어 figure태그 안에 img태그와 figcaption태그를 넣게 되면 이미지 밑에 캡션이 달리게 됩니다.

링크

텍스트를 클릭하면 연결된 주소로 즉시 이동하게 하는 기능이 링크이다.

• a태그와 href 속성.

사실상 링크에서 가장 중요한 두 요소이다. a태그를 이용하여 링크를 걸고 href 속성에 주소를 넣는다. 그 외에 속성으로는
target(링크한 내용이 표실될 위치, 현재 창 혹은 새 창), download(링크 다운로드), rel(관계 알리기), hreflang(링크한 문서 언어 설정), type(파일 유형)

SVG 이미지

최근 웹 브라우저에서 svg 파일을 지원하면서 아이콘이나 로고에 많이 사용되고 있다. 이미지를 확대, 축소해도 깨끗한 상태로 유지되는 것이 바로 벡터 이미지이고 그 확장자명이 svg이다.

다음 시간에는 폼 태그에 대해 다루겠습니다.