CSS 이미지 교체

CSS 이미지 교체는 Cascading Style Sheet를 사용하여 웹 페이지의 텍스트를 해당 텍스트가 포함된 이미지로 대체하는 웹 디자인 기법이다.화면 판독기, 텍스트 전용 웹 브라우저 또는 이미지 또는 스타일 시트에 대한 지원이 비활성화되거나 존재하지 않는 기타 브라우저의 사용자가 페이지에 접근할 수 있도록 하는 한편, 이미지가 스타일마다 다를 수 있도록 하기 위한 것이다.또한 Todd Fahrner의 이미지 교체라는 이름으로 불리며, 2003년에 이미지 교체에 대한 원래 아이디어로 인정받은 사람 중 한 명이다.^[1]

동기

HTML 문서에 이미지를 삽입하는 일반적인 방법은<img>그러나 이 방법은 접근성 및 유연성과 관련하여 다음과 같은 단점이 있다.

• 속성은 영상 콘텐츠의 텍스트 표현을 제공하도록 설계되어 있지만, 이는 텍스트 표현에서 HTML 마크업을 사용하지 못하게 하고 일부 검색 로봇에 문제를^{[example needed]} 일으킨다.
• 사용<img>텍스트를 표시하는 태그는 현재적 요소다. 많은 웹 디자이너들은 현재적 요소를 CSS 스타일 시트에 배치함으로써 HTML 컨텐츠로부터 분리해야 한다고 주장한다.
• 다음을 사용하여 참조된 이미지<img>태그는 CSS를 통해 쉽게 변경될 수 없으며, 대체 스타일시트에 문제를 야기한다.

화씨 이미지 교체는 이러한 문제들을 해결하기 위해 고안되었다.

구현

더글러스 보우먼이 기술한 원래 이미지 교체^[1] 구현은 머리글을 사용했는데, 그 안에는 다음과 같은 내용이 들어 있었다.<span>제목 텍스트를 포함하는 요소:

<h3 id="firHeader"><span> 헤드라인 샘플</span></h3>

이어 스타일시트를 통해 제목에 원하는 이미지가 담긴 배경이 주어졌고, 그 배경에는 다음과 같은 내용이 담겨 있었다.<span>그것을 설정하여 숨겨져 있는.displayCSS 속성:none:

#퍼헤더 {   너비: 300px를 붙이다;   높이: 50px를 붙이다;   배경: #FFFF url(퍼헤더.gif) 맨 위의 남겨진 무통행의; }  #퍼헤더 스판하다 {   전시하다: 없는; } 

그러나 이 방법은 일부 스크린 독자들이 표제를 완전히 건너뛰게 한다는 사실을 곧 알게 되었다. 그들은 어떤 텍스트도 읽지 않을 것이기 때문이다.display의 재산.none2003년에 Mike Rundle에 의해 개발된 후기 Park 방법은 대신 그 방법을 사용했다.text-indent이 문제를 해결하기 위해 이미지 영역 밖으로 텍스트를 밀어내는 속성:

#퍼헤더 {   너비: 300px를 붙이다;   높이: 50px를 붙이다;   문자로 된: -5000px를 붙이다; /* ← 파르크 */ } 

그러나 Park 방식은 자체적인 문제가 있었다; CSS가 켜져 있지만 이미지가 꺼져 있는 비주얼 브라우저에서는 아무것도 표시되지 않았다.

또한 2003년 데이브 시아의 어원 시아 방식은 앞서 언급한 두 가지 문제를 추가 비용을 들여 해결한다.<span>:

<h3 id="header"><span>개정 이미지 교체</h3>

절대적으로 빈 공간을 배치함<span>텍스트 요소 위에 텍스트가 효과적으로 숨겨져 있다.영상이 로드되지 않으면 영상 뒤에 텍스트가 계속 표시된다.이 때문에 투명성이 있는 이미지는 시아 방식으로는 사용할 수 없다.

#머리글 {   너비: 329px를 붙이다;   높이: 25px를 붙이다;   포지션: 상대적; }  #머리글 스판하다 {   배경: url(퍼헤더.gif) 무통행의;   포지션: 절대적;   너비: 100%;   높이: 100%; } 

그 이후로 십여 가지 이상의 다른 방법들이 서로 다른 수준의 호환성과 복잡성을 가지고 개발되었다.^[2]

참조

외부 링크

• 수정된 이미지 교체 – Dave Shea의 다양한 FIR 기술 개요
• Ultimate Image Replacement – Jesse Schoberg의 종합적인 이미지 교체 기술