IR 기법 / Sprites 기법
HTML 이미지 요소를 사용하기
방법
HTML의 <img> 요소를 사용해서 이미지를 삽입하는 방법이다.
대체 텍스트
<img> 요소에는 alt 라는 대체 텍스트를 넣어 줄 수 있는 속성이 있다. 이를 사용해서 스크린 리더 사용자에게 이미지에 대한 정보를 제공해 줄 수 있다.
<button>
<img src="./icon.png" alt="카카오 이미지" />
</button>IR 기법
IR 기법이란?
Image Replacement의 약자로 "이미지 대체" 기법이다. 브라우저에 이미지를 넣을 때 HTML의 <img>가 아닌 CSS의 배경이미지로 이미지를 대체하는 경우가 있다. 하지만 CSS 배경이미지는 대체 텍스트 기능이 없다. 이때, 스크린 리더 사용자를 위해서 대체 텍스트를 제공하는 방법을 IR 기법이라고 한다.
방법 & 대체 텍스트
IR 기법에는 한 가지 방법만 있는 것은 아니다. overflow: hidden, z-index, aria-label 등 여러가지 사용 방법이 있다.
overflow: hidden을 사용하기
overflow: hidden과 CSS의 여러 속성들을 사용하여 대체 텍스트를 감춘다.
<head>
<style>
button {
border: 0;
padding: 0;
}
.icon {
width: 40px;
height: 40px;
background: url("./js.svg") no-repeat top left;
}
.hidden {
position: relative;
overflow: hidden;
clip: rect(0,0,0,0);
clip-path: circle(0);
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
}
</style>
</head>
<body>
<button class="icon">
<span class="hidden">자바스크립트</span>
</button>
</body>z-index 활용하기
position의 z-index의 음수값을 활용하여 이미지 뒤로 대체 텍스트를 감춘다.
<head>
<style>
button {
border: 0;
padding: 0;
}
.icon {
position: relative;
width: 40px;
height: 40px;
background: url("./js.svg") no-repeat top left;
}
.alt-text {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
</style>
</head>
<body>
<button class="icon">
<span class="alt-text" >자바스크립트</span>
</button>
</body>aria-label 활용하기
aria-label 속성을 활용하여 대체 텍스트를 제공한다. 단, 우리나라에서 사용 되는 센스리더(스크린리더기)에서는 aria-label을 읽지 못하는 경우(링크의 aria-label의 참고부분 참조)가 종종 있기 때문에 확인하고 사용하는 것은 권장한다.
<head>
<style>
button {
border: 0;
padding: 0;
}
.icon {
width: 40px;
height: 40px;
background: url("./js.svg") no-repeat top left;
}
</style>
</head>
<body>
<button aria-label="자바스크립트" class="icon">
</button>
</body>Sprites 기법
sprites 기법은 여러 개의 이미지가 들어있는 한 장의 png 이미지를 CSS 배경이미지로 설정한 다음 배경이미지의 위치를 움직이면서 필요한 이미지를 브라우저에 보이도록 하는 기법이다.
이미지의 위치를 계산해주는 도구
sprites 기법을 사용했을 때, 이미지의 위치를 매 계산 하기엔 너무 번거로운 일이다. 이 때, Sprite Cow 도구를 사용하면 쉽게 계산해 준다.
게임에서 사용되는 sprites 기법
게임에서 캐릭터의 움직임을 표현할 때, sprites 기법을 사용한다. 한 동작을 여러 개의 이미지로 표현한다면 브라우저가 서버에 이미지를 요청하는 시간 때문에 캐릭터의 움직임이 자연스럽지 않을 것이다. 그래서 이전부터 게임에서는 sprites 기법을 사용했다.
sprites 기법의 장점
한 장의 이미지를 여러 곳에 재사용 할 수 있다는 장점이 있다.
한 장의 이미지를 사용하기 때문에 웹 사이트에서 서버에 요청하는 횟수가 줄어들어서 브라우저의 속도가 빨라진다. (이미지의 개수가 많을 수록 브라우저의 속도는 느려진다.)
sprites 만드는 도구
Last updated
Was this helpful?