백그라운드 이미지/ir 효과

백그라운드 이미지 / ir 효과

배경에 이미지를 넣고 웹접근성을 준수하는 효과입니다.

---

1. 백그라운드 이미지

HTML에 이미지를 넣기 위해선 <img> 태그를 사용해야 합니다. 하지만 CSS를 이용해 배경에 이미지를 넣는 방법이 있습니다.
'background-image: url("")' 을 사용하면 배경에 이미지를 직접 넣을 수 있습니다. 하지만, 이미지에 링크를 걸거나 이미지의 설멸을 적어 웹표준을 준수할 수는 없습니다.

2. ir 효과

웹표준을 준수하기 위해선 이미지에 설명을 넣어야 하며 <img> 태그를 사용시 "alt"를 이용해 준수할 수 있습니다
하지만 백그라운드 이미지는 직접 넣을 수 없는데 이 때 대신 사용하는 것이 ir 효과 입니다.

▶ 의미있는 이미지의 대체 텍스트를 제공하는 경우

ir {
　　display: block;
　　overflow: hidden;
　　font-size: 0;
　　line-height: 0;
　　text-indent: -9999px;
}

▶ 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주는 경우

ir {
　　display: block;
　　overflow: hidden;
　　position: relative;
　　z-index: -1;
　　width: 100%;
　　height: 100%;
}

▶ 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 경우

ir {
　　overflow: hidden;
　　position: absolute;
　　width: 0;
　　height: 0;
　　line-height: 0;
　　text-indent: -9999px;
}