[Next.js] 쿠팡 사이트 디자인 따라해보기 2

저번 시간에 이어서 쿠팡 사이트 디자인을 따라해보겠습니다!

 

쿠팡 사이트의 툴 바는 좌측에 2개의 링크바, 우측에 3개의 링크바가 정렬 되어 있는데

 

저번에 구현한 사이트에선 이것을 구현하지 못했습니다.

 

일단 이것먼저 보완해보겠습니다. 

 

우측 3개의 링크바를 먼저 태그로 감싸줘야할 것 같습니다.

 

<div className='Rightbar'>

        <Link href = "/list">로그인</Link>

        <Link href = "/list">회원가입</Link>

        <Link href = "/list">고객센터</Link>

        </div>

Rightbar라는 이름의 태그로 감싸줍니다.

 

그 다음,

 

.Rightbar{

  display:flex;

  justify-content: space-between;

}

display를 flex한 컨테이너로 바꿔주고 space-between 속성을 주게 되면 공간을

 

확보하기 위해 우측으로 밀려날 것 같습니다!

 

성공적으로 정렬 된 모습입니다.

 

좌측 2개의 링크바도 손봐줍시다!

 

<div className='Leftbar'>

        <Link href = "/">즐겨찾기</Link>

        <Link href = "/list">입점신청▼ </Link>

        </div>

먼저 Leftbar 태그로 감싸주고

 

.Leftbar{

display:flex;

justify-content: flex-end;

}

flex컨테이너로 바꿔주고, flex-end 속성을 주면 왼쪽부터 정렬될 것 같습니다.

 

성공적이네요!

 

다음 해볼 것은 쿠팡로고 옆에 있는 검색창 만들기 입니다.

 

먼저 파란색 인풋박스를 만들어 줘야 겠네요!

<input className='Input'></input>

인풋 박스를 하나 만들어 주고 

.Input{

  width:500px;

  height:30px;

  margin-top: 25px;

}

스타일을 줘봅니다.

 

가로 500px, 세로 30px, 윗 공간 여백 25px

 

그럴듯 하죠?

 

테두리와 버튼들을 추가해야할 필요가 있어보입니다.

 

 outline:2px solid rgb(32, 113, 234);

테두리는 쉽게 outline 속성으로 추가해 줍니다.

 

변화가 눈에 바로 보이니까 재밌네요!

 

input 태그 안에 텍스트를 벨류값으로 줘서 문구도 추가해줍니다.

 

최종 수정본

 

 

검색창 안에 검색 버튼을 넣는 단계부터 다음에 해보겠습니다!