Blog Content

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

    Category 개발연습막쓰기/jQuery on 2019. 8. 23. 15:17

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

    Read more
  • WAI-ARIA 란

    Category 개발연습막쓰기/WAI-ARIA on 2019. 7. 23. 00:01

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

    Read more
  • jQuery 수 더하기

    Category 개발연습막쓰기/jQuery on 2019. 2. 13. 21:08

    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 =..

    Read more
  • jQuery infinite scroll 무한스크롤

    Category 개발연습막쓰기/jQuery on 2019. 2. 7. 20:58

    제이쿼리 무한스크롤 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..

    Read more
  • 애트리뷰트 팝업 창 띄우기

    Category 개발연습막쓰기/jQuery on 2018. 11. 1. 20:34

    애트리뷰트 이용해서 레이어 팝업창 띄우기 팝업창 띄우기 소스 팝업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; ..

    Read more
  • 노드트리는 무엇인가

    Category 개발연습막쓰기/HTML on 2018. 7. 4. 21:08

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

    Read more
  • HTML 문서

    Category 개발연습막쓰기/HTML on 2018. 7. 4. 21:07

    HTML 이란 ? HTML 이란 Hyper Text Markup Language 의 약자로써 웹 페이지를 만들기 위한 언어로 웹 브라우저에서 동작하는 가장 기본적인 프로그래밍 언어의 한 종류이다. Document HTML 문서를 선언한것이다.HTML은 시작과 끝이 있고, 그 끝은 로 닫아주며, 물론 예외적으로 싱글 태그도 있다.head 는 말 그대로 문서의 두뇌의 역활을 한다고 볼수 있다. 사이에는 중요한 정보들을 담고 있으며,현재 만들어진 문서의 meta 태그보다 많은 태그 javascript / css 등 여러가지를 선언한다. 위 코드에 선언된 meta태그만 간략하게 설명 해보고자 한다. UTF-8 유니코드UTF-8은 유니코드이다. 유니코드는 전세계의 모든 문자를 표현할 수 있는 인코딩 이다. 다만 ..

    Read more
  • jQuery 시작하기

    Category 개발연습막쓰기/jQuery on 2018. 2. 3. 23:19

    jQuery 시작하기 Hello World 모든 프로그래밍은 Hello World로 시작한다는 말을 어디선가?들어본듯 합니다. 그래서 저도 거창하게 프로그래밍이랄꺼 까진 없지만..기본부터 충실하게 스터디를 하며, 블로그에 포스팅해보고자 ...거창한 꿈을 갖고... 이렇게 흠흠..... 사실 오늘은 토요일이라 넘어갈까 하다가 jQuery에 대해 블로그에 포스팅을 해보기 위해 아주 간단한 예문을 하나 준비해보았습니다.간단하게 설명을 드리자면 .. See the Pen LQGKYB by uicode (@uicode) on CodePen. 위에 소스를 보시면 var는 변수를 의미합니다. var 변수를 선언하고 변수 이름을 btn 이라는 변수명을 지정했습니다.그리고 그 변수안에 button이라는 버튼 HTML을 ..

    Read more
  • jQuery 탑 버튼

    Category 개발연습막쓰기/개발연습 막쓰기 on 2017. 7. 25. 16:12

    jQuery 퀵 버튼 01. CSS 12345678910* {margin:0; padding:0; font-size:14px;}a, a:active {color:#333; text-decoration:none;}ul li {list-style:none;}header {height:100px; background:orchid}section {height:1500px; background:burlywood}footer {height:100px; background:darkcyan}body { position:relative; }.quick {position:fixed; bottom:20px; right:20px; display:none;}.quick.on {display:block; }.quick a {di..

    Read more
  • scrollTop 이벤트

    Category 개발연습막쓰기/개발연습 막쓰기 on 2017. 7. 18. 12:36

    스크롤 따라다니는 메뉴 01. CSS 123456789/* CSS 는 입맛에 맞게 변경 */html, body {height: 100%;}#wrap {text-align:center; height:100%}header {background:orange; box-shadow: 0px 5px 10px -5px; position:relative;}header li {display:inline-block;}header li a {display:block; padding:20px;}header.fixd {position:fixed; top:0; width: calc(100% - 15px);} section {background:orchid; min-height:100%; padding:150px 0 150px}f..

    Read more