[poompoom] 개발 순서 중간에 느낀 점

피그마 통해 디자인 기획

->

그에 따라 바로 via.placeholder 사용해서 이미지로 견적 짜기

 

 

거의 무적인 레이아웃 설정

width: 80%;

margin: 0 auto;

border: 3px solid #ccc;

background: #ccc;

 

  return (
    <Container>
      <ProfileHeader>
        <LogoBox>
          <span>로고</span> {/** 추후에 컴포넌트 사용 */}
        </LogoBox>
        <MenuBox>
          <span>메뉴바</span> {/** 추후에 컴포넌트 사용 */}
        </MenuBox>
      </ProfileHeader>
    </Container>
  );
 
const Container = styled.div`
  width: 80%;
  margin: 0 auto;
`;
const ProfileHeader = styled.div`
  background-color: #e6e6e6;
  border: 3px solid #ccc;
  display: flex;
  justify-content: space-between;
`;
const LogoBox = styled.div`
  width: 15%;
`;
const MenuBox = styled.div`
  width: 15%;
`;

 

 

App.js에서 시작할 때, <div id="root"></div> 바로 밑에 있는

<div>태그에

text-align: center하고 시작하기

그 외에

width: 100%;

height: 100vh;

등등