2024/08/21 2

styled-components-2, reset css

GlobalStyle- 모든 컴포넌트에 적용해야 할 속성이 존재한다면,전역적으로 지정해주는 스타일  사용법변수 선언→ 백틱(`) 안에 적용받고 싶은 곳 입력ex)const GlobalStyle = createBlobalStyle `          body {       // 모든 컴포넌트에 적용할 속성          }`; export default GlobalStyle   css reset- *크로스 브라우징 이슈를 해결하기 위한 기법(사람마다 쓰는 브라우저가 다르다.누구는 크롬, 누구는 사파리, 누구는 엣지, 파이어폭스...그래서 같은 태그여도 크기가 다르기 때문에그 크기를 맞춰주기 위해 default style을 제공한다.     (*크로스 브라우징 :여러 종류의 웹 브라우저에서 동일한 사용자 ..

styled-components 1

태그에 스타일 주는 방법html파일에서 클래스나 아이디를 부여계속 import 해야함유지보수하기 힘듬 style을 사용하여 객체 형태로 부여가독성이 떨어짐 3. css in js모든 파일을 import 해줄 수 있음조건문, 변수 등 다양한 로직을 작성할 수 있음 기본 사용법최상단에 import styled from 'styled-components' 입력→ const 변수 = styled. 표준태그 `      속성: 값;      속성: 값;      속성: 값;    `→ 변수를 표준태그처럼 사용      + 표준태그 말고 함수도 입력할 수도 있다.const 변수 = styled. ('함수')`      속성: 값;      속성: 값;      속성: 값;`