CSS

[css] Input Animation, Styled-Components로 바꿔서 사용하기, input selector

export const GameInput = styled.input` transition: all 0.8s ease-in-out; &:focus { cursor: pointer; ${GameImg} { transform: scale(1.2); } ${GameTitle}::after { opacity: 1; } ${PlayBtn}::before { opacity: 0.6; } ${PlayBtn}::after { opacity: 0; } ${GameLike} { opacity: 1; } } `; styled.div 를 styled.input으로 바꾸면 focus 했을 때 다른 요소들에게 영향을 주지 못한다. 라벨라벨 이렇게 만들어서, export const Modal = styled.div` width: 3..

[css] grid는 어려월... repeat(auto-fill, minmax(285px, 1fr));

export const BoxWrapper = styled.div` display: grid; flex-direction: row; gap: 25px; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); @media ${breakPoints.screen4} { grid-template-columns: repeat(3, minmax(285px, 1fr)); } `; export const SearchWrapper = styled.div` display: grid; flex-direction: row; gap: 25px; grid-template-columns: repeat(auto-fill, minmax(285px, auto)); @media ${..

[css] 가상 요소, hover transition, 그라디언트 transition 주기

💨 부모 요소에 opacity를 주면 자식 요소의 opacity도 변하는데, 그것을 막기 위해 가상 요소를 썼다. 💫 그냥 color -> gradient transition은 깜빡임이 발생한다! 🤍 gradient는 transition 효과가 없다. 💨 부모 요소에 opacity를 주면 자식 요소의 opacity도 변하는데, 그것을 막기 위해 가상 요소를 썼다. 찍어놓은 건 아니지만, 재생 아이콘이 같이 투명해지는 문제를 수정해달라고 하셔서~~~ export const PlayBtn = styled.div` position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: cen..

[css] 자릿수 계산하기,,, 고정되지 않은 width값 transition 주는 방법 알고 싶다.

별점 매기는 컴포넌트 width값이 고정되어 있지 않고, padding값만 고정된 상태로 만들어 달라는 요청을 받았다. (원래는 width가 2.5의 width에 맞춰져있어서 padding이 고정이 아니였다.) padding값을 주고, width는 isOn이 false일 땐 값을 안주려고 했더니 transition이 안 먹는다. width: ${(props: IRatingBtnProps) => (props.isOn ? "160px" : "")}; auto로 해도 안 먹는다. 100%로 하면 버벅인다. transition은 두 상태 사이에 점진적인 값이 있을 때 가능하다고 한다. 즉 visibility 같은 경우엔 visible, hidden 값이 두 개 뿐이기 때문에 안된다고 한다! 결국 쓴 방법은 se..

[공통 컴포넌트,css]글자수 체크하는 Input창, x 초기화 버튼 Input, 테두리 겹치는 부분

글자수 체크하는 Input창 만들기 import { useState } from "react"; const CheckInput = ({ text = "체크 Input", typeClassName = "", sizeClassName = "", ...props }) => { const [length, setLength] = useState(0); const getTextLength = (event) => { setLength(event.target.value.length); // event.target.value의 길이로 설정 if (event.target.value.length >= props.maxLength) { // 자음 하나씩 더 입력돼서 11/10 이렇게 뜨길래 설정함 setLength(props..

CSS 이름 짓는 규칙

CSS 이름 짓는 규칙 App.css 를 보면 '컴포넌트 이름 - 클래스 형태'로 지어진 것을 볼 수 있다. 이는 클래스 이름에 컴포넌트 이름을 포함시킴으로써 다른 컴포넌트에서 중복되는 것을 막기 위해서다. BEM 네이밍이란 것도 있는데, 이는 CSS 방법론 중 하나로 이름을 지을 때 해당 클래스가 어디에서 어떤 용도로 쓰이는지 명확하게 쓰는 방식을 말한다. (ex. card__title-primary) 김민준, ⌜리액트를 다루는 기술⌟, 길벗, 2019

부트캠프 - precamp 4일차 : 끝말잇기, 로또, 쥬크박스

하나도 몰랐는데... 이젠 display, flex-direction, justify-contents, align-items 거의 생각없이 쓸 수 있게 되었다. 쥬크박스 만드는 게 블럭이 많아서 처음에 펜 없이 하려니까 너무 불편했는데 그거 하니까 술술됐다. 너무 재밌다...! 계속 이러면 좋을텐데 헤헤. 아 노트랑 펜을 들고다녀야겠다. 아무래도 쓰면서 하는 게 더 생각이 잘 돼. 쥬크박스 진짜 노래 나오게 하고 싶은데 오늘은 할 힘이 없다...핳하핳 너무 시간이 늦어버렸어. 따라하면서 내가 바꿀 수 있는 부분은 바꾸면서 하는 게 너무 재밌다! 근데 변수 이름 생각하는 거랑 어떤 걸로 할지 생각하는 시간이 더 걸리는 것 같다ㅎㅎㅎ 수업 사이 틈틈이 이것저것 해보면서 로또기능이랑 끝말잇기 기능도 만들었다!..

부트캠프 - precamp 3일차

발받침이 없으니까 불편해~ 웹앱 서비스 기본구조에 대해 배웠다. 프론트엔드는 데이터 생성 및 사용을하고 백엔드는 데이터 검증과 보완, 데이터 저장과 관리를 한다. 프론트엔드는 DL, Data Logic/Biding / 백엔드는 BL, Business Logic 자바스크립트 데이터 타입과 연산자 Object 배열도 객체 타입 중 하나. 객체에서 타생된 것임 문자열 + 문자열 : 문자열 합쳐짐 숫자 + 문자열 : 계산 안되고 문자열로 합쳐짐 어제 피어싱 끼우면서 봤던 자바 스크립트 안 쓰는 이유가 생각났다. 너무 많은 것을 허용해주기는 한다 싶었다. (근데 내가 쓸 때는 편함ㅎㅎ) 싸이월드 게임 부분 만들기 css를 끝내놓고 기능도 구현해보고 싶어서 js를 좀 만져봤다. 일단 로또에서 숫자 바꾸는 기능. c..