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

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

적은 예시들 공부했던 예시들로 변경

1. HTML 태그 통해서(img 태그)
2. CSS 속성 통해서(background 속성)
3. 이미지 스프라이트

1. HTML 태그를 통해서 : img 태그

• 이미지 의미가 있을 때 사용합니다. | 예시:로고, 메뉴
• alt 태그를 이용해서 대체 문자를 적습니다.
  *alt 태그 : 이미지가 없을때 출력할 대체 문자 표현 (웹접근성조건)

<img src="이미지 주소" alt="대체 문자" >

2. CSS 속성을 통해서 : background 속성

• 이미지가 의미가 없을 때 사용합니다. | 예시:배경, 색표현
• 의미가 없기 때문에 대체 문자를 적을 필요가 없습니다
• 하지만 웹 표준을 준수하기위해 가상 대체문자 기법(ir효과)을 사용하여 대체 문자를 css속성으로 표현합니다

background: url(이미지 주소) center top repeat-x;
background: url(이미지 주소) center top repeat-x;

3. 이미지 스프라이트(가장 많이 쓰는 방식)

여러 개의 이미지를 하나의 이미지로 합쳐서 관리합니다. 위 기법을 사용하면 이미지 관리가 용이하며 웹페이지의 로딩 시간 및 용량을 줄일 수 있습니다. 위 기법으로 이미지를 넣을 때는 웹표준 준수를 위해 가상으로 대체 문자를 만들어야 합니다.

background와 ir 효과를 통해서 이미지를 표현

가상으로 대체 문자를 만들어 주기 위해서는 IR 기법을 사용합니다. 먼저 이미지의 크기를 지정 해주고 Background 태그를 사용해서 이미지를 넣습니다. 그 후에 Background-position을 사용해서 이미지 위치를 지정하여 원하는 이미지를 로딩 합니다.

width: 23px; height: 23px;
background: url(../img/icon.png) no-repeat;
background-position: -150px -120px;