html5 검사시 summary 오류

Html5 2012. 10. 8. 15:36

html5로 마크업하고 validator 검사를 하는데 계속 오류가 떠서 대체 왜이런가 해서 살펴보았다. 영어번역을 보면 장애인에게 충분한 정보제공이 안된다는등의 내용같은데 정확하게 이해가 안되서 찾아보니...아래와 같은 내용이 있었다.

야무님께사 작성하신글을 퍼왔다.

[펌!]Table Summary Attribute - Differences Between HTML 4.01 and HTML5

In HTML5 it is recommended to use summary for special cases only.

In most cases it would be better to explain a table using the caption element,

or a text paragraph before and/or after the table.

HTML5에서는 HTML4.01, XHTML1.0에서와는 다르게 <table> 요소에 summary 속성을 사용하면

유효성 검사(Validator)에서 오류가 발생합니다. 이유는 위에서 설명되는 바와 같습니다.

HTML 이전 버전에서는 복잡한 테이블에 summary 속성을 써서 스크린 리더 사용자에게

설명 텍스트를 제공하자는 제안이 있었습니다. 그것보다는 다음에 설명하는 방법이 더 좋습니다.

특별한 경우에만 summary 속성을 사용하길 권장합니다.

대부분의 경우 <caption> 요소를 사용하거나, 테이블 앞/뒤에서 설명하는 단락을 넣는 것이

summary 속성을 사용하는 것 보다 낳은 방법입니다.

summary 속성을 사용하지 않기를 권하는 이유는 현실적으로 그 내용을 이해하는 사람이 거의 없기 때문입니다.

시각적 사용자 에이전트에서는 이 속성을 표현하지 않으므로 이 속성을 작성한 저자 자신은 보통 그것을 테스트

해볼 수 없어서 보조 기술을 사용하는 사람에게 거의 도움이 되지 않는 내용을 사용합니다.

이러한 이유로 접근성 도구들은 이 속성을 사용자에게 노출하지 않게 되었습니다. 이 속성을 가장 잘 사용하는

몇몇 저자들조차 종종 잘못 사용하곤 하는데, 예를 들어 사실 모든 사람에게 유용할 정보를 넣는다거나 테이블 밖에서

제공되는 정보와 중복된 것을 사용하는 등입니다.

[출처] HTML5에서 Table 요소에 summary 속성을 사용하면 유효성검사시, 통과하지 못하는 이유는? (웹표준화,대한민국의식개선프로젝트) |작성자 야무

이와 관련된 웹접근성연구소의 전문가상담 답변.

summary 속성이 HTML5 규격에는 포함되지 않지만 브라우저들이나 보조기기에서는 지원하고 있기 때문에 마크업 오류를 무시하고 사용하셔도 무방합니다. 그리고 caption 요소를 적절히 사용하신 경우 summary 속성을 제공하지 않으셔도 무방합니다.

HTML5 규격에서 summary 속성이 사라지게 된 배경에는 summary 속성으로 제공할 내용을 caption 또는 표 이전에 화면에 출력되도록 하는 방식으로 제공하는 것이 더 바람직하다는 내용이 있으니 참고하시면 좋겠습니다.
http://lists.w3.org/Archives/Public/public-html/2011Apr/0091.html

'Html5' 카테고리의 다른 글

html4 와 html5의 차이점 (0)	2012.11.09
iframe 사용 (0)	2011.04.05
HTML5의 새로운 태그를 IE에서도 사용하는 방법 (0)	2011.03.30
html5 브라우저 호환 준비하기 (0)	2011.03.30
HTML5 문서의 구조 (0)	2011.03.30

:

ie6 이상한아이 발견~!

크로스브라우징 2012. 9. 6. 11:02

#wrap {/*position:relative;*/ background:url(../images/common/bg.gif) repeat-x;}

ie 테스터로 본것이기때문에 브라우저도 동일하게 나오는지는 확인을 못햇다.

이번에 코딩하면서 이상했던것....

가장 상위 div에 background 를 반복시키면 position:relative; 가 들어간 div가 위에 있을 경우 margin-top이 먹질 않는다....

익스는 ie6,7을 대상으로 강제업데이트를 했으나....아직도 ie6을 쓰는곳이 있다 -_-; ㅋ

왠만하면 말 안나오게 다 맞추는 편인데 예전 프레임셋을 쓰면서 body 에 background를 넣었을경우 무한반복되는 현상으로 인해 body안에 이미지를 안넣고 상위 div 에 넣었는데 이미지 반복시키니까 margin-top 부분이 이상해진다.

문제는 바로 위에 있던 div 에 position:relative; 가 들어가있다는 건데..뺄수가 없다. 하나하나 지워가다보니....결국 bg 반복이 문젠데.....가장 상위 div에 position:relative; 를 넣고 해결했다.

ie6은 파도파도 끝이 없다. 왠만한 버그는 다 섭렵했다고 생각했거늘..-_-;ㅋ...

'크로스브라우징' 카테고리의 다른 글

윈도우10 엣지브라우저 전화번호 형태 링크없앰 (0)	2016.06.08
ie6 주소창고정프레임셋 백그라운드 버그 (0)	2011.12.01
ie6/ie7 border-collapse 문제 (0)	2011.11.23
익스플로러 filter 적용 문제 (0)	2011.06.13
word-break 이런 문제가.... (0)	2011.05.31

:

신현석님 Jquery AIP 정리

jQuery 2012. 8. 29. 15:43

http://hyeonseok.com/soojung/javascript/2011/06/04/658.html

'jQuery' 카테고리의 다른 글

이미지 배너 (0)	2014.05.13
div 안에 있는 엘리먼트 합 구하기 (0)	2013.02.03
마우스오버 아웃 (0)	2012.07.10
웹접근성에 맞는 탭메뉴 (0)	2012.07.02
jQuery IE 버전에 Placeholder 적용하기 (0)	2012.06.26

:

One-Time Expression 한번만 실행시키자.

CSS 2012. 7. 27. 13:14

Expression.

인터넷 익스플로러(IE6,7)에서만 사용할 수 있는 CSS 표현입니다.

말도 많고 탈도 많은 녀석이죠.

자바스크립트가 최소단위인 천분의 일초로 작동을 한다면

이녀석은 수천분의 일초 아니 거의 만분의 일초까지도 되는 것 처럼 작동을 합니다.

(직접 세어보지는 않았습니다. 그냥 느낌이에요 느낌상-_-;)

예를 들어,

IE6에서는 표현이 불가능한 postion: fixed 속성을 expression으로 표현하면

스크롤을 겁나 빨리 내리고 올려도 울렁거림 없이 거의 완벽한 동작을 보여줍니다.

어떠한 동작(이벤트)이든 일어나는대로

이 수천분의 일초 간격으로 계속 대기하고 읽어들이고 값을 던져주고 있다는 겁니다.

그래서 브라우저에 부담을 주고 심지어는 브라우저를 멈추거나 셧다운-_- 시켜버린다는
무시무시한 소문을 안고 다니는 녀석이죠.

그래도 IE6에서는 지원되지 않는 수많은 CSS 속성을

expression을 사용하여 자바스크립트 언어로 표현이 가능한

엄청난 강점을 갖고 있어서 외면하려고 해도 가끔은 생각이납니다.-_-;

대략 2년 전인가요.

야후에서 근무하는 어떤 멋진(wow) 분이- (지금은 구글 olleh!)

expression의 살인적인 아니 살브라우저적인 호출을 상당히 줄여줄 수 있는 방법을 제시했습니다.

One-Time Expressions : http://stevesouders.com/hpws/onetime-expressions.php

위 페이지에 대한 고찰 : http://vacskamati.blogspot.com/2008/10/one-time-execution-of-ie-css.html

저 페이지를 처음 보았을 당시 전 이제 막 웹표준의 웹을 시작하고 있었던 터라

"음. 이런게 있군- expression 무서운 녀석." 이라고 그냥 넘기고 말았는데요.

오늘 max-height 때문에 expression을 써야하나 고민을 잠깐 하다가
max-height 같은 경우는 position: fixed 처럼 계속해서 읽어들일 필요가 없이
페이지 열릴때 한번만 잡아주면 되거든요.

정말로 작동을 하는지, 진짜 차이가 있는건지 궁금해서 테스트 페이지를 한번 만들어 보았습니다.

예제 파일 : http://mkyoon.tomeii.com/expression.html (IE6, 7에서 보셔야 합니다.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>One-Time Expressions</title>
<style type="text/css">
     .onetime {
          width: 200px;
          padding: 10px;
          border: 2px solid #666;
          overflow: hidden;
          /* 생각없이 쓴 expression */
          height: expression( setCntr(), this.scrollHeight > 99 ? "100px" : "auto" );
          /* 멋진 아저씨가 추천한 방법 */
          /*height: expression(
               setCntr(),
               new Function('el', 'el.style.height = el.scrollHeight > 99 ? "100px" : "auto";')(this)
          );*/
     }
</style>
<script type="text/javascript">
//<![CDATA[
     var gnExpr = 0;
     var gCntrDisplay;
     var gbOn = true;

     function setCntr() {
          gnExpr++;

          if ( gbOn ) {
               displayCntr();
          }

          return true;
     }

     function displayCntr() {
          if ( ! gCntrDisplay ) {
               gCntrDisplay = document.getElementById("cntrdisp");
          }

          if ( gCntrDisplay ) {
               gCntrDisplay.value = gnExpr;
          }
     }

     function setDisplay(bOn) {
          gbOn = bOn;
     }

//]]>
</script>
</head>
<body>
     <input type="text" size="10" id="cntrdisp" disabled="disabled"/>
     <div class="onetime">
          (마우스를 움직여보세요.)
          우리는 달려간다 이상한 나라로 니나가 잡혀있는 마왕의 소굴로 
          어른들은 모르는 사차원세계 날쌔고 용감한 폴이 여깄다
          마술차 마술봉 딱부리 삐삐 찌찌 힘을 모으자 대마왕 손아귀에 니나를 구해내자 
          띠이빠빠 띠이빠빠 달려간다 삐삐
     </div>
     <p>출처 : http://stevesouders.com/hpws/onetime-expressions.php</p>
</body>
</html>

'생각없이 쓴 expression' 부분과

주석처리된 '멋진 아저씨가 추천한 방법' 을
주석부분을 바꿔서 열어보시면 차이를 바로 알 수 있습니다.
(정말로 딱 1개만 찍히네요. 오우 신기.)

결론 : expression 한번만 실행시키기.

CSSproperty: expression(
          new Function('el', 'el.style.CSSproperty = 어쩌구 저쩌구 계산식')(this)
     );

하지만 이방법도 완전한 해결책은 아니라고 하네요~
expression 자체가 위험하긴 하나봅니다. IE8에서도 내다버린 녀석이니까요.

출처 : http://mkyoon.com/130

'CSS' 카테고리의 다른 글

css 무료 벡터 아이콘 (0)	2015.07.22
ie9 이하 버전의 제한 (0)	2014.02.26
대체 텍스트기법 (0)	2012.06.27
하단 풋터고정 (0)	2012.06.07
스크립트 에디터 (0)	2012.05.23

:

마우스오버 아웃

jQuery 2012. 7. 10. 18:08

아.....같은건데...ie6 에서만 깜빡이는건 뭥미..ㅠㅠ

$(".shop").mouseover(function () {
   $(".shop ul").addClass('on'); }).mouseout(function () {
   $(".shop ul").removeClass('on');
   });

위에건 ie6에서 마우스를 이동하면 깜빡깜빡...

아래건 마우스 이동해도 멀쩡~

$(".shop").hover(
    function(){$(".shop ul").addClass('on'); },
    function(){$(".shop ul").removeClass('on');
   });

위에처럼 구현하면 동작은 되는데 접근성은 아예 안된다. 후.....

'jQuery' 카테고리의 다른 글

div 안에 있는 엘리먼트 합 구하기 (0)	2013.02.03
신현석님 Jquery AIP 정리 (1)	2012.08.29
웹접근성에 맞는 탭메뉴 (0)	2012.07.02
jQuery IE 버전에 Placeholder 적용하기 (0)	2012.06.26
폼 요소 선택자 (0)	2012.03.13

:

웹접근성에 맞는 탭메뉴

jQuery 2012. 7. 2. 15:12

웹접근성에 맞는 탭메뉴

탭메뉴는 일반적으로 일반사람이 이용하기 편하도록 제작됩니다.

그렇기 떄문에 접근성을 고려하지 않는다면 장애인이 이용하기 굉장히 어려움이 있죠..

탭메뉴는 일반적으로 많이 쓰고 앞으로도 많이 쓸수 있기떄문에 한번 접근성을 고려해서 만들어보도록 하죠.

탭키로 이동가능한 탭메뉴
순차적으로 의미전달
her=값에 id로 링크 전달
스크립트가 지원하지 않아도 내용전달

이 4가지 사항으로 접근성에 준수할 수 있습니다.

물론 이미지로 들어간다면 alt도 들어가야 하겠죠 ^^

예제 : http://webcss.co.kr/html5/tab.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style type="text/css">
/* Lined Tab */
.Tab ul{ position:relative; margin:0; padding:0; list-style:none; border-bottom:1px solid #ccc; font-family:Tahoma, Sans-serif; font-size:12px; }
.Tab ul:after{ content:""; display:block; clear:both;}
.Tab li{ float:left; margin-bottom:-1px;}
.Tab li a{position:relative; float:left; text-decoration:none; border:1px solid #eee; border-bottom-color:#ccc; background:#fafafa; color:#666;}
.Tab li a span{display:inline-block; padding:6px 25px 6px 25px; letter-spacing:-1px; cursor:pointer;}
.Tab li div{display:none; width:100%; position:absolute; top:28px; left:0; list-style:none; border:0; margin:0; padding:0; white-space:nowrap; overflow:hidden;border-left:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc;padding:20px 0;text-align:center;}
.Tab.m1 .m1 a,.Tab.m2 .m2 a,.Tab.m3 .m3 a{ border:1px solid #ccc; border-bottom:1px solid #fff; margin-top:-1px; background:transparent; color:#333;}
.Tab.m1 .m1 a span,.Tab.m2 .m2 a span,.Tab.m3 .m3 a span{ padding-top:7px; font-weight:bold;}
.Tab.m1 .m1 div,.Tab.m2 .m2 div,.Tab.m3 .m3 div{ display:block;}
.Tab li li a:hover,.Tab li li a:active,.Tab li li a:focus{ font-weight:bold; letter-spacing:-1px; color:#333 !important;}
.Tab.jsOff {padding:0;}
.Tab.jsOff ul {border:0 none;}
.Tab.jsOff li {float:none;}
.Tab.jsOff li a {background:none !important;border-color:#EEEEEE #EEEEEE #CCCCCC !important;border-style:solid !important;border-width:1px !important;color:#333333;display:block;float:none;font-weight:bold;}
.Tab.jsOff li div {display:block;left:0;padding:5px 0;position:static;top:0;}

</style>

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($){
var tab = $('.Tab');
tab.removeClass('jsOff');
function onSelectTab(){
var t = $(this);
var myclass = [];
t.parentsUntil('.Tab:first').filter('li').each(function(){
myclass.push( $(this).attr('class') );
});
myclass = myclass.join(' ');
if (!tab.hasClass(myclass)) tab.attr('class','Tab').addClass(myclass);
}
tab.find('li>a').click(onSelectTab).focus(onSelectTab);
});
</script>
</head>
<body>
<div class="Tab m1 jsOff">
<ul>
<li class="m1"><a href="#view1"><span>메뉴 1</span></a>
<div id="view1">
메뉴 1의 내용입니다.
</div>
</li>
<li class="m2"><a href="#view2"><span>메뉴 2</span></a>
<div id="view2">
메뉴 2의 내용입니다.
</div>
</li>
<li class="m3"><a href="#view3"><span>메뉴 3</span></a>
<div id="view3">
메뉴 3의 내용입니다.
</div>
</li>
</ul>
</div>
</body>
</html>

<일반적인 화면입니다>

<자바스크립트를 지원하지 않을때 화면입니다. >

<css를 지원하지 않았을때 화면입니다.>

소스보시고 어려운것은 없으니 공부하시면 될꺼 같습니다.

그럼 열공하세요 ^^

[출처] 웹접근성에 맞는 탭메뉴|작성자 머리깨져

'jQuery' 카테고리의 다른 글

신현석님 Jquery AIP 정리 (1)	2012.08.29
마우스오버 아웃 (0)	2012.07.10
jQuery IE 버전에 Placeholder 적용하기 (0)	2012.06.26
폼 요소 선택자 (0)	2012.03.13
각종 예제 사이트 (0)	2011.07.11

:

접근성 참고

standard guide 2012. 7. 2. 10:00

6월 28일 접근성관련 강의를 들었다. 평소 마크업을 하며 매우 궁금했던 작업들에대해 명확하게 알 수 있어서 참 좋았는데....강의를 듣고 나니 내 작업이 얼마나 엉망이었는지 부끄러워진다.

한국형 웹 콘텐츠 접근성 지침 2.0의 적용방법

1. CDK (커뮤니티)

2.tabIndex 는 논리적인 마크업이 되어있으면 필요없다

3.플래시는 tabIndex 필수

longdesc값은 기획자한테….(그래프나 조직도등)

ㅡ> alt값도 필수 ***에 대한 이미지의 설명

4.동영상자막/원고 – 기획자

5.품질마크는 최소한의 법칙만 지킨 것이고 소송과는 상관 없다.

6.WCAG를 위주로 공부해본다. (우리나라는 3단계중 1단계만 쓰고 있다.)

7.22가지 준수항목은 반드시 지켜야한다. 한가지라도 준수하지 않으면 마크는 획득할 수 없다.

8.레이아웃테이블을 써도 되지만 <table><tr><td> 만 써야된다. Colgruop, thead, tbody 등은 쓰면 안된다.

시각장애

전맹,

약시(컨텐츠가 중구난방일경우, 명도가 낮은 경우)

색각장애 (어떤색과 어떤색을 같이 쓸 경우 구분이 안감)

명도대비 툴 (#767676 기본)

스킵네비게이션 (바로가기가 아닌 컨텐츠로 바로진입하기 위한 것)

청각장애

요약된 원고제공X (현재지침은 한가지; 두가지 이상이 좋다. / 원고, 수화,자막-열린자막/닫힌자막 )

지체장애

지적/지체장애

tab키는 앵커에만 먹기떄문에 여기(더보기)등으로 바로 가면 문맥을 이해할수 없다. Title로 문맥내용을 적어준다.

지침

1. 동영상원고제공의 경우 오른쪽에 제공/ 아래에 제공하면 스크롤을 내릴경우 보이지 않음.

2. 포커스 영역을 넓혀주어야 인지장애를 가진 사람들이 사용하기 쉬워진다. (18px *18px) 페이지네비/회원가입의단계 등등

3. 확인/취소 버튼이 있을경우 작성한 서식을 제출하려면 파란색버튼을 누르시오. (파란색버튼은 색구분이 안가는 사람에게는 힘듦. 파란색확인 버튼을 누르시오)

4. 현재 콘텐츠의 명도대비는 컨텐츠영역중에 <p>태그 영역만 검사하고 있다. (시작단계라 축소되었으며 범위가 넓어질 수 있다)

또한 폰트사이즈 역시 대비를 지켜야 했으나 현재는 확대축소버튼이 있으므로 px값을 사용해도 괜찮다. (18px미만? 12px미만?)

5. 인풋이나 텍스트에어리어에 자막이나 alt값 등을 적는 란을 넣어준다.

6. 초점을 받거나 마우스오버에 의해 콘텐츠가 활성화되고 배경음이 자동적으로 제공하는 것 등은 하지 않는다. (네이버광고등)배경음을 정지상태로 제공해서 멈춤/재생 버튼을 제공한다. 그러나 가장 좋은것은 배경음은 없는게 낫다.

7. 버튼 이미지에 onclick 은 넣지 않는다. 포커스이동 불가 (<button>태그를 이용한다.)

8. 플래시의 경우 wmode값을 쓸 때 transparent 를 쓰게 되면 화면 낭독기 인식이 불가. (플래시가 링크영역이 없을 경우는 transparent 를 쓰고 링크가 있으면 window를 쓴다.)

9. 레이어팝업의 경우 컨텐츠를 가리면 접근성 위배. 비쥬얼영역은 상관 없음.

10. 초점이동 : tab 과 shift+tab 이동시 순서대로…

11. focus역시 반드시 넣는다.(ie6은 지원안함)

12. 롤링컨텐츠/배너 ( 앞 정지 뒤 - 버튼 반드시 필요) / 전체배너보기 필요 / 밑에 12345 번호가 있고 이미지가 순서대로 보이는것은 괜찮다. 대신 마우스나 포커스가 되면 멈출수 있게 해야된다.

13. 광과민성반응(깜빡임, 번쩍임 – 옥션같은곳…) – 포캣몬쇼크…

14. 건너뛰기 링크를 반드시 노출시켜야함 – 컨텐츠영역으로 바로 가는 링크(메뉴 건너뛰기)를 만들어 body 바로 밑에 넣고 인크루드 시켜버림.

15. Title 에 제목/아이프레임에 타이틀을 반드시 넣는다. 개발을 위해 넣은 빈 프레임도 타이틀을 (빈프레임)이라고 쓰든해서 반드시 넣어준다. h1~h6까지 논리적으로 활용한다. 타이틀을 한가지로 통일하지 않는다. 메인은 현재 하는대로/ (ex) 찾아오시는길|삼성병원) – 탭브라우저방식…때문에 타이틀을 통일하지 않음. 회사노출도 앞에 오지 않게 한다. >>> 페이지의 타이틀은 기획자에게..(자유게시판 목록/수정/쓰기 전부 따로 타이틀을 적는다.)

16. 파이어폭스 헤딩스맵 (헤딩구조)

17. <h2>대메뉴</h2><h2>left메뉴 제목(h3이 있을 경우 사이드바메뉴)</h2> <h3>숨겨진 사이드메뉴제목<h3>

18. 더보기 버튼을 어떤 것의 더보기버튼인지 명시를 해주어야 한다. 이전/다음 버튼도 어떤 것의 이전 다음버튼인지 title을 이용해 앵커에 표시해준다.

19. <html lang=”ko”>에 lang 표시를 반드시 작성한다. (주로 쓰고 있는 언어) / xhtml일 경우 xml:lang=”ko” lang=”ko” 둘다 써주는게 좋다. 중간에 언어가 바뀔경우 <span lang=”zh”>韓</span> 이런식으로 표시한다.

20. 표가 복잡할 경우 id/headers 를 넣는다. th만으로도 표의 이해는 가능하지만 복잡하면 넣기도 한다. Id는 고유하기 때문에 제목에 headers는 아이디에 해당하는 내용부분 <td>에 넣는다.

Label을 input보다 먼저 넣어도 읽을 땐 id값을 체크해서 label을 먼저 읽고 input을 읽는다. 또 개발과 퍼블의 id값이 겹치지 않게 개발가이드/퍼블가이드를 만든다. 예)id=”lb_guide”

'standard guide' 카테고리의 다른 글

웹 접근성을 고려한 콘텐츠 제작 기법 (0)	2012.03.13
실전 웹표준 가이드 (0)	2010.04.06
웹표준을 시작하면서.. (0)	2010.04.01

:

대체 텍스트기법

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

:

좌충우돌 웹퍼블리셔 일기

'분류 전체보기'에 해당되는 글 151건

html5 검사시 summary 오류

야무님께사 작성하신글을 퍼왔다.

[펌!]Table Summary Attribute - Differences Between HTML 4.01 and HTML5

'Html5' 카테고리의 다른 글

ie6 이상한아이 발견~!

'크로스브라우징' 카테고리의 다른 글

신현석님 Jquery AIP 정리

'jQuery' 카테고리의 다른 글

One-Time Expression 한번만 실행시키자.

'CSS' 카테고리의 다른 글

마우스오버 아웃

'jQuery' 카테고리의 다른 글

웹접근성에 맞는 탭메뉴

웹접근성에 맞는 탭메뉴

'jQuery' 카테고리의 다른 글

접근성 참고

'standard guide' 카테고리의 다른 글

대체 텍스트기법

'CSS' 카테고리의 다른 글

jQuery IE 버전에 Placeholder 적용하기

'jQuery' 카테고리의 다른 글

디자인 참고사이트

'Design' 카테고리의 다른 글

티스토리툴바