jQuery 그래프 [graph] - 수치 적용

그래프 [graph] - 수치를 그래프에 대입 이것이 딱히 그래프라고 하기엔 조금... 뭔가 적당한 용어라던지 그런것이 생각이 안나서 그냥 그래프로 이름을 정하는 걸로.. 일단 구조는 간단합니다. 우선 저는 퍼블리셔이니까 제가 하고자 했던 부분은 그래프우측에 위치하고 있는 수치 아마 이 부분은 "개발자"분들이 값을 던저 주겠죠...? 아닐까나? 아님 뭐 .. 어쩔수 없고 .. 하여 우측에 텍스트의 값을 받아서 그래프[도표] 안에 대입을 시켜줍니다. 하단의 이미지를 참고해주세요. 사용 연차 30% 사용가능 연차 70% .present-area {margin:0 auto; background:#fff; border-radius: 1rem; box-sizing: border-box} .present-area ..

• format_list_bulleted 개발연습막쓰기/jQuery
• · 2019. 8. 23.
• textsms

WAI-ARIA 란

한참만에 글을 쓰는 듯합니다. 제 블로그는 기본적으로 누군가를 알려준다기보다는 제가 정보를 습득함과 그 정보를 차후에 사용하기 위함의 목적이 더 크게 있는 블로그입니다. 하여 글을 보시기 전에 전문적인 글을 보시길 원하시는 분들께선 다른 블로그를 이용 부탁드립니다. 먼저... 글을 쓰기 전에 WAI-ARIA라는 카테고리를 만들어 글을 쓰는 여러 가지 이유가 있겠지만 직접적인 업무를 보는 사람으로서 접근성을 좀 더 심도 있게 알아보고자 스터디를 진행한다는 생각으로 WAI-ARIA 사이트와 여러 가지 사이트를 살펴보면서 글로 적어두고 차후 프로젝트에서 사용을 하기 위해 게시글을 작성해볼 예정입니다. 완벽하지 못하고 또한 정보가 잘못되었을 수도 있습니다. 부족한 부분이 많고 잘못된 부분이 있을 수 있습니다. ..

• format_list_bulleted 개발연습막쓰기/WAI-ARIA
• · 2019. 7. 23.
• textsms

jQuery 수 더하기

jQuery 수 더하기 토탈 수 올려주기 예를들면 음식점이나 영화 티켓 예매등 예약시 성인, 청소년, 어린이등의 인원수를 체크하여 토탈 값을 내려준다. 기타 다른용도로 사용을 해야 한다면 타이틀만 변경 하고 사용 해도 된다. 결과 화면은 다음과 같다. 빼기 0 더하기 빼기 0 더하기 빼기 0 더하기 Total = 0 // 인원 체크 토탈 function countBtn(){ var $wrap = $('.totalFn'), $btnMinus = $wrap.find('.minus'), $btnPlus = $wrap.find('.plus'); $cell = $wrap.find('.cell'); $btnMinus.on('click', function(e){ var $this = $(this); var num =..

• format_list_bulleted 개발연습막쓰기/jQuery
• · 2019. 2. 13.
• textsms

jQuery infinite scroll 무한스크롤

제이쿼리 무한스크롤 infiniteScroll 얼마전 컴퓨터를 포멧 이후 아직 포토샵을 설치 하기 전이라.. 이미지는 대충 웹에서 사용하는 포토샵으로 대처.. 나름 쓸만한듯... https://pixlr.com/editor/ 를 클릭하면 이동 스크롤을 내릴때 마다 객체가 생성되는 제이쿼리 무한스크롤 infinite Scroll 이라고도 하고.. 일단 처음 만들어봤는데 여기저기 돌아다니는 소스도 많고... 크게 어렵거나 한것 같지는 않았는데.. 그냥 내 입맛에 맞게 만들어보았다. * {margin:0; padding:0; list-style: none;} .infiniteScroll {border:1px solid #ccc; width:200px; font-size:0;} .infiniteScroll im..

• format_list_bulleted 개발연습막쓰기/jQuery
• · 2019. 2. 7.
• textsms

애트리뷰트 팝업 창 띄우기

애트리뷰트 이용해서 레이어 팝업창 띄우기 팝업창 띄우기 소스 팝업1 팝업2 팝업 팝업 닫기 팝업 띄우기 팝업 2 팝업 닫기 팝업 띄우기 2 /* 팝업 */ .pop {height:100%; height:100%; min-height:100%;} .popup-wrap {display:none; width:100%; background:#ccc;} /* 팝업 공통 */ .popup-wrap .popup-area { background:#fff; position:fixed; left:50%; top:50%; z-index:2; transform: translate(-50%, -50%);} .popup-wrap .pop-title {padding:15px 30px 20px; background:#685e52; ..

• format_list_bulleted 개발연습막쓰기/jQuery
• · 2018. 11. 1.
• textsms

노드트리는 무엇인가

노드트리란 ? HTML의 문서의 정보는 노드트리라는 계층적 구조에 저장이 되는데 이러한 노드트리는 (node tree) 노드들의 집합이고, 노드간의 관계를 보여준다. 노드 트리는 최상위 레벨인 루트 노드(root node)로부터 시작하여, 가장 낮은 레벨인 텍스트 노드까지 뻗어 내려간다.자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있다. html은 크게 head와 body의 요소 노드가 있다.노드 트리의 가장 상위에는 단 하나의 루트 노드(root node)가 존재한다. 루트 노드를 제외한 모든 노드는 단 하나의 부모 노드(parent node)만을 가지는데. 모든 요소 노드는 자식 노드(child node)를 가질 수 있다. 형제 노드(sibling node)..

• format_list_bulleted 개발연습막쓰기/HTML
• · 2018. 7. 4.
• textsms