kasumil의 코딩 공작소

카카오 서버에 불나는 바람에 이전 글이 안 가져와지는데, 이전 글을 참고해서 기본코드를 작성한 후. 진행 할 것. 기존 작성된 코드는 context => 부분에서 index를 따로 가져와야 해서 이걸 반응형으로 고쳣더니 화면에 따라 테두리가 사라지는 버그가 있었다. 그러다가 겨우 찾았다. 정답은 index가 아닌 value 값을 통해 해당 line을 찾는 것이었다. 이러한 질문을 보고 원개발자가 해당 기능을 추가하겠다고 적었다. https://github.com/chartjs/Chart.js/issues/10007 Radar graph - grid customization · Issue #10007 · chartjs/Chart.js I'm using a Radar graph and I would like..

사이트를 개발하는데 있어 생뚱 맞은 게 왔다. 무려 keyframe을 통한 애니메이션 구동... 이게 내가 만드려고 해보니 너무 어려웠다. 왜냐하면 x축 이동만 있는 게 아니라 y축도 이동시키면서 이동시 모습은 해당 부분이 보이지 않아야 하므로 그래서 기본 코드에서 기존 3개에서 4개로 밀어넣는 부분을 고쳤고, 해당 넓이를 찾기위해서 message 태그 위치에서 개발자 도구로 top, width를 넣어가며 해당 태그의 길이와 위치를 일일히 찾아야만 했다. 그리고 overflow hidden, animation css를 꺼둔 상태로. 해야 이동되지 않음. code epen에서 위치랑 실제 구동 되는 위치가 달라서 원본 소스코드로는 -3, -6, -9, -12.5em으로 잡야한다. 좀 많이 어려웠지만 ani..

progress { -webkit-appearance: none; height: 4px; text-align: left; position:relative; } progress::-webkit-progress-bar { height: 4px; margin:0 auto; background: lightblue; border-radius: 5em; } progress::-webkit-progress-value { background-color: #19E0A7; display:inline-block; float:left; height: 5px; border-radius: 5em; margin:0px -10px 0 0; } progress:after { margin:-26px 0 0 -7px; padding: 4..

프로그레스바 중에 각 단계별 진행되는 바를 스텝바(step)라고 하는 것을 방금 알았다. 이를 나중에 또 찾기 귀찮으니 기록한다. 내가 만든 css중 li:after에 z-index를 뺐더니 보더 색상이 다를 경우 해당 선이 원형(동그라미) 위에 올라오는 문제가 생긴다. 일단 보더 색상을 일치하는 것으로 진행했지만 그게 안되는 경우 어떻게 해봐야 할 듯... 결과물 https://jsfiddle.net/gvnwqp4d/ Edit fiddle - JSFiddle - Code Playground jsfiddle.net CSS /* step bar */ .stepbar { counter-reset: step; } .stepbar li { list-style: none; display: inline-block;..

별건 없고, 그냥 css 적용할때 알게된 사실을 적기위해 적는다. https://jsfiddle.net/92qvegtr/2/ Edit fiddle - JSFiddle - Code Playground jsfiddle.net progress { -webkit-appearance: none; // 이부분이 있어야 기본적으로 먹힌 색상을 수정할 수 있다. height: 5px; } progress::-webkit-progress-bar { background: "lightblue"; border-radius: 5em; } progress::-webkit-progress-value { background-color: #19E0A7; border-radius: 5em; } 프로그레스바 커스텀.

제이쿼리 버튼 태그나 다른 일반적인 태그는 trigger로 해당 이벤트를 끌어낼 수 있다. 그러나 a 태그는 href가 달려 있어 그런지 trigger('click')으로 끌어 낼 수 없다. 간혹 오래된 부트스트랩 태그가 a를 버튼식으로 변환해서 쓰기에 좀 번거로운 과정이 있다. https://stackoverflow.com/questions/56617376/not-able-to-trigger-click-event-for-button-or-anchor-element-on-page-load Not able to trigger click event for button or anchor element on page load 👋 Basic CSS-Only Modal

www.naver.com 네이버 네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요 www.naver.com 네이버의 주소이다. // www.naver.com/ 가져오도록 하는 부분이 http_host; $_SERVER[HTTP_HOST] // www.naver.com/login에서 /login만 가져오는 게 Request_uri이다. $_SERVER[REQUEST_URI]"; // 이중 uri 일부만 일치하는 기능이 필요해 해당 기능을 추가하였는데, // strpos는 false가 아닌 경우 해당 위치를 말하거나 // path값이 일부가 중복되는 경우 false가 아닌 값을 출력하여, 문제가 되었다. // preg_match('/login/', $_SERVER[REQUEST_URI]);로 사용하..

회사에서 급하게 Text 문구가 있는 곳을 스크롤링 되도록 해야하는데, 이걸 어떻게 구현하나 찾고 있었다. 검색한 내용으로 "자동 회전 html, html carousel, html 태그 자동으로 scroll, auto scroll html, auto scroll fadeup"로 찾던 중 텍스트 롤링이라는 단어를 우연찮게 보았다. 그랬더니 이 기능을 텍스트 롤링이라고 부르는 것을 알게 되었다. 아무튼 나의 경우에는 li값만 교체 되도록 필요해서 해당 내용을 수정해야했다. js는 회전을 건드리는 것이지 내용을 교체하는 방식이 아니기때문에.. php에서 해당 내용을 갯수만큼 뿌리고, li를 교체하는 방법을 고민하고 있었다. 지금 작성하는 도중에 생각난 건데, 나중에 생성된 갯수만큼 자동으로 연결되도록 뿌리는..

데이터 테이블 만지면서 알게 된 사실인데, Data Table을 사용하면 rowspan과 같은 것은 자동으로 먹히지 않는다. 그로인해 문제점이 생기는데, 한개의 행을 클릭할 경우 펼쳤다가 접히는 구간이 필요한데, 해당 구간이 먹히지 않는 것이 문제였다. 그래서 기존에는 한개의 테이블을 더 만들었는데, 이제 방법을 찾았다. idx title content status date

회사 업무를 하면서 알게된 사실인데, 구글 봇의 경우 다국어 링크가 리다이렉션을 하면 크롤링을 중단한다. 즉 기본도메인으로 접속했다고 가정시 정상작동되나 현재 사용중인 회사 사이트의 ci 구조상으로 언어 변경 페이지로 접속시 리다이렉트를 통해 session 랭귀지 값을 변경하는데, 이때 구글봇은 리다이렉트를 감지하고 해당 페이지의 크롤링을 중단하여 해당 언어 페이지로 접근을 못 하게 된다. 그리하여 일반적인 사이트들은 도메인에 path로 넣어 해당 값을 읽어 진입하게 하는 것 같다. 예시로는 애플이 있는데, 애플의 경우 kr을 넣어 해당 국가를 구분한다. 이렇게 진행하면 구글봇에서 해당 페이지가 있음을 알게되고 해당 언어의 메타데이터를 가져가게 된다. www.apple.com Apple Discover ..