StyledComponent&Parallax

sanghun Lee·2020년 9월 6일

CSS

Today I Learned

목록 보기

44/66

2차 프로젝트를 진행하고 있습니다

진행중에 새로이 알게된 css를 연습장 식으로 정리해보려 하니 .. css에 대해서 잘 아시는 분들은 재바르게 뒤로가기를 누르시면 좋습니다 :) ..

StyledComponent와 Parallax(시차) 기능 관련하여 여러가지 정리해보려 합니다.

StyledComponent

적용한 StyledComponent

StyledComponent를 사용하면 style이 적용된 component를 생성할 수 있습니다!. 그중에서 재미지게 봤던 몇가지를 적어놓고 설명하며 자습의 시간을 가져보겠습니다.

일단 StyledComponent는 scss 와 조금 결이 다르게 common.scss -> ThemeProvider.js
reset.scss-> GlobalStyle.js로 사용하고 있습니다.

작성방법은 다양하나 저는 theme이라는 큰 변수를 하나로 두고 그 안에 많은 것들을 넣으려 했습니다

const theme = {
  libre: "Libre Baskerville",
    footerHover: css`
    &:link,
    &:visited,
    &:active {
      color: black;
    },
    &:hover {
      transition: ease 250ms color;
      color: #999999;
    }
  `,
    setSize: (width, height = null) => css`
    width: ${width};
    height: ${height};
  `,
  }

font명이나 자주사용하는 setting기능들을 넣어 간편하게 사용하고자 했으며 아래와 같은 방식으로 사용하면 됩니다.

    ${(props) => props.theme.setSize("100%", "30vw")}

실제 카드를 두가지 가지고 있는 component에서 사용한 방법입니다
div태그를 만들면서 스타일이 미리정해져있는 것을 사용할 수 있습니다.

const ImageWrapper = styled.div`
  ${(props) => props.theme.setFlex("center", "center")}
  margin-bottom: 2%;
  img {
    margin: 2%;
  }
`;

Link tag(A tag)

React에서는 a tag가 아닌 Link태그를 사용합니다.
보통 a태그를 작성하면 방문한 기록이 있으면 보라색이 되고 밑줄이 그어져 있으며 그것을 제거하고 필요한 css를 적용하려다 알게된 몇가지 상식입니다.

왜 이제서야 알았을까 싶습니다 😹

- a:link : 방문 전 링크 상태이다.
- a:visited : 방문 후 링크 상태이다.
- a:hover : 마우스 오버 했을 때 링크 상태이다.
- a:active : 클릭 했을 때 링크 상태이다.

Prallax

사실 처음 기능을 구현하려했을 때는 scroll에 따른 transparent한 박스의 위치를 일일히 움직여 줘야할거라고 생각했습니다.(개고생의 지름길)

그런데 적용하다보니 .. 일단 렉은둘째치고 효율이 너무 없는 길이라 youtube를 찾아봤습니다

아래의 링크를 통해 .. css를 잘이용하면 js를 그렇게 많이 써도 되지않는 다는 것을 깨닫게 되었습니다 😅

 https://www.youtube.com/watch?v=JttTcnidSdQ

일단 그전에 하려고 했던 방식에 대해 조금 더 설명하자면 scroll에 따라 이벤트를 발생시켜야하므로 UseEffect(()=>{},[scrollY])를 넣어놓고 특정구간내에서 이벤트를 발생시켜 어느정도 숫자를 가공해서 그 값을 transform에 y값에 props로 넘겨 이벤트를 발생시키려했습니다.