H_Develop

WAI-ARIA 웹 접근성을 준수하기 위해 장착해야 할 도구. Web Accessibility Initiative's Accessible Rich Internet Applicatioins 스크린리더가 브라우저를 읽을 때, 각 요소가 어떤 역할을 하는지 무슨 의미로 존재하는지 알 수 있도록 하기 위해 만들어진 기술. 자바스크립트나 다른 동적 언어로 인해 페이지의 요소가 바뀌더라도 새로고침을 하지 않아도 스크린 리더가 바뀐 요소를 읽어준다. 스크린 리더란 브라우저를 시각적으로 읽는 것이 불편한 사용자를 위해 컴퓨터 화면을 낭독해주는 소프트웨어. aria-label 태그가 가지고 있는 의미를 적어주는 이름표 같은 역할 aria-label과 role을 쓰기 위한 규칙 첫 번째 규칙 만약 HTML에 개발자들이 쓰..

FrontEnd/HTML 2022. 12. 6. 10:07

function(e) 속에 e.preventDefault(); 사용 a링크를 클릭했을 때, 주소창에 #붙으며 스크롤 올라가는 것을 방지하는 이벤트. 기존 이벤트를 죽인다고 생각하면 됨. $(function(){ $("#e120504 #stamp .btn").click(function(e){ $("."+$(this).attr("name")).fadeIn(700); var num_1 = $("#e120504 #stamp .num_1").text(); if(num_1 > 0){ num_1--; $("#e120504 #stamp .num_1").text(num_1); } e.preventDefault(); }); $("#e120504 #stamp .btn_ch").click(function(e){ $("."+$..

FrontEnd/JQuery 2022. 12. 6. 09:29

라이브러리 처럼 사용할 수 있다. jQuery.fn.플러그인명 이렇게 선언합니다 $.fn.플러그인명 이것도 똑같은 선언 방법입니다 다른 라이버리와 겹침방지위해 (function($){ 이사이에 jQuery.fn.플러그인명 넣기도 하고요 })(jQuery); ///////////////////////////// jQuery(function($) { 이사이에 jQuery.fn.플러그인명 넣기도 하고요 }); 알아두면 좋은 jQuery plugin 10개 1. datepicker 날짜 선택 플러그인 http://longbill.github.io/jquery-date-range-picker/ jQuery datepicker 제이쿼리 날짜선택 플러그인 필요할 때는 항상 이 곳에서 가져다 쓴다 어떤걸 쓸까 할때 바..

FrontEnd/JQuery 2022. 12. 2. 08:31

객체들의 족보 parent().parent().parent().parent() 이런식으로 자신의 고조할아버지를 찾아갈수 있고요 parent().parent().parent().parent().next() 이런식으로 자신의 고조할아버지 동생에게 접근할수 있습니다 고조할아버지와 형제들을 노드라고 생각하시면 됩니다 노드 형제중에 첫째놈이 first() 고 막내놈이 last() 입니다 두번째놈은 next().next() 로 구할수있구요 eq(1) 이나 index() 값 2로 구할 수 있습니다 형제를 추가하려면 append 를 시키고 형제를 제거하려면 remove 를 하는것이죠 children() 확장 Element의 고유한 자식으로 구성된 확장 집합을 반환한다. contents() 확장 집합에서 Element의..

FrontEnd/JQuery 2022. 12. 1. 15:57

$("#btn").click(function() { this; // id가 btn 인 요소 자체가 됩니다. $(this); // id가 btn 인 요소는 가지고 있는 jQuery 객체가 됩니다. });

FrontEnd/JQuery 2022. 12. 1. 12:32

$('#tab_menu #btn') 이런식으로 상속 불가하다. 그러면 버벅거리고 깜박거리는 현상이 생길 수 있다.

FrontEnd/JQuery 2022. 11. 25. 18:59

input 태그에는 data-value 라는 데이터 속성을 임의로 만들 수 있다. 속성 명은 data-value 이지만, HTML 표준속성인 value 속성과는 상관이 없다. 임의로 만든 속성이기 때문이다. 장점 DOM 객체를 통해 데이터 속성 조작이 가능하다. 데이터 속성은 DOM 객체의 dataset 속성을 참조하여 얻을 수 있다. var input = document.querySelector('#userName'); console.log(input.dataset); 위 코드와 같이 userName input을 셀럭터로 잡고 해당 DOM객체의 dataset을 출력해보면 DOMStringMap으로 데이터 속성들을 가지고 있음을 확인할 수 있다. 그러나 속성 key 값을 보면 'data-'가 빠진 채로 ..

FrontEnd/HTML 2022. 11. 25. 12:37

JSP input radio를 사용하고 사용 유무에 따라 value 값을 Y, N으로 주었다. value 값은 들어오지 않아 data-val 요소를 이용하여 넘겨준다 js 데이터를 받아 Y,N값을 확인하고 없으면 default로 Y를 준다 var pramUseYn = 'Y' if(param.useYn) { pramUseYn = param.useYn; } $('#ocBa0030 input:radio[name=tmpUseYn][data-val="'+pramUseYn+'"]').prop('checked', true); $('#ocBa0030 input[name="useYn"]').val(param.useYn); $('#ocBa0030 input:radio[name=tmpUseYn]').off('change.o..

FrontEnd/JQuery 2022. 11. 25. 10:17