이미지 표현 방법

웹 사이트에서 이미지를 표현하는 방법

1. HTML 태그를 통해서

HTML의 img 태그를 이용하여 문서에 이미지를 넣을 수 있습니다. 일반적으로 의미가 있는 이미지를 넣을 떄 사용하면 의미가 있는 이미지로는 로고, 메뉴 등이 있습니다.

img 태그의 속성으로 src, alt, width, height을 살펴봅시다.

src 속성

src 속성은 img 태그의 필수 속성입니다. src를 통하여 페이지에 삽입하고자 하는 이미지의 경로는 표현합니다. 경로는 상대경로, 절대경로 모두 가능합니다.

alt 속성

alt 속성은 이미지가 보여지지 않을 경우에 대비하여 적은 문자로 대체 문자라고 합니다.

alt 속성을 적어야 하는 이유
• 사용자가 시각장애인 경우 이미지 대신 대체문자를 읽어주어 도움을 됩니다.
• 파일명을 잘목 적었을 경우 들어가야 했을 이미지를 알 수 있습니다.
• 텍스트만 지원되는 브라우저(Lynx)를 사용하는 경우 지원이 안되는 사용자가 있습니다.
• 텍스트를 제공하여 검색엔지의 색인에 도움이 됩니다.
• 데이터가 비싸거나 제한된 지역이거나 이미지를 의도적으로 꺼 놓았을 경우 도움이 됩니다.

width, height 속성

<img>는 크기가 외부적인 요소에 의해 정해지지만 width, height 속성을 통하여 이미지의 크기를 인위적으로 조정할 수 있습니다.

2. CSS 속성을 통해서

CSS의 background 속성을 이용하여 문서에 이미지를 넣을 수 있습니다. 일반적으로 의미가 없는 이미지를 넣을 때 사용하면 의미가 없는 이미지로는 배경, 색표현 등이 있습니다.

CSS의 background-image, background-repeat, background-size, background-position 속성을 살펴봅시다.

background-image 속성

background-image 속성에 url() 메서드를 사용하여 경로를 표현하면 이미지를 넣을 수 있습니다.

background-repeat 속성

background-repeat 속성을 사용하면 이미지 반복의 제어할 수 있습니다.

• no-repeat : 배경이 반복되지 않도록 합니다.
• repeat-x : 수평으로 반복합니다.
• repeat-y : 수직으로 반복합니다.
• repeat : 기본값; 양방향으로 반복합니다.

background-size 속성

background-size 속성을 사용하면 이미지 크기를 조정할 수 있습니다.

• cover : 이미지에 비하여 영역이 작을 때 이미지를 충분히 크게합니다. 이 경우 이미지가 영역 외부에 있을 수 있습니다.
• contain : 이미지가 영역 안에 적합한 크기로 만듭니다. 이 경우 이미지와 영역의 가로세로 비율이 다른 경우 간격이 생길 수 있습니다.

background-position 속성

background-position 속성을 사용하면 이미지를 배치할 수 있습니다.

"background-position: 가로 세로;" 형태로 사용하며 값으로 키워드(top, center 등), 길이, 백분율이 사용 가능하면 혼합도 가능합니다.

3. 이미지 스프라이트(Image Sprite)

이미지 스프라이트는 여러 개의 이미지를 하나의 이미지로 합하여 관리하는 것을 의미합니다.

이미지를 사용할 때 웹 페이지는 이미지를 별도로 다운 받아야합니다. 그래서 등장한 것이 이미지 스프라이트 입니다. 이미지 스프라이트를 이용하면 요청을 줄일 수 있습니다. 이는 로딩 시간을 단축해주는 효과가 있습니다.

예시