CSS5 styled components styled components란? styled components란 JavaScript와 CSS의 능력을 결합한 CSS in JS 라이브러리이다. styled components는 CSS를 JavaScript를 통해 집어넣어 유동적인 스타일링을 할 수 있다. 기존의 CSS 방식은 파일을 별도로 분리하고, id나 class 이름을 통해 가져와 사용했지만 styled components의 경우 한 파일 내에서 컴포넌트 이름을 사용하듯 스타일링을 진행한다. CSS in JS CSS in JS는 CSS를 JavaScript 코드 내에 포함하는 방식이다. CSS in JS 방식으로 작성된 스타일링 코드에는 컴포넌트마다 고유한 class name이 적용된다. 이 class name은 브라우저 런타임에서 각 컴포넌.. 2023. 7. 2. react AOS 사용법 저번 시간에 포스팅 했던 Animation.css와 비슷한 AOS 사용법을 알아보도록 하자. 먼저, AOS를 설치한다. yarn add aos AOS는 특이하게 useEffect를 사용한다. 따라서 useEffect를 import 해준다. import React, {useEffect} from 'react' ; 그리고 AOS를 import 해준다. import AOS from 'aos'; import "aos/dist/aos.css'; 이제 useEffect를 적어준다. useEffect(() => { AOS.init({ duration: 1500, }); }) 이제 효과를 적용해보자. 페이지를 보면 요렇게 박스가 나온다. 원하는 효과가 있다면 data-aos 부분을 복붙해서 원하는 요소에 붙여넣어보자... 2022. 2. 9. react Animate.css 사용법 CSS를 이용한다면 다양한 애니메이션 효과를 구현할 수 있다. 그런데 시간도 없고 귀찮다면 어떻게 할까? Animate.css를 사용해보자. https://animate.style/ Animate.css | A cross-browser library of CSS animations. Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints. animate.style 나는 react에서 사용하려고 한다. 먼저, 설치를 해준다. npm 설치 npm install an.. 2022. 2. 3. hover시 안에 글자까지 hover 효과 안녕 전체를 감싸는 div 상자가 있고 그 안에 span 글자가 있다. 만약 마우스를 올려놓는 hover를 했을 때 상자와 글자의 색이 바뀌는 효과를 주고 싶다면..? 둘 다 hover 효과를 주면 되겠지 하고 .box{ background-color: white; } .box: hover{ background-color: green } .title{ color: green; } .title: hover{ color: white; } 이런식으로 코드를 작성한다면 (동영상을 첨부하려 하였으나 이상하게 올라감...) hover하면 코드에 충실하게 div만 색이 바뀐다. 글자에 hover 해야 글자도 색이 바뀌는 것을 볼 수 있다. 우리가 원하는 것은 이게 아니다. 둘 다 동시에 바뀌는 것. 이때는 코드를 다.. 2021. 12. 24. PostCSS Post CSS CSS 전처리기 중 하나인 Post CSS에 대해 알아보도록 해요. 처음 Post CSS를 접했을 때가 생각나요. 프로젝트에서 CSS를 맡게 되었는데 Post CSS에 대해 정말 무지한 상태였거든요. 그냥 'React에서는 이렇게 CSS를 작성하는구나.'하고 지나쳤던 기억이 있네요. Post CSS인 걸 모르고 React만의 CSS 작성법인 줄 알았던 거죠. CSS 전처리기 하면 LESS나 SASS 등이 있어요. 사용하려면 프레임 워크에 맞게 문법을 공부해야 하죠. 특히 SASS의 경우 RUBY를 배워야 하는 번거로움이 있답니다. 하지만 Post CSS는 JavaScript를 기반으로 해 간편하게 사용이 가능해요. Post CSS의 장점 Post CSS의 장점으로는 무엇이 있을까요? 먼저.. 2021. 9. 10. 이전 1 다음
