kasumil의 코딩 공작소

회사 소개 사이트가 완성된지는 꽤 오래되었는데, 해당 사이트 최적화 이슈가 터졌다. 모바일은 너무 느리다고... 원인을 찾아보니 첫번째. 영상의 크기가 너무 컸다. 두번째. 영상의 로딩시 임시로 띄울 화면이 없었다.(poster 속성 미기재) 세번째. 이미지들이 너무 컸기에 문제가 있었다. 네번째. js와 css 호출하는 데 있어 blocking때문에 그러했다. 1번의 경우 영상이 50mb 이상의 파일을 2개이상이나 호출하고 있었다. 2. poster 속성의 이미지를 미기재 할 경우 load단계에서 동영상 다운로드 문제로 대역폭이 좁아져 자연스럽게 blocking이 된다. ㄴ poster를 기재하면, 일단 load단계에서 poster이미지를 호출하고, 브라우저 load작업이 끝나면, 그때부터 동영상을 호..

카카오 서버에 불나는 바람에 이전 글이 안 가져와지는데, 이전 글을 참고해서 기본코드를 작성한 후. 진행 할 것. 기존 작성된 코드는 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