나보단 잘하자

일단 구현에 의의를 두고…. 이걸 적어도 되는지 의문이긴 한데 빠르게 구현하고자 하는 사람들을 위해 기록해봅니다. 아래와 같은 것을 구현 해 볼 것인데… 우선 여기서 쓰는 marquee 태그는 아주 생소하다고 생각이 들 수 있습니다. 그만큼 이젠 안쓴다는 뜻임ㅎ 제대로 쓰고 싶으면 자바스크립트를 써보아요~ 간단하니, 코드에 주석으로 설명을 대신하겠습니다. import styled from "styled-components"; const GlassIndex = () => { return ( GLASSMORPHISM ); }; export default GlassIndex; const GlassWrap = styled.div` position: relative; width: 600px; height: 100..

이런 문제 있는 분들 많을 것 같은데 생각보다 검색 결과가 없어서 찾기 힘들었다. 결국 직접 스택오버플로우에 물어봤고, 답변을 공유하고자 한다. 그라디언트를 당연히 마지막은 투명도를 0으로 줘서 자연스럽게 배경에 흡수되는 그라디언트를 만들려고 했는데 이상하게 줄이 생긴 것 같은 착시 효과를 주더라. 보통 짜는 코드처럼 단순하게 그라디언트를 설정하면 아래와 같이 보여진다. div.gradient_wrap { margin: 100px; width: 300px; height: 300px; background: linear-gradient(0deg, rgba(38,38,38,1) 0%, rgba(255,255,255,0) 100%); } 이 느낌을 없애주기 위해서는 아주 섬세한 그라디언트 컨트롤이 필요하다. 아..

css, scss의 사용을 위해 항상 다른 파일을 만들어야 하거나 styled component처럼 새 파일이나 마찬가지인 코드를 작성해야 하거나 그렇다고 부트스트랩처럼 자유도가 떨어지는 것 도 아닌 테일윈드를 요즘 애용중이다. 테일윈드로 아래처럼 연속으로 이어지는 것 같은 x축 슬라이드를 구현해보고자 한다. 1. tailwind.config.js 테일윈드의 모든 추가 속성은 이곳에서 적용시킨다. 키 프레임과 애니메이션은 헷갈리지 않게 아래의 루트에 넣어주자. module.exports = { theme: { extend: { keyframes: { 키프레임 적는 곳 }, animation: { 애니메이션 적는 곳 } }, } } 참고로 본인의 버전은 아래와 같다. { "dependencies": { "..

공의 그라디언트 색을 텍스트에 적용시켜 볼 것이다. 샘플코드 index.html HELLO, WORLD! sample.css body { display: flex; height: 100vh; align-items: center; justify-content: center; flex-direction: column; } h1 { font-size: 60px; } .gradcircle { width: 100px; height: 100px; border-radius: 5rem; background: linear-gradient(to right top, #861657, #ffa69e); } 우선, gradcircle에 적용된 색을 h1에도 background로 넣어준다. h1 { font-size: 60px; ..