728x90 반응형 뷰3 7-segment 타이머 만들기 아무도 안만들었길래 내가 만드는 7세그먼트 타이머1. 7-segment 모양 만들기먼저 template 코드는 아래와 같다.세그먼트는 7개로 이루어져 있음을 명심하자. polygon 생성 참고 사이트: https://bennettfeely.com/clippy/ css를 생각해보자.아래는 7세그먼트 타이머를 띄워주는 화면의 css이다..seven-segment-display { position: relative; width: 40px; height: 80px;} 다음으로, 세그먼트 요소이다. 기본적으로 어두운 초록색을 띄워준다..segment { position: absolute; background-color: #004400; /* Dark green background */ .. 2024. 11. 18. 비/눈 오는 효과 이전에 작성하고 정리하지 않은 코드라 오류는 없어도 중복이 있을 수 있음. 아래처럼 비 또는 눈이 내리는 효과를 만들어 보자. 먼저 비 오는 효과다.keyframes를 생성해주는 함수를 만든다. function addKeyframes() { const styleSheet = document.styleSheets[0] || document.createElement('style') if (!document.styleSheets.length) document.head.appendChild(styleSheet) styleSheet.insertRule(` @keyframes fall { 0% { transform: translate(-10px, -20px); } .. 2024. 9. 19. 마우스 따라오는 원 먼저 template를 작성해준다.style은 변수로 지정해준다. 다음으로 css를 작성해준다.원하는 색에 원하는 크기로 작성해도 무방하다..circle { position: fixed; width: 20px; height: 20px; background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; pointer-events: none; /* 동그라미가 클릭을 막지 않도록 설정 */} 마지막으로 script를 작성해준다.먼저, 동그라미의 위치를 저장할 반응형 변수를 생성해준다.const circleStyle = ref({ top: '0px', left: '0px', transform: 'translate(-50%, -50%)',}) 다.. 2024. 7. 28. 이전 1 다음 728x90 반응형 "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
