[재활용 프로젝트][리액트] 메인 화면 재구상하기

목차

 

저번 화면이 너무 구린 것 같아서 메인화면을 다시 다 갈아 엎었따..

기존거에 디자인 참고해서 다시 한번 수정해 보았다.

 

변경 전 모습

먼가 투박해 보인다 ㅎㅎ..

변경 후 모습

더 나아보이는 모습 (답답한 footer제거 했다)

 

컴포넌트들의 배치를 한 코드

import styles from './HomeContainer.module.scss';
import MainMapBackGround from './MainMapBackground';
import MainLogo from './MainLogo';
import Content from './Content';

function HomeContainer() {
  return (
    <div className={styles['home-container']}>
      <div className={styles['main-area']}>
        <img
          className={styles['background-logo']}
          src="/img/sejongwhite.png"
          alt="logo"
        />
        <MainMapBackGround />
        <div className={styles['transparent-area']} />
        <div className={styles['content-wrap']}>
          <MainLogo />
          <Content />
        </div>
      </div>
    </div>
  );
}

export default HomeContainer;

 

 

기존 코드에 맵 영역을 전체로 바꾸어주고 투명 영역을 만들어 주어 border을 잘라주었다.

.transparent-area {
  position: absolute;
  right: 0;
  z-index: 5;
  background: #b91a4d;
  width: 40vw;
  height: 100vh;
  opacity: 0.8;
  //투명도 지정 css
  clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%);
  //영역의 border을 잘라주는 css
}

 

참고

https://be-senior-developer.tistory.com/92

[재활용프로젝트][리액트] main화면 구성하기