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장점- 초기 상태에서 스타일링을 시작하여 예측 가능성이 높습니다. - 모든 요소를 동일한 상태로 만듭니다.- 기본 스타일의 장점을 유지하면서 일관성을 제공합니다. - 접근성과 사용성을 개선합니다.단점- 기본 스타일을 모두 제거하므로 추가적..

개요vue로 포트폴리오 프로젝트 진행 중 특정 클래스들을 추가하는 코드를 별도의 데이터 파일로 관리했더니 해당 클래스의 빌드가 정상적으로 이루어지지 않는 오류가 발생했다.해결방법// tailwind.config.jsmodule.exports = { ... safelist: [ 'text-gray-500', // 미리 빌드하고 싶은 클래스 { pattern: /bg-(red|blue|green)-(100|200|500)/, // 정규식을 사용하여 여러 클래스 포함 variants: ['hover', 'focus'], // 변형 클래스 포함 (예: hover:bg-red-500) }, ], ...}

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