본문 바로가기

Lect & Tip102

[웹접근성] 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.

드롭다운 사용을 위한 popper.js 다운로드 for bootstrap 4.3 dropdown components ✈ 드롭다운 사용을 위한 popper.js 다운로드 for bootstrap 4.3 dropdown components 부트스트랩 3.x 까지는 popper.js는 필수가 아니었다. 하지만 4.3에서는 드롭다운 메뉴만 사용하려고 해도, popper.js를 사용해야 한다. 가장 손쉬운 방법은 cdn을 이용하는 방법이지만, 로컬에 파일이 있어야만 하는 경우가 있다. 이럴 때 다운로드를 받아야 하는데 popper.js만 다운로드 받으면 동작하지 않고 에러를 낸다. popper.js.map 파일도 같이 필요로 한다. 보통 두 파일은 같은 폴더에 놓이기 때문에 cdn에서 다운 받을 때 popper.js를 먼저 다운받고, 뒤에 .map을 붙여주면 popper.js.map 파일을 다운로드 받을 수 있다. https:.. 2019. 7. 23.

이전 1 ··· 12 13 14 15 16 17 다음

티스토리툴바