See the Pen Star Rating by 김채민 (@aleph-kim) on CodePen.

개요프로젝트를 진행하며 flickity 라이브러리를 사용하여 만든 노래 슬라이드를 코드펜에 정리해보았다.codepen See the Pen song card slide by 김채민 (@aleph-kim) on CodePen.

비교특징CSS 리셋 (Reset)CSS 노멀라이즈 (Normalize)기본 스타일 처리브라우저 기본 스타일을 모두 제거하여 모든 요소를 초기화합니다.브라우저 간 기본 스타일 차이를 보완하면서 유용한 기본 스타일은 그대로 유지합니다.접근 방식모든 요소의 스타일을 제거한 후, 개발자가 전부 직접 스타일을 정의합니다.기본 스타일의 일관성을 높여 브라우저 차이를 줄이고 접근성을 개선합니다.대표 라이브러리Elad Shechter’s CSS Resetnormalize.css장점- 초기 상태에서 스타일링을 시작하여 예측 가능성이 높습니다. - 모든 요소를 동일한 상태로 만듭니다.- 기본 스타일의 장점을 유지하면서 일관성을 제공합니다. - 접근성과 사용성을 개선합니다.단점- 기본 스타일을 모두 제거하므로 추가적..

개요프로젝트 진행 중 다크모드 전환 간 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..