![]()
사이드 프로젝트를 진행하면서 무한 슬라이딩 애니메이션을 구현할 일이 생겨서 하게 되었다.라이브러리를 따로 사용하지 않고 useState 훅과 함께 같이 만들어보았다.다른 사람 글을 보고 참고한 코드여서 나의 맞게만 살짝 수정만 해보았다.⚡동작 방식구현하기 전 구현에 대한 설명이 필요하다.먼저 슬라이드 형태로 흘러가야할 요소들을 한줄로 세워준다.똑같은 요소들을 하나 더 만들어준다.전체코드home.js 전체 코드import '../../Styles/Home.scss'import { useNavigate } from 'react-router-dom';import { useState } from 'react';const Home = () => { const navigate = useNavigate() ..
CSS는 생각보다 배우기가 쉽다. 하지만 작업이 많아질수록 불편함이 커지게 된다. HTML마크업이 제대로 되어있지 않다면 더욱 큰 문제가 발생한다. 그래서 우리에게 필요한 것은 SCSS 이다. Sass(SCSS)란 무엇인가? Sass란 Syntactically Awesome Style Sheets의 약자로, CSS pre-processor로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성 및 가독성을 높여주어 유지보수를 쉽게 해준다. Sass와 SCSS의 차이는 어떻게 표기되는지 알아보자! [Sass 예시] .sass height: 100px ui color: blue [SCSS 예시] .scss { height: 100px; ui { color: blue; } } Sass 와 SCSS의 차..
![]()
SCSS-nomad-masterclass 강의에서 클론코딩 강의 중 하나를 보고 나만의 방식대로 살짝만 변형 시켜서 바꿔봤다. 스타일을 클론한 사이트는 https://besthorrorscenes.com/ 이곳이다. 배운 것을 활용 하여 해외축구 선수들의 간단한 뉴스(소식) 을 기록한 사이트로 바꿔보았다. 내 스타일대로 바꾼 모습 여기서 새로 알게된 CSS 속성들이 있었다. linear-gradient() 함수는 선형 그라데이션을 만드는 데 사용 background: linear-gradient( to bottom, rgba(0,0,0,0.1) 1%, transparent, transparent, transparent, transparent ); main 오른쪽 초록색 부분에 칸을 구분하기 위해 약간의 ..
