그나기록

highchart.js를 이용해서 차트를 생성했다. 한페이지에 적게는 1개, 많게는 9개까지 차트를 생성해야하는데, 그럴때마다 var 차트1={차트옵션}, var chartOption2 = {어쩌구}, var chartOption3 = {어쩌구}... 이렇게 생성하고 싶지 않아서 머리를 굴렸다. //page1.html //page2.html //page3.html 테스트를 위해서 html파일을 3개 만들고 //차트값 //page 1 const CATE_1_DATA_0 = [1, 1, 1, 1, 1, 1, 9], CATE_1_DATA_1 = [2, 2, 2, 2, 2, 2, 9], CATE_1_DATA_2 = [3, 3, 3, 3, 3, 3, 9], //page2 CATE_2_DATA_0 = [4, 4, ..

버튼을 누를때마다 랜덤한 위치에 랜덤한 사이즈의 심장처럼 콩딱콩딱 커졌다 작아졌다하는 박스를 만들거다 ​ 우선 html을 쏘 씜플하게 //html + add //css * { margin: 0; padding: 0; box-sizing: border-box; line-height: 1; } .wrap { padding: 20px; position: relative; width: 80vw; height: 80vh; } .wrap div { position: absolute; transform: translate(-50%, -50%); text-align: right; cursor: pointer; } .wrap > button { position: relative; z-index: 999; cursor: ..

html 소스를 쏘씜플~하게 쓰고 싶었음. ​ 어제는 for문으로 만들었었는데, for 안에 for를 또 넣는게 좀.. 그래서... forEach로 수정해버리기 //html button1 button2 //css * {box-sizing:0;} ol, ul {list-style:none; margin:0; padding:0;} button {height:30px; padding:0 15px; border:1px solid yellowgreen; background:#fff; border-radius:3px;} button.active {background:yellowgreen;} .wrap {width:100%; max-width:768px; margin:0 auto;} .conts {margin-top..

첫번째 셀렉트 박스의 옵션 값에 따른 두번째 셀렉박스의 선택 옵션 정하기 ! 옵션1 op1 op2 op3 옵션2 그리고 초간단한 jquery var a = ["op1-1", "op1-2"]; var b = ["op2-1", "op2-2"]; var c = ["op3-1", "op3-2"]; function select1Change() { var o; var v = $("#s1").val(); v == "op1" ? (o = a) : v == "op2" ? (o = b) : v == "op3" ? (o = c) : (o = []); //else /* #s1 옵션값 변경시 #s2 옵션값 리셋*/ $("#s2").empty(); $("#s2").append("옵션2"); for (let i = 0; i < o..

현재 시간에서 현재 달을 구하고 현재 달의 마지막 날을 구해서 현재 달의 마지막 날 까지 카운트 다운을 시켜보자 ! ​ https://egmrss.csb.app/ Static Template 이번 달의 마지막 날은? egmrss.csb.app 참고 https://codepen.io/chrisjdesigner/pen/dMbmoE 인데 참고가 아니고 거의 복붙해서 학습하는 수준 ㅎㅋㅋㅋㅋ ​ //html 이번 달의 마지막 날은? count down days hours minutes seconds //css * {margin:0; padding:0; box-sizing:border-box;} .top * {text-align:center;} .top p {opacity:0.6; font-size:20px; p..

최근 작업중인건데, 브라우저를 리사이징할 때마다 말줄임 처리되는 글자수를 변경시키고 싶었다. // min-width:769px 에서는 가나다라마바사아자차카타파하가나다라마바... 더보기 //max-width:768px 에서는 가나다라마사아자차카... 더보기 이렇게 사이즈에 따라 글자수가 줄어들고 느는 걸 만들고 싶었음. ​ 머리를 쥐어짜고 구글써치도 어마어마하게 뒤져서 만들었다. 가나다라마사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하 var length; var text = $('div p').text(); function lengthChange(){ if($(window).width() > 768){ length = 20; }else { length = 10; } } function ..

메뉴에 있는 버튼을 누르면 해당 세션으로 이동하는 이벤트 간단하게 이렇게 작업했는데, 메뉴쪽을 position:fixed로 위에 고정시켜놔서 메뉴에 세션 상단이 가려져서 수정해달라는 요청을 받았당. ​ 그래서 귀찮지만 a태그는 button으로 바꿔주고 jquery 코드를 추가했다. var header; header = $("header").height(); $("header li button").click(function () { $("html, body").animate({ scrollTop: $(".section_05").offset().top - header }, 200); }); $(window).resize(function(){ header = $("header").height(); }); 반응..

ㅈㄱㄴ 가보자고 123 오늘 더이상 보지 않기 닫기 abc 오늘 더이상 보지 않기 닫기 팝업 마크업을 해주긔 (들여쓰기 라인 왜 저따구로 나와..?) //CSS * {margin: 0; padding: 0; box-sizing: border-box; line-height: 1; font-size: 12px;} html, body {width: 100%;} button {cursor: pointer;} #popup {width: 100%; height: 0;} .pop_item {border: 1px solid black; position: fixed; top: 15px; z-index: 999;} .pop_item.hidden {opacity: 0; pointer-events: none;} .pop01 ..