본문 바로가기

전체 글

255개의 포스트
자바스크립트 품질검사/접근성해결

- 팝업X - 로그인 실패시 수정해야 할 아이디/비밀번호 칸으로 자동 포커스O 자동포커스 이동 X (ex.주민번호 앞자리 쓴 후 자동으로 뒷자리 칸으로 포커스 이동하는것 안됨.) - 롤링되는 배너에 정지/재생/번호버튼 (마우스오버시 정지되는 것도 웹표준 준수) - li에는 키보드 접근이 안되기 때문에 반드시 a에 이벤트를 줘야한다!(a, 온라인서식 에는 키보드접근이 가능함!) - a를 새창으로 열고 싶을 때, target=_blank 를 주고 반드시 title이나 css로 '새창열림'을 표시해주어야한다. ★ 마우스이벤트를 줄때, 키보드 이벤트도 함께 줘야한다.onmouseover(마우스) = onfocus(키보드) / onmouseout(마우스) = onblur(키보드)접근성에서 생각해볼때, 마우스오버를..

2013년 02월 28일
웹사이트 속도 측정 및 점수 (구글 Pagespeed Insights)

Google Developers 페이지 - https://developers.google.com/speed/pagespeed 측정 페이지 - https://developers.google.com/speed/pagespeed/insights

2013년 02월 19일
크롬 input, textarea 노란색 테두리 제거

크롬, 사파리, 오페라 같은 브라우저에서 나타나는 input 이나 textarea에 노란 또는 주황색 테두리 없애는 방법 입니다. input { outline-style: none; }

2013년 02월 13일
CSS3 미리보기 참고사이트

CSS3 속성의 적용을 미리볼 수 있는 사이트를 소개합니다. 아직 CSS3 속성에 대한 이해가 부족하여 정확하게 사용하지 못하는 개발자에게는 유용한 사이트가 아닌가 싶습니다. 참고 사이트 http://www.css3maker.com/index.html http://css3pie.com/ http://css3please.com/ http://www.css3generator.com/ http://westciv.com/tools/transforms/index.html http://gradients.glrzad.com/ http://border-radius.com/ http://www.css3.info/preview/ http://net.tutsplus.com/tutorials/html-css-technique..

2013년 02월 01일
블릿 텍스트로 마크업하기

css 공통적용 : font-family:돋움 or 굴림, font-size:12px 텍스트 : · or · (entity)css : font-weight:normal 미리보기 : · or · 텍스트 : · or · (entity)css : font-weight:bold 미리보기 : · or · 텍스트 : ¯ or ¯ (entity)css : font-weight:normal 미리보기 : ¯ or ¯ 텍스트 : -css : font-weight:normal미리보기 : - 텍스트 : ㆍ(ㅌ의 특수문자) css : font-weight:bold미리보기 : ㆍ 텍스트 : • or • (entity)css : font-weight:normal미리보기: • or •

2013년 02월 01일
<a> <button> <input> 용도에 맞게 사용하기

- 보통 페이지 링크를 걸 때 주로 사용되는 일반적인 방식 - 값을 전달하는 사용자 인터페이스를 정의하는 마크업 - 값을 받거나 전달할 떄 사용하는 마크업 태그 .. 요소의 어원은 anchor(닻)이다. 다른 자원을 연결하는 의미를 지니고 있고 href 속성으로 하여금 어떤 자원을 연결하고 있는지 표시할 수 있다. ( href 속성의 어원은 hypertext reference) 그러나 href의 값으로 아무 의미없는 "#"을 사용하여 onclick과 같은 방식을 쓰는 것은 ... 요소를 본래의 의미(자원의 참조)와 다르게 사용했다는 것을 반증한다. 참조하는 자원이 있다면 유효한 URL 값을 넣어 준다. 다른 자원의 참조하는 의미 없는 버튼이나 텍스트가 키보드 포커스를 받아야 한다면 ... 요소를 사용해야..

2013년 02월 01일
ie6~7 버그 핵 정리

핵 잘정리된 사이트 http://browserhacks.com/ a:hover {border:1px;} //모든 브라우져 적용 *html a:hover {border:2px;} //IE6,7 만 적용 //여기서 html 은 원래 "." 또는 "," 가 와야 할 자리인데 html 이 오기 때문에 IE 4~6 mac IE 4~5 적용 **html {border:2px;} //IE7 에서만 적용 이건 안되는군요. 이렇게 하면 IE6 에서도 적용됩니다. 아래처럼 해야 합니다. 제가 잘 못 알고 있는건지도.. *+html {border:2px;} //IE7 에서만 적용되고, IE6에는 적용되지 않습니다. #top { position:fixed !important; position:static; } //IE6 에서..

2013년 02월 01일
IE6 오류 해결 *{zoom : 1;}

익스 전용 핵 zoom:1; 익스6에서 display:inline-block; 을 인식하지 못해 zoom:1;을 사용했답니다. {display:inline-block;*display:inline; zoom:1;} http://blog.naver.com/skell83?Redirect=Log&logNo=150067290900

2013년 02월 01일
IE와 HTML/CSS

BrowseHappy.com 최신 브라우저로 업그레이드하기 캠페인 IE7 js : IE의 비표준 CSS/HTML/PNG를 표준으로 교정해주는 JS IE9.js를 사용하면 CSS3도 IE8이하 버전에서 사용가능하다. Respond.js : IE 8이하에서 Media Query 사용할 수 있게 해줌. HTML5Shiv : IE 과거 버전에서 HTML5 활성화 CSS3Pie : IE6~IE8에서 CSS3 사용. Modernizr : 모더나이저, 과거버전의 브라우저에 기능 유무에 따라 클래스를 붙여줌. Explorer Exposed! IE 버그 모음

2013년 02월 01일
IE 전용 CSS

http://firejune.com/1740 참조

2013년 02월 01일
IE6를 버리면 사용할 수 있는 CSS

What CSS Properties Are Supported When You Drop IE6 Support > - Immediate descendant (child) selector.[attr] - Attribute selector (starts with, ends with, contains).:first-child - First child selector.min-width - Minimum width layout.max-width - Maximum width layout.min-height - Minimum height layout.max-height - Maximum height layout.position:fixed - Fixed position layout..A.B - Multiple class ..

2013년 02월 01일
CSS HTML 색상값

CSS나 HTML을 수정할 때 그냥 색이름을 영어로 써 넣어도 되지만 색상값을 보면 더 예쁘게 넣을 수가 있죠. 아래를 참고하시면 됩니다. 색상이름 색상값 red #FF0000 crimson #DC143C firebrick #B22222 maroon #800000 darkred #8B0000 brown #A52A2A sienna #A0522D saddlebrown #8B4513 indianred #CD5C5C rosybrown #BC8F8F lightcoral #F08080 salmon #FA8072 darksalmon #E9967A coral #FF7F50 tomato #FF6347 sandybrown #F4A460 lightsalmon #FFA07A peru #CD853F chocolate #D269..

2013년 01월 28일
jQuery scrollTop()

jQuery의 scrollTop 메서드는 선택한 요소의 y축 좌표를 알아내는 데에 쓰이거나, 혹은 값을 미리 지정하여 스크롤이 그만큼 내려가 있게 할 수 있느 메서드입니다. See the Pen jQuery scrollTop by ho (@ho) on CodePen. $(window).scrollTop(300); 그리고 스크롤 바를 원하는 좌표에 미리 셋팅하여 줄 수도 있습니다. 이렇게 scrollTop 에 300 만큼의 값을 넣어 준 만큼 미리 스크롤이 이동하였다는걸 알 수 있습니다.

2013년 01월 28일
jQuery animate() stop() 사용방법

jQuery로 애니메이션을 구현할 때 흔히 만나게 되는 문제가 하나 있습니다. 바로 애니메이션 큐(queue) 입니다. 예를들어, 네비게이션 메뉴에 마우스가 오면 애니메이션이 동작하게 코딩이 된 경우, 마우스를 여러번 움직였을 때, 이전 애니메이션이 멈추기 전까지 마지막 애니메이션이 동작하지 않는 현상이 바로 애니메이션 큐로 인해 발생하는 문제입니다. 이러한 문제가 일어나는 이유는 이벤트가 일어날 때마다 큐를 만들기 때문에 이들이 순차적으로 진행되면서 원하지 않는 효과가 나타납니다. See the Pen jQuery animate stop by ho (@ho) on CodePen. 위의 경우 마우스를 여러번 위아래로 움직이면 움직인 횟수만큼 바 애니메이션이 반복되는 것을 볼 수 있습니다. 반면 아래의 경..

2013년 01월 27일
블로그 이사

꾸준히.. 열심히.. 다시 시작

2013년 01월 21일