HTML & CSS IR효과

IR효과란?

▶ HTML과 CSS에서 IR 효과는 이미지 대체 텍스트(Image Replacement)를 의미하는데,
이는 시각 장애인을 포함한 사용자가 웹 페이지의 이미지를 이해할 수 있도록 도와주는 기술을 말합니다.
해당하는 CSS기법에는 .ir_pm, .ir_wa, .ir_so 3가지가 있는데 오늘은 해당 기법이 무엇인지에 대해 알아볼까합니다.

1. IR효과를 사용하는 이유

1. 웹 접근성: 시각 장애를 포함한 다양한 사용자들이 웹 페이지를 이해하고 사용할 수 있도록 하는 것이 중요합니다. 이미지에 대체 텍스트를 제공함으로써 시각적으로 이미지를 인식할 수 없는 사용자도 해당 이미지에 대한 정보를 얻을 수 있습니다. 이는 접근성을 높이고 다양한 사용자들이 웹 사이트를 사용할 수 있도록 돕습니다.

1. 검색 엔진 최적화(SEO): 검색 엔진은 이미지를 읽지 못하고 텍스트 정보만을 인식할 수 있습니다. 따라서 이미지에 대체 텍스트를 제공함으로써 검색 엔진이 해당 이미지를 이해하고 적절한 검색 결과에 포함시킬 수 있습니다. 이는 웹 페이지의 SEO를 향상시키고 사용자들이 검색에서 해당 페이지를 찾을 확률을 높입니다.

1. 디자인적인 측면 : 이미지에 대체 텍스트를 대신하여 표시함으로써 디자인을 유지하면서도 접근성을 고려할 수 있습니다.

2. .ir_pm

▶ .ir_pm은 CSS에서 IR(이미지 대체 텍스트) 기술을 사용하여 이미지를 숨기고 대체 텍스트를 표시하기 위한 클래스 이름입니다.
“ir_pm”에서 “ir”은 이미지 대체 텍스트를 숨기는 기술을 가리키고, “pm”은 “presentation mode”의 줄임말로, 시각적으로 이미지가 보이지 않고 대체 텍스트만 나타나는 상태를 나타냅니다.
아래는 .ir_pm 클래스를 사용하여 IR 효과를 구현한 예시입니다.

//html
<div class="ir_pm">
    대체 텍스트 예시
</div>

//css
.ir_pm {
    text-indent: -9999px; /* 이미지를 화면 밖으로 숨김 */
    overflow: hidden; /* 이미지가 넘치는 부분을 잘라냄 */
    display: block; /* 블록 레벨 요소로 변경 */
    width: 200px; /* 이미지 너비 설정 */
    height: 200px; /* 이미지 높이 설정 */
    background-image: url('이미지 주소');
}

▶ 이렇게 설정하면 이미지는 화면에서 숨기고, 대신 대체 텍스트인 “대체 텍스트 예시”라는 문구를 표시합니다. 배경 이미지는 “이미지 주소”에 해당하는 이미지로 설정됩니다.

3. .ir_wa

▶ .ir_wa는 “Image Replacement with Anchor”의 약어로, 링크를 포함한 이미지를 대체 텍스트로 숨기는 CSS 기술을 나타냅니다.
이 기술은 시각적으로 이미지가 아닌 텍스트로 보이지만 실제로는 이미지를 클릭할 수 있는 링크로 사용됩니다.
아래는 .ir_wa 클래스를 사용하여 Image Replacement with Anchor 효과를 구현한 예시입니다.

//html
<a href="#" class="ir_wa">링크 텍스트</a>

//css
.ir_wa {
    display: block; /* 블록 레벨 요소로 변경 */
    text-indent: -9999px; /* 텍스트를 화면 밖으로 숨김 */
    overflow: hidden; /* 넘치는 부분을 잘라냄 */
    width: 200px; /* 이미지 너비 설정 */
    height: 200px; /* 이미지 높이 설정 */
    background-image: url('이미지 주소'); /* 이미지 설정 */
}

▶ 이렇게 설정하면 .ir_wa 클래스는 “링크 텍스트” 대신 이미지가 표시되고, 사용자가 링크를 클릭할 수 있습니다.

4. .ir_so

▶ .ir_so는 “Image Replacement with SVG”의 약어로, SVG(Scalable Vector Graphics) 이미지를 사용하여 이미지 대체 텍스트를 숨기는 CSS 기술을 의미합니다. SVG를 이용하면 이미지를 벡터 형식으로 표현할 수 있어 해상도에 관계 없이 선명하게 표시될 수 있고, 대체 텍스트도 포함할 수 있어 웹 접근성을 높일 수 있습니다.
아래는 .ir_so 클래스를 사용하여 Image Replacement with SVG 효과를 구현한 예시입니다.

//html
<div class="ir_so">
    대체 텍스트 예시
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="100" height="100" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="40" fill="#007bff"/>
    </svg>
</div>

//css
.ir_so {
    position: relative;
    width: 100px;
    height: 100px;
}

.ir_so svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    fill: none;
}

▶ 이렇게 설정하면 .ir_so 클래스는 “대체 텍스트 예시”를 화면에 표시하고, 그 아래에 SVG 이미지가 숨겨지게 됩니다.
SVG 이미지는 svg 요소를 사용하여 정의되는데, aria-hidden=”true” 속성을 사용하게 되면 스크린 리더 등에서는 이미지가 숨겨진다고 인식하게되고
이렇게 함으로써 시각적으로는 텍스트가 보이지만 실제로는 이미지가 대체될 수 있게 됩니다.

이렇게 오늘은 IR효과에 대해 알아봤는데요,
면접을 준비할 때 나올 수 있는 질문인만큼 미리미리 숙지해서 알아두면 좋겠죠?
그럼 다음엔 또 다른 면접 정보들을 가져와보도록 하겠습니다 😁!