일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- JavaScript
- 파이썬 enumerate
- useState
- 한글 공부 사이트
- 리액트
- 내일배움캠프 프로젝트
- React Hooks
- 리액트 팀 프로젝트
- 자바스크립트
- 내일배움캠프
- 그리드 정렬
- 내배캠 프로젝트
- 프로그래머스
- 파이썬 for
- 리액트 페이지 이동
- 리액트 프로젝트
- 코딩테스트
- 파이썬 list
- 타입스크립트
- Next 팀 프로젝트
- 리액트 훅
- REACT
- 타입스크립트 리액트
- js
- typeScript
- 타입스크립트 props
- 파이썬 for in
- 파이썬 반복문
- 내일배움캠프 최종 프로젝트
- 파이썬 slice
- Today
- Total
목록CSS (15)
aotoyae
💡 tailwind.. 조건에 따라 스타일링이 가능했다.. 문제 풀기 기능 구현 중 채점 후에 사용자의 답이 정답이라면 파란색으로, 오답이라면 빨간색으로 표시를 해줘야 했다! 그래서 같은 태그(컬러만 다르게 준)를 두 개 두고 정답/오답에 따라 보이게 해야 하나? 하다가 tailwind 조건부를 검색했더니.. 바로 나왔다 🥹 ! 사용법은 className 을 벡틱으로 감싸고 조건을 걸어주면 된다! ⭕️ 주관식 답 사용자가 입력한 답 === 정답 이라면 파란색으로! {usersAnswer?.answer} ⭕️ 객관식 답 사용자가 입력한 선택지 === 이 선택지(map 을 돌려서 선택지를 표시했기에 같은 옵션인지 id 로 구분)이고 is_answer true 값을 갖고 있다면 파란색으로! 처음엔 보더로만 구..
💡 tailwind 에서도 calc 사용이 가능했다! .example { font-size: calc(2vw + 10px); /* viewport width에 따라 크기 조절하면서 10px를 추가 */ padding: 20px; /* 고정된 크기로 픽셀 단위 사용 */ margin: calc(1vw + 5px) calc(2vw + 10px); /* 세로는 viewport width에 따라, 가로는 픽셀 단위로 사용 */ width: calc(50% + 20px); /* 백분율로 지정하면서 20px를 추가 */ } 원래 요렇게 쓰는 calc .. tailwind 에서 써보자! 저 바(8vh)에 보더를 주고 안에 빨간 박스(8vh)를 채워놨는데 border-box 가 적용되어 있어서 빨간 박스가 보더를 가려..
💡 tailwind 로 체크박스 커스텀하기 { handleCheckObjectAnswer(id, options, option.id); }} /> checked 됐을 때 표시될 배경색을 넣어주고, 그 위에 png 하얀색 체크 표시를 넣어줬다! 그리고 bg-no-repeat bg-center 로 이미지가 가운데 위치하도록 했다. 🥵 url 문제가 좀 있었는데.. 파일에 넣어둔 이미지를 가져오려 했는데 url 에 파일 경로를 아무리 넣어봐도 .. 적용이 안됐다. tailwind.config 에서도 넣어봤지만.. 자꾸 경로 오류가 떠서 시간만 보내다가 supabase storage 에서 URL 가져올 수 있지 않나?!?!??! 해서 이미지 올려두고 url 복사해서 넣어두니 아주 잘 표시됐다. 😭 🔗 https:..
💡 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..
💡 Next.js 에 폰트 설정을 해보자. layout.tsx import { Inter } from 'next/font/google'; const inter = Inter({ subsets: ['latin'] }); export const metadata: Metadata = { title: 'Create Next App', description: 'Generated by create next app', }; export default function RootLayout({ children, }: Readonly) { return ( // ... 기본 설정은 inter 폰트로 되어 있다. 🌀layout 과 같은 위치에 styles/fonts.ts 추가 import { Inter, Roboto_Mono ..
💡 파일 추가 버튼을 ! 디자인해보자. HTML & CSS~ input[type=file]::file-selector-button { width: 30%; height: 30px; background-color: #e0c3ae; font-family: 'SunBatang-Light'; color: #784b31; border: none; border-radius: 10px; cursor: pointer; &:hover { transition: 0.3s; color: #fff; background-color: #b6856a; } } React ~ const FileInput = styled.input` width: 100%; margin: 5px 0; &::file-selector-button { widt..