CSS 웹에서 이미지 표현방법/ir효과

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

[참고1]

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

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;

ir 효과

웹표준을 준수하기 위한 가상 대체문자 기법

[참고2]
IR 효과(Image Replacement)란?
  • IR 기법은 이미지의 대체텍스트를 제공하기 위한 CSS 기법으로 아래와 같이 다양한 CSS 기법을 사용하여 이미지의 대체 텍스트를 제공할 수 있습니다.
  • 여러 가지 기법 중에서 Phark Method와WA IR, Screen out 기법을 주로 사용하여 대체텍스트를 제공할수있습니다.
1. ir_pm | Phark Method
  • 의미있는 이미지의 대체 텍스트를 제공하는 경우

이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로 (-9999px만큼 내어 쓰기) 빼내어 보이지 않게 하는 방법

.ir_pm { display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px; }
2. ir_wa | WA IR
  • 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고 싶을 때

이미지로 대체 할 엘리먼트에 배경이미지를 설정하고 글자는 span 태그로 감싼 후 z-index:-1을 이용하여 화면에 보이지 않게 처리

.ir_wa { display: block; overflow: hidden; position: relative; z-index: -1; width: 100%; height: 100%; }
3. ir_so | Screen Out
  • 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때
.ir_so { overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px; }