Web2 [CSS] styled components(basic) 스타일 컴포넌트 유용한 문법 몇가지 정리 1) Extending Styles 대부분의 스타일 속성이 같고, 일부만 다르게 표현하고 싶을 경우, 작성된 스타일 컴포넌트를 props값으로 새 스타일 컴포넌트에 전달하고 변경하고 싶은 값만 써주면 확장해서 사용가능. 2. as as 사용하면, 함수를 적용할 수 있음. 3. 어떤 컴포넌트에서도 사용가능 4. props 값을 이용해서 상황에 따른 값으로 스타일 설정 가능. 5. animation 에니메이션을 key-frame 말고 from to로 설정하면, 글로벌 변수로 선언해준 다음, 여러군데에서 재활용 가능 6. GlobalStyle 글꼴이나 페이지 공통 색상 같은 값은 모든 곳에서 활용되어야하기 때문에 효율적으로 관리 하기 위해서는, ThemeProvider.. 2022. 10. 19. [CSS] 모달창을 화면의 가운데에 위치시키기(+ 뒷배경 어둡게) 모달창의 상위 컴포넌트에서 스타일 설정 해줘야함 .app { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background:grey; } 2022. 1. 21. 이전 1 다음
