본문 바로가기

Lect & Tip133

- 자바스크립트 시간 제어 함수 setTimeout(), setInterval(), clearTimeout() 자바스크립트 시간 제어 함수 setTimeout(), setInterval(), clearTimeout() 자바스크립트를 이용해서 일정한 시간 간격마다 혹은 일정한 시간이 지난 뒤에 특정 이벤트를 발생시키거나 동작을 취해야 할 경우가 종종 있다. 이럴 때 사용하는 자바스크립트 시간 함수가 바로 setTimeout()와 setInterval()이다. setTimeout(), setInterval()의 가장 큰 차이점은 한 번만 실행하느냐, 계속 반복적으로 실행하느냐의 차이다. 위의 두 예제처럼 단 한번만 적용하고 싶다면 setTimeout을 사용하고, 일정한 시간간격으로 반복 적용하고 싶다면 setInterval()을 사용하면 된다. setInterval에서 1000이라는 숫자는 밀리세컨드로 해당 숫자의 .. 2019. 8. 4.

[웹접근성] jquery checked checkbox radio 체크 유무, 선택된 값 가져오기 제이쿼리 체크박스 개수체크 소스 ✈ 웹접근성을 고려한 jQuery를 활용한 체크박스와 라디오 버튼 처리 개요 강동구립통합도서관 회원가입에서 이용약관 동의 및 개인정보처리방침 동의에 radio와 checkbox form이 사용되어 있는데, 웹 접근성에 부합되기 위해서는 오류발생 시 알림 후 해당 입력폼으로 포커스를 맞춰주어야 한다. 때 마침 오늘 이 회원 약관 동의 페이지에서 라디오와 체크박스가 모두 사용되고 있어서, jquery radio checked와 jquery checkbox checked로 체크 유무와 focus()를 이용해서 촛점 맞추는 것을 예제로 쓸 수 있어서 포스팅 한다. 체크 유무든, 포커스를 맞추는 것이든 jquery의 절반은 요소(element)의 정확한 선택자 선정이 중요하다. 예제 소개 일단 예제로 보자. 통합.. 2019. 8. 2.

✈ [반응형 웹 기초] @media screen and (max-width:620px) and (min-width:300px) 반응형 웹의 기초 @media screen and (max-width:620px) and (min-width:300px) 반응형 웹에 대해 두려움을 갖고 있는 퍼블리셔들이 제법 많다. 사실 알고 보면 별거 아니다. 가로폭에 대한 시나리오대로 CSS를 적용해주면 90%(?)는 끝난 게임이다. 물론 그 과정은 코딩답게 노가다이긴 하다. 같은 스타일에 대해 2번 이상을 기술해줘야 하는 작업이니까 말이다. 나머지 10%는? 반응형웹을 원하는 클라이언트의 기발하고도 창의적이면서 가학적인 눈높이에 맞춰주기 위해서는 단지 CSS의 @media screen 만으로는 해결되지 않는 난제들이 튀어나올 때가 있다. 그럴 땐 하는 수 없이 jQuery의 도움을 받아야 한다. 하지만 왠만하면 @media screen으로 대부분.. 2019. 7. 27.

✈ nginx woff mime type error 설정 해결 방법 Unexpected character in input: 에러 nginx woff mime type error 설정 해결 방법 Unexpected character in input: 에러 2019/07/25 15:19:07 [error] 25892#24016: *313 FastCGI sent in stderr: "PHP Warning: Unexpected character in input: ' ' (ASCII=11) state=0 in C:\work\cj_003\dcms-ui\assets\fonts\glyphicons-halflings-regular.woff2 on line 100 PHP Warning: Unexpected character in input: '' (ASCII=16) state=0 in C:\work\cj_003\dcms-ui\assets\font.. 2019. 7. 26.

부트스트랩 날짜선택 폼 bootstrap 4.3 datepicker ✈ 부트스트랩 4.3 날짜 선택 폼: 간편한 데이터 피커 사용하기 서론 부트스트랩은 웹 개발을 편리하게 만들어주는 훌륭한 프레임워크입니다. 특히 드롭다운이나 데이터 피커와 같은 구성 요소를 쉽게 활용할 수 있다는 점이 큰 장점입니다. 그러나 버전 업그레이드 과정에서 예상치 못한 문제가 발생할 수 있습니다. 이번 포스팅에서는 부트스트랩 4.3으로 업그레이드하면서 마주할 수 있는 스타일 관련 이슈와 해결 방법에 대해 알아보겠습니다. 특히, 날짜 선택을 위한 데이터 피커 구현에 중점을 둘 것입니다. 부트스트랩 4.3 업그레이드의 스타일 변화 부트스트랩 4.3으로 업그레이드하면 기존의 스타일이 조금 흐트러질 수 있습니다. 이 중에서도 특히 날짜 선택을 위한 데이터 피커의 스타일이 예전과 다를 수 있습니다. 더욱.. 2019. 7. 25.

✈jquery hover function 사용 예 제이쿼리 이벤트 중에서 꽤 흔하게 사용되는 이벤트 메소드가 바로 hover다. 특정 엘러먼트 위에 마우스가 위치하거나 벗어났을 때의 이벤트를 정의한다. 자바스크립트의 mouseenter, mouserover를 한 번에 제어할 수 있다. CSS의 :hover 선택자를 이용한 것과 같은 이벤트를 타기 때문에, 키보드로 앵커에 위치했을 때는 동작하지 않는다. jquery hover function 사용 예 $(document).ready(function(){ //2depth menu showing when menu is collapsed var hoverMenu = $('.lnb .lnb1depth >li'); hoverMenu.hover( function () { var menuInitH = $('#menu.. 2019. 7. 25.

이전 1 ··· 17 18 19 20 21 22 23 다음

티스토리툴바