텍스트 그라디언트 애니메이션입니다.text의 배경을 360%로 설정하고 3가지 배경이 좌우 반복 이동하는 방식입니다. 예제  See the Pen 텍스트 그라디언트 by Kim Ui Hyun (@uihyunKimm) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스코드.text { -webkit-background-clip: text; -webkit-text-fill-color: transparent; }-webkit-background-clip : 배경 영역에 대한 설정으로 border-box, padding-box, content-box, text 등의 형태로 삽입이 가능합니다. -webkit-text-fill-color: trans..

# Tailwind CSS는?부트스트랩과 비슷하게flex pt-4 text-center rotate-90 이런식으로마크업에서 클래스 명을 바꾸는 것만으로 CSS를 적용할 수 있도록 보조하는 프레임워크 입니다. 1. Tailwind CSS설치하기npm install -D tailwindcss@latestnpx tailwindcss init tailwindcssnpm을 통해 설치 하고 tailwind.config.js 파일을 생성합니다.  2. 템플릿 경로 구성tailwind.config.js/** @type {import('tailwindcss').Config} */module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { ..

CSS filter 속성은 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용합니다. 보통 필터는 이미지, 배경, 테두리 렌더링을 조정하는 데 쓰입니다. SVG 필터 요소를 가리키는 URL 참조를 사용하여 SVG 필터를 적용할 수도 있습니다.   필터 기능(filter-function)의 종류  blur( ): 가우시안 블러를 적용 적용값: [length] 0 ~ n pxfilter: blur(5px);     brightness( ): 선형 배수를 적용해 이미지를 밝거나 어둡게적용값: [amount] 0%, 0(검은색) ~ 100%, 1(그대로 유지) 100%이상 값 가능filter: brightness(0.5);     contract( ): 대비 조정적용값: [amount] 0%, 0(완전 회색)..

예제 See the Pen hide Scrollbar by Kim Ui Hyun (@uihyunKimm) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스  코드.scroll::-webkit-scrollbar { display: none;}-webkit-scrollbar : 스크롤바 영역에 대한 설정으로 display: none 속성으로 스크롤바를 없앨 수 있습니다.  .scroll { -ms-overflow-style: none; //인터넷 익스플로러 scrollbar-width: none; //파이어폭스} 익스플로러, 파이어폭스는 -webkit-scrollbar 코드로 동작이 되지 않으며, 스크롤바를 숨기기 위해서는 다음과 같은 코드를 작성해야 합..

//좌우반전.class { transform: scaleX(-1);}//한바퀴 돌리기.class { transform: rotate(180deg);} transform: rotate(180deg)아래 방식으로 진행하다가 찾아봐서 기록해봅니다.