kasumil의 코딩 공작소

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; } 프로그레스바 커스텀.

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

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

http://ci4doc.cikorea.net/libraries/pagination.html 페이지네이션(Pagination) — CodeIgniter 4.2.6 documentation Docs » 라이브러리(Libraries) » 페이지네이션(Pagination) © Copyright 2019-2022 CodeIgniter Foundation Last updated on Sep 14, 2022. Built with Sphinx using a theme provided by Read the Docs. ci4doc.cikorea.net 기본적인 설명은 여기 있다. 하지만, 이것보다 필요한 게 실제 작동되는 부분이었다. 그래서 찾아보니 한국 코드이그나이터 모임인 cikoea에서 만든 예제가 있었다. htt..

let tabEl = $('#tabs').children(); let dataStore = window.sessionStorage; if(dataStore.getItem('1-tabs')) { let selected = JSON.parse(dataStore.getItem('1-tabs')); $(tabEl).each((el) => { let elId = $(tabEl[el]).attr("id"); if(elId !== selected.selectId) { $(tabEl[el]).attr('aria-selected', false); $(tabEl[el]).removeClass('active'); let showTab = $(tabEl[el]).attr('data-bs-target'); $(showTab)...

다국어 SEO를 최적화 중인데, 한글로 검색된 페이지가 유난히 이상하게 구글홈페이지로 날라가는 버그가 발생했다. 현재 HTTP_REFERER를 통해서 이전 페이지 유무를 감지해서 이전페이지로 날려보내고 있었는데, 이상하게 구글만 원래 구글 홈으로 날려가더라. 개발자 도구를 통해 네트워크를 검색해보니 사이트 도메인으로 날라가는데, 그 후 구글 홈을 호출하더라. 이거 리다이렉션 오류구나 싶던...신기하게 도메인을 직접 치는건 정상 작동. 찾아보니 3가지의 HTTP_REFERER가 추출하는 방식을 알게되었다. 1. 주소창에 주소 입력. HTTP_REFERER 없음 2. 즐겨찾기의 경우. HTTP_REFERER 없음 3. 링크를 통한 접속. HTTP_REFERER 있음. 3번의 경우만 오류가 발생하는 것이었다...

기존에 DIV태그 복사 기능을 구현해두었다. https://curryyou.tistory.com/358 [자바스크립트] div, p, a, span 텍스트 복사(copy)기능 구현 방법 보통 자바스크립트에서 텍스트를 클립보드에 복사하는 방법은 textarea, input[text]태그의 value값을 선택하여 document.execCommand('copy') 명령어를 실행하는 것이다. [자바스크립트] 텍스트 클립보드 복사 curryyou.tistory.com 위 내용으로 썼는데, 문제는 크롬에서 document.execCommand('copy'); 위 내용이 Deprecated된 상태.. 작동이 안됨. 그래서 찾아보았다. 클립보드 API를 사용하길 권장. // div 내부 텍스트 취득 const val..

데이터 테이블을 구현하는데 있어 서버사이드 기능이 필요했다. 프론트만 쓰면 좋지만, 이게 5천개가 넘어간 순간 1분이 넘게 로딩된다... 그래서 이전에는 구현하지 못했지만, 이번에 구현하게 되었다. 아래 테이블 컬럼들은 의미 없는 데이터입니다. // front.js 네트워크 통신시 전달되는 데이터 값. draw: 3 columns[0][data]: 0 columns[0][name]: columns[0][searchable]: true columns[0][orderable]: true columns[0][search][value]: columns[0][search][regex]: false columns[1][data]: 1 columns[1][name]: columns[1][searchable]: tru..