일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
- useState
- js
- typeScript
- 프로그래머스
- 내일배움캠프 최종 프로젝트
- 내일배움캠프
- 리액트 프로젝트
- 코딩테스트
- tanstack query
- 파이썬 list
- 파이썬 slice
- 한글 공부 사이트
- 자바스크립트
- 리액트 훅
- 타입스크립트
- 파이썬 replace
- 내일배움캠프 프로젝트
- React Hooks
- 리액트 팀 프로젝트
- 타입스크립트 리액트
- 타입스크립트 props
- 파이썬 enumerate
- 내배캠 프로젝트
- 파이썬 for in
- REACT
- 파이썬 for
- JavaScript
- Next 팀 프로젝트
- 리액트
- 파이썬 반복문
- Today
- Total
목록2024/03/21 (2)
aotoyae
💡 tailwind 로 그림자 효과를 넣어보자! github 링크에 호버하면 그림자를 주고싶었다! 🎀 디자인을 바꾸고 싶다면 tailwind.config.ts 에서 설정할 수 있다. theme: { extend: { dropShadow: { DEFAULT: '2px 2px 0 #890105', }, }, }, DEFAULT 말고도 md, 3xl 등 사이즈 별로 추가할 수 있다! 🔗 https://tailwindcss.com/docs/drop-shadow Drop Shadow - Tailwind CSS Utilities for applying drop-shadow filters to an element. tailwindcss.com
💡 tailwind 로 text-shadow 를 적용시켜보자. tailwind 에 텍스트 섀도우를 검색하면 drop-shadow 가 나온다. 이걸로 폰트도 적용하는건가? 하고 클래스에 넣어봤지만 적용 안된ㄷ.. 알아보니 tailwind 에서 text-shadow 는 공식적으로 지원을 안한다고 한다. 그래도 적용하는 법이 따로 있긴 했다! 원래는 이런식으로 class 명을 넣어주는데, text-shadow 는 방식이 조금 달랐다. _x_y_blur_color 순으로 보면 된다. tailwind.config 를 수정해서 text-shadow 옵션을 직접 등록하는 방법도 있었는데, (그럼 원래 class 명처럼 깔끔하게 쓸 수 있다.) 한 곳에서 한 컬러만 쓸거라 따로 등록하진 않았다. 🔗 https://ww..