💅styled components 안녕하세요 triplexlab 입니다. 오늘은 styled components에 대해서 이야기를 해보도록 하겠습니다. 👉props로 style을 변경 class를 추가해서 style를 변경하고 싶은 상황이라고 가정하면 props로 전달해서 삼항연산자로 변경하면 될것 같다고 생각을 합니다. import styled from "styled-components"; const Sample = () => { return ( ) }; const ItemStyle = styled.div` padding: 16px; margin: 8px; background-color: ${(props) => props.completed ? "slateblue" : "aliceblue"}; `; ex..

Ideas for Image Motion Trail Animations 👉🏻라이센스 FREE(프리): 개인 및 상업적으로 사용 가능 👉🏻다운로드 GitHub - codrops/MotionTrailAnimations: Some ideas for mouse/touch responsive image animations. Some ideas for mouse/touch responsive image animations. - GitHub - codrops/MotionTrailAnimations: Some ideas for mouse/touch responsive image animations. github.com

Next.js CORS 문제 해결 Next.js 공식문서에서 CORS 문제 해결 방법을 살펴보면 다음과 같습니다. next.config.js설정파일에서 rewrites메소드를 사용하라고 예시가 있습니다. //next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, async rewrites() { return [ { source: '/api/:path*', destination: `API주소/:path*`, }, ]; }, }; module.exports = nextConfig; 실무에서 썼던 코드 공유 그럼 위에 예시 코드를 참고로 해서 바로 실무에서 썼던 코드 공유해 드립니다. 참..

일반 HTML 파일 include/imports 하는 방법 안녕하세요 TriplexLab 입니다. 정적 파일 html Include하기 오늘은 일반적인 html파일을 Include 하는 방법에 관해서 살펴보도록 하겠습니다. 해당 포스트는 How To Include HTML W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 위 내용(링크) 참고해서 커스텀 마이징한것 입니다. ..

👉🏻Next 13.5v 에서 GlobalStyle 및 theme style 적용하기 안녕하세요 트리플랩입니다 :) 오늘은 NextJS 13에서 GlobalStyle 및 theme style 적용하는 방법에 대해서 이야기를 해보겠습니다. 일단 공식문에서 styled-components.tsx을 설정하는 방법을 참고했습니다.(하단 링크 참고) // src/lib/styled-components.tsx 'use client' import React, { useState } from 'react' import { useServerInsertedHTML } from 'next/navigation' import { ServerStyleSheet, StyleSheetManager } from 'styled-compo..

Blogge-Blog Template 👉🏻라이센스 FREE(프리): 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 Blogge | Personal Blog Site Articles View the latest news on Blogger By Mary Astor October 19, 2020 - 2 min Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. read more By Mary Astor October 19, 2020 - 2 min Lorem ipsum dolor sit amet, consetetur sadipscing eli blogge.staticmania.com 👉🏻다운로드 Blogge | Personal ..

Animating Multi-Page Navigations with Browser View Transitions and Astro 👉🏻라이센스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 Shop A simple Shop built in Astro using View Transitions and TailwindCSS astro-shop-ten.vercel.app 👉🏻다운로드 Animating Multi-Page Navigations with Browser View Transitions and Astro | Codrops A beginner-friendly guide that walks you through the use of the Browser View Trans..

Wemeet-Free Meetup Website 회의, 이벤트, 포럼 및 모임을위한 무료 모임 웹 사이트 템플릿입니다.전체 화면 배너, 카운트 다운 타이머, 고정 탐색 표시 줄, 모임 일정 및 자주 묻는 질문에 대한 아코디언이 포함됩니다. 👉🏻라이센스 저작권표시 [CC BY]: 저작자를 표시하고 영리목적으로 사용할 수 있습니다. 👉🏻데모 미리보기 Colorlib | Free Bootstrap Website Template preview.colorlib.com 👉🏻다운로드 https://colorlib.com/wp/template/wemeet/

Rapid Image Layers Animation Tympanus 에서 가져온 무료 리소스 👉🏻라이센스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 Rapid Image Layers Animation | Codrops Rapid image layers animation Click the middle menu item to see the effect. tympanus.net 👉🏻다운로드 Rapid Image Layers Animation | Codrops A while back, I came across this tweet by Twitter Marketing, which shows a video with a really nice intro animation. So..

letters effect (텍스트 열리는 효과) 스크롤컨트롤에따라 텍스트가 열리고 닫히는 효과입니다. 👉🏻라이선스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻다운로드 letters effect ... codepen.io

image hover effect (이미지 호버 효과) 이미지 호버시 이미지 사이즈가 커지는 효과입니다. 슬라이드에 적용할 수 있습니다. 👉🏻라이선스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻다운로드 image hover effect — week 10/52 image hover effect — week 10/52... codepen.io

Layout with Reveal Animations 버튼 클릭 메뉴 및 반응형 웹 입니다. 오른쪽 상단에 메뉴 버튼 클릭시 추가 슬라이드 효과 있습니다. 지원 브라우저는 Microsoft Edge 이상부터 가능합니다. 👉🏻라이센스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 Content Preview and Menu Animation | Codrops Projectiles Incredible as this seems to our ordinary ideas, it is undoubtedly an understatement rather than an exaggeration of the true proportion as observed in the case of ko..