개발 기록 남기기✍️

Checkpoint 1 styled-component를 사용해서 css의 animation 기능을 넣어주고 싶을 때는 어떻게 하면 될까? keyframes css와 동일하게 keyframes를 사용해서 애니메이션을 구현할 수 있고, 컴포넌트 안에 animation : ${animation-name} 형식으로 넣으면 동작한다. Checkpoint 2 Box 컴포넌트 안에 span 태그를 넣으려고 한다. 스타일을 적용하는 모든 태그들을 다 컴포넌트 처리 해줘야 하는걸까? import styled from "styled-components"; const Wrapper = styled.div` display: flex; `; const Box = styled.div` display: flex; justify-c..

Checkpoint 1 만약 컴포넌트의 태그는 input에서 a태그로 바꾸고 싶은데 스타일은 input 컴포넌트의 속성을 그대로 유지하고 싶을 때 어떻게 하면 좋을까? "As" import styled from "styled-components"; const Father = styled.div` display: flex; `; const Btn = styled.button` color: white; background-color: tomato; border: 0; border-radius: 5px; `; function App() { return ( Log in Log in ); } export default App; 처럼 컴포넌트 안에 as="tagname"을 입력해주면 Btn의 스타일은 유지하면서 태..

Checkpoint 1 styled-component를 사용해서 색상이 다른 Box 두개를 만들어보겠다. import styled from "styled-components"; const Father = styled.div` display: flex; `; const Box1 = styled.div` background-color: teal; width: 100px; height: 100px; `; const Box2 = styled.div` background-color: orange; width: 100px; height: 100px; `; function App() { return ( ); } export default App; 정상적으로 작동하지만, Box1과 Box2에서 background-co..

CSS in JS CSS in JS는 스타일 정의를 CSS 파일이 아닌 JS로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다. 웹페이지를 HTML, CSS, JS 3개로 분리하는 것이 아니라, 여러 개의 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, JS를 몽땅 때려박는 패턴이 많이 사용되고 있다. React는 JSX를 사용해서 이미 JS가 HTML을 포함하고 있는 형태를 취하고 있는데, 여기에 CSS in JS 라이브러리만 사용하면 CSS도 손쉽게 JS에 삽입할 수 있다. JS에서 컴포넌트에 스타일 적용하는 방법 1. 컴포넌트에 직접 삽입 2. style.css App.js에 import "./style.css"로 stylesheet를 불러오고, 각 컴포넌트마다 처럼 className을 지정..