[리액트] 고정형 하단 네비게이션 스타일드 컴포넌트

영리치 0 2,510 2021.07.20 23:04

하단 푸터 컨테이너

const Container = styled.div`
  display: flex;
  position: fixed;
  align-items: center;
  justify-content: space-evenly;
  bottom: 0;
  height: 57px;
  background-color: ${(props) => props.theme.background.PRIMARY};
  border-top: 1px solid ${(props) => props.theme.color.GRAY1};
  width: 100%;
  max-width: 420px;
  @media screen and (max-width: 1100px) {
    max-width: inherit;
  }
`;

메인 컨테이너

const CustomContainer = styled(Container)`
  margin-top: 80px;
  height: calc(100vh - 137px);
  background-color: ${(props) => props.theme.color.WHITE};
  padding: 0px;
`;

맨 바깥의 컨테이의 height를 화면 크기 만큼 하고

맨 하단에 네비게이션을 박는 형태

Comments

[인터뷰] 국내 게임 대기업 PD님 인터뷰 (업계 최고의 PD 양성자)

100억 이상 들어간 게임은 성공 확률이 5% 정도이다.일반적인 인디 게임을 포함해서 게임 제작의 성공 확률은 1%도 안될 것 같다게임은 정말 성공 확률이 굉장히 낮은 비즈니스이다.대신, 성공하면 크게 먹는다누구나 …

영리치 | 02.24