개요프로젝트 진행 중 다크모드 전환 간 tailwindcss로 transition 값을 설정한 요소의 transition이 매끄럽지 않음을 발견하게 되어 이를 해결할 방법을 찾아보았다.원인tailwindcss로 transition을 설정할때 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);라는 값이 포함되는데, 이로 인해 기본 css로 transtion을 설정했을 때와 차이가 발생함을 확인했다.해결 방법transition-timing-function 값을 기본값으로 설정해주면 된다.찾아보니 transition-timing-function의 기본값은 ease값이라고 한다. tailwindcss에서는 ease-[ease]이게무슨이상한코드야로 설정할 수 있..

코드 See the Pen Untitled by 김채민 (@aleph-kim) on CodePen.출처https://cloud-library.tistory.com/entry/CSS%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EA%B0%84%EB%8B%A8%ED%95%9C-%ED%83%80%EC%9D%B4%ED%95%91-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98

개요디자인적으로 안 좋을 것 같지만... 태그에 hover시 테두리가 무지개색으로 빛났으면 좋겠다는 생각이 들었다.코드/* 무지개 효과 */div:hover{ animation-duration: 5s; animation-name: rainbowLink; animation-iteration-count: infinite;}@keyframes rainbowLink { 0% { border-color: #ff2a2a55; } 15% { border-color: #ff7a2a55; } 30% { border-color: #ffc52a55; } 45% { border-color: #43ff2a55; } 60% { border-color: #2a89ff55; } 75% { border-color: ..

개요임파님의 블로그를 보면 오늘의 명언이 나오는데 나도 이 기능을 적용시켜보고 싶어 찾아보니 마음에 드는 글이 없어 직접 만들어 포스팅을 하게 되었다.주의사항html, css, js에 대한 기초 지식이 없을 경우 진행이 어려울 수 있습니다.블로그 스킨에 따라 css가 깨질 수 있습니다.기능 적용 방법1. js 파일 업로드업로드 경로: 티스토리 블로그 관리 -> 스킨 편집 -> html 편집 -> 파일 업로드 -> 추가파일 내용/*** 랜덤 띵언을 제공하는 API URL* @constant {string}*/const DDING_API_URL = "https://korean-advice-open-api.vercel.app/api/advice";/*** API에서 랜덤 띵언을 가져와 HTML을 업데이트하는 ..

코드 js function lodingSign() { // 로딩 이미지 div var loading_div = ` `; $('body').append(loading_div); // 마우스 커서 로딩 중으로 변경 $('html').css("cursor", "wait"); // ajax 함수 실행 버튼 클릭 이벤트 차단 $('button').attr('onclick', 'return false;'); } function lodingImgHide() { // 마우스 커서 기본값으로 변경 $('html').css("cursor", "auto"); // ajax 함수 실행 버튼 클릭 이벤트 차단 해제 $('button').attr('onclick', '함수이름()'); // 로딩 이미지 삭제 $('#loading..

COM-DEV 기술설명서 ✔️ 개요 💬 개발자들의 코드 공유, 질문 등을 위한 커뮤니티 사이트 구현 ✔️ Github 리포지터리 😈 https://github.com/kimchaemin000617/comdev ✔️ 사용된기술 ⚓️ 버전관리 - Git , Github ⚓️ 배포 - 👾 Github - ☕️ Tomcat - 🐳 Docker ♻️ 개발환경 - SpringBoot - Sqlyog - Chrome - Firefox - Windows 11 - Tomcat - JSP 🔥 서비스환경 - Nginx - Mariadb - Docker 🔱 기술 스택 - Java - Spring Boot - MariaDB - HTML, CSS, JS - JQuery - Ajax - Tailwindcss - daisy ui ✔..

코드 게시판 공지 게시판 자유 게시판 사용 시 참고 https://goodsgoods.tistory.com/249

표 유형 설명 기본 예제 Spec text (en-US) 디폴트 값. 한줄의 텍스트 필드입니다. 새줄 문자는 입력값으로부터 자동으로 제거됩니다. password (en-US) 값이 가려진 한줄 텍스트 필드. 사이트가 안전하지 않으면 사용자에게 경고합니다. email (en-US) 이메일 주소를 편집할 수 있는 필드. 텍스트 입력 필드처럼 보이지만 유효성 검증 매개변수가 존재하며, 브라우저와 장치가 동적 키보드를 지원하는 경우 이메일에 적합한 키보드를 보여줍니다. HTML5 button 기본 행동을 가지지 않으며 value을 레이블로 사용하는 푸시 버튼. file 파일을 지정할 수 있는 컨트롤. accept 특성을 사용하면 허용하는 파일 유형을 지정할 수 있습니다. hidden (en-US) 보이지 않지만..