css속성 변수로 주기 feat 템플릿 리터럴

이와같이 반응형 창에서 각 이미지의 간격 픽셀을 다르게 주고싶었다.

 

보면 좌우 좌우를 반복하면서 약간의 지그지그 형태로 배치해 주었는데, 핸드폰 화면에서 더 넓게 배치하면

 

이미지가 겹쳐 보기힘들어지고, 큰화면에서 좌우 간격을 좁게 배치하자니 좀 보기가 좋지 않았다.

 

그래서 화면별로 지그재그 간격을 다르게 해주기 위해 사용한게 변수로 css설정을 해주자! 였다.

 

   const [reactive, setReactive] = useState('40px')
   const [reactive2, setReactive2] = useState('80px')
   useEffect(() => {
      if (size.width <= 768) {
         console.log('핸드폰화면index2.tsx')
         // setSizeon(true)
         setReactive('12px')
         setReactive2('36px')

      } else if (size.width > 768) {
         // setSizeon(false)
         setReactive('40px')
         setReactive2('80px')
      }
      console.log(size.width)
      console.log(size.height)
   }, [size])

 

이와같이 useState와 useEffect를 사용해 화면 사이즈가 바뀌면 state값을 바꿔주었고

(https://flykimjiwon.tistory.com/120 참고)

이와같이 style jsx에서 템플릿 리터럴로 변수에 따라 위치가 변하게 지정해 주었다.

 

이제  css에서 변수를 더 유용하게 사용할 수 있을거 같다.