좌충우돌 웹퍼블리셔 일기

대체 텍스트기법

CSS 2012. 6. 27. 15:31

오늘 접근성관련 글을 보다가 무심코 사용했던 text-indent : -9999px에 대한 글을 보게 되었다.

백에 이미지 넣고 안에 있는 글자를 감추기 위해 대체적으로 사용하는 기법인데 텍스트를 브라우저 저 멀리 날려버리는거기때문에 눈에는 보이지 않지만 랜더링할때 브라우저를 크게 그려서 성능을 떨어뜨리는 결과를 가져온다고 한다.

글쓴이는 .hidden {text-indent:100%; white-space:nowrap; overflow:hidden;} 을 권장했다. ie7에서 지원이 안되기 때문에 따로 block를 해줘야 한다고 덧붙였다.

회사 퍼블과 예전에 이 문제에 대해 어떤방법이 좋을지를 의논한적이 있다. text-indent의 경우 a 태그 안에 들어가 있을때 ie6에서 가로사이즈를 제대로 인식 못해 저 멀리 안드로메다로 날아가는 버그가 종종 있기에 아래 방법을 많이 쓴다고 했다. position:relative; index:-1; 을 하게 되면 브라우저를 크게 그리지 않으면서 뒤로 숨어버리기 때문에 괜찮은 방법중 하나이지만 a태그 안에 span태그를 넣어 한번더 싸줘야 한다는게 문제였다. 이방법 저방법 각기 장단점이 있었는데...위 방법을 보니 참 괜찮은 것 같다. 그러나 글쓴이가 말했듯이 ie의 크로스브라우징 문제가 걸리기에 아직까진 구글의 방법을 추천했다.

font-size:0; line-height:0; text-shadow:none; color:transparent;

출처: http://blog.naver.com/aron1210?Redirect=Log&logNo=40159983408

'CSS' 카테고리의 다른 글

ie9 이하 버전의 제한 (0)	2014.02.26
One-Time Expression 한번만 실행시키자. (0)	2012.07.27
하단 풋터고정 (0)	2012.06.07
스크립트 에디터 (0)	2012.05.23
CSS3로 만든 아이폰 (0)	2012.03.20

:

jQuery IE 버전에 Placeholder 적용하기

jQuery 2012. 6. 26. 16:50

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>알찬돌삐</title>
<style type="text/css">
label.absolute {
position: absolute;
color:#999;
display: none;
cursor: text
}
input.focusbox {
border:1px solid #23adb2;
}
input:focus {
outline: #23adb2 solid thin
}
input { padding:4px 1px 3px 5px; border-top:1px solid #b5b5b5; border-right:1px solid #ddd; border-bottom:1px solid #ddd; border-left:1px solid #b5b5b5; }
</style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.7.1");
</script>
</head>
<body>

<input type="text" name="test" placeholder="아이디" style="width:120px" value="">
<br>
<input type="password" name="password" placeholder="비밀번호" style="width:120px" value="">

<script type="text/javascript">
jQuery(function () {
if (!("placeholder" in document.createElement("input"))) {
jQuery(":input[placeholder]").each(function () {
var $this = jQuery(this);
var pos = $this.offset();
if (!this.id) this.id = "jQueryVirtual_" + this.name;
if (this.id) {
if (jQuery.browser.version < 8) {
$this.after("<label for='" + this.id + "' id='jQueryVirtual_label_" + this.id + "' class='absolute'>" + $this.attr("placeholder") + "</label>");
$("#jQueryVirtual_label_" + this.id).css({"left":(pos.left+5), "margin-top":3, "width":$this.width()});
}
else {
$this.after("<label for='" + this.id + "' id='jQueryVirtual_label_" + this.id + "' style='left:" + (pos.left+5) + "px;margin-top:2px' class='absolute'>" + $this.attr("placeholder") + "</label>");
}
}
}).focus(function () {
var $this = jQuery(this);
$this.addClass("focusbox");
jQuery("#jQueryVirtual_label_" + $this.attr("id")).hide();
}).blur(function () {
var $this = jQuery(this);
$this.removeClass("focusbox");
if(!jQuery.trim($this.val())) jQuery("#jQueryVirtual_label_" + $this.attr("id")).show();
else jQuery("#jQueryVirtual_label_" + $this.attr("id")).hide();
}).trigger("blur");
}
});
</script>
</body>
</html>

출처: http://www.i-swear.com/703

확인 : http://jsfiddle.net/d9bnV/

'jQuery' 카테고리의 다른 글

마우스오버 아웃 (0)	2012.07.10
웹접근성에 맞는 탭메뉴 (0)	2012.07.02
폼 요소 선택자 (0)	2012.03.13
각종 예제 사이트 (0)	2011.07.11
JQuery mobile (0)	2011.07.07

:

디자인 참고사이트

Design 2012. 6. 21. 14:27

http://www.gdweb.co.kr/

http://mobiletalk.kr/

'Design' 카테고리의 다른 글

저작권 없는 무료 이미지 사이트 모음. (0)	2011.06.29
png의 용량을 줄여주는 프로그램 (0)	2011.06.24
나인패치 포토샵 수정 (0)	2011.06.10

: