포럼
지금 레이아웃에서 사용하는 h1 IR기법에 대해 정찬명님께 질문드립니다.
2011.01.13 11:50
IR(Image Replacement) 기법이란 무엇입니까?
의미가 포함되어 있는 이미지를 배경으로 처리하고 대신 전경에 상응하는 텍스트를 넣는 방법으로써 시각이 있는 사용자는 이미지로 처리된 화면을 볼 수 있지만 '화면 낭독기를 사용하는 시각 장애인, CSS 제거, 인쇄' 시에는 텍스트 데이터에 접근하거나 텍스트를 볼 수 있는 형태로 설계하는 기법을 말합니다. 이 기법의 장점은 접근성을 떨어뜨리지 않으면서도 검색엔진으로부터 높은 가중치를 받을 수 있다는 점 입니다. 한편 모바일 브라우징 장치에서 전송 요금 등을 고려하여 일부러 이미지를 끈 상태로 웹 사이트를 이용하는 사용자에게는 이미지와 텍스트가 모두 출력되지 않기 때문에 치명적일 수 있습니다. 따라서 의미가 포함된 이미지는 전경으로 처리한다는 원칙을 먼저 세우고 여러 조각의 이미지가 전송 성능에 영향을 미치지 않도록 고려해야 하는 경우에만 Sprite(조각난 이미지들을 하나의 이미지로 배경 처리해서 전송 성능을 높이는) 기법과 함께 사용하는 것이 좋습니다.
지금 xe 레이아웃의 h1관련 질문입니다.
사용하는 레이아웃의 css는
.header,
.footer{background:url(bgHeaderFooter.gif) no-repeat}
.header{position:relative;z-index:2;zoom:1;background-position:0 -42px;background-color:#fff}
.header h1{margin:0}
.header h1 a{display:block;width:200px;height:0;padding:81px 0 0 0;overflow:hidden}
html은
<h1><a href=">XE : Xpress Engine</a></h1>
이런 형태입니다.
이런 형식의 처리방법이라면 비권장이 아닌가 싶어서 여쭤 봅니다.
참 위글에는 없지만 프린트시에 h1으로 사용하고 있는 로고가 프린트 안될 수 있다면서 비권장 이유를 추가해 주신걸로 알고 있습니다.
댓글 2
-
ForHanbi
2011.01.13 12:23
솔직히 정찬명님의 말씀이 저에게는 하나의 지침같은 영향을 미치는지라...
(워낙 정찬명님을 통해 배우고 익히는게 많은지라 ^^&)
이글 덕분에 조금더 h1의 IR기법에 대해 보다 유연하게 접근할 수 있게 되었습니다.
빠른답글 감사합니다.
좋은 지적이세요.
저는 IR 기법을 사용하면서 인쇄할 때 일부 이미지가 보이지 않는 것과 페이지 전송 성능 가운데 무엇이 더 중요한지 결정해야만 했습니다. 그리고 이런 결정은 항상 일관성있게 내려지지 않는데요. 그 이유는 상황을 고려하기 때문입니다.
이번 경우에서는 사이트 로고가 인쇄되도록 하는 것보다 페이지 전송 성능이 더 중요하다고 결정을 내린 것이죠.
왜냐하면 사이트 로고와 메뉴가 인쇄할 때 꼭 출력이 되어야 하는 것인지를 생각할 때 그렇지 않아도 된다고 생각한 것입니다.
사이트 로고와 메뉴가 인쇄되지 않을 때 그것을 대체할만한 정보가 용지 상단에 출력이 됩니다.
<title>...</title>을 통해서 문서의 제목 + 게시물 제목이 표시가 됩니다.
인쇄할 때 꼭 출력되어야 한다고 생각하면 전경 이미지를 사용할 것입니다.
제 판단이 옳은 선택이라는 것을 말씀드릴 의도는 아닙니다.
왜 IR 기법을 선택했는지에 대하여 설명을 드렸습니다.