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

안녕하세요

 

제가 Next.js를 좀 다루다 보니 기본적인 css 디자인 능력이 좀 부족하더라고요. 

 

그래서 오늘은 연습으로 쿠팡 사이트와 같은(거의 비슷한) 사이트를 만들어 보겠습니다.

 

쿠팡 사이트

 

차근차근 하나씩 해보겠습니다. 먼저 위쪽을 보시면 작은 회색의 툴바가 있습니다.

 

툴바를 먼저 만들어 봅시다!

 

 <div className='toolbar'>

     

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

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

     

     

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

       

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

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

       

        </div>

툴바 클래스 입니다.

 

링크 태그로 감싸져 있는 메뉴를 5개 만들어 줍니다.

 

그리고 툴바의 배경이 될 박스를 만들어 줍니다.

 

.toolbar{

  background-color: rgba(222, 222, 233, 0.456);

  padding:7px;

  display:flex;

  margin:0 auto;

  justify-content: space-around;

}

 

회색바의 css 코드입니다.

background-color: gray;

padding : 7px; 주변 간격 7px;

display:flex;

margin : 0 auto;  -- 가운데 정렬

justfy-content:space-around;  일정 간격으로 정렬

 

 

Tool Bar

기존 홈페이지의 툴바는 왼쪽에 2개 오른쪽에 3개의 메뉴가 있는데

 

정렬 상의 문제로 아직 똑같이 구현하지 못했습니다.

 

다음 시간에는 이 문제도 해결해 보려고 합니다.

 

다음은 요 카테고리 박스를 만들어 보겠습니다.

 

.categori{

  border: 20px;

  padding :20px;

  background-color: rgb(21, 86, 184);

  width:80px;

  height: 80px;

 

}

먼저 파란색 박스를 만들어 줍니다.

 

<div className='categori'><Link href = "/list">

          <p><h2>☰</h2></p>

          카테고리</Link></div>

그리고 카테고리 이모티콘과 텍스트를 붙여주면 끝!

 

이 때도 Link 태그를 사용했습니다. (페이지 이동은 미구현)

 

비슷한가요? 

 

.categori a{

  text-align: center;

  color:white;

  font-size: 15px;

}

카테고리는 링크 태그이기 때문에 css코드에 a를 붙여서 텍스트만 따로 디자인 해줍니다.

 

그리고 이제 쿠팡 로고를 붙여볼게요.

 

이건 이미지를 그대로 따와서 붙여주기만 하면 될 것 같습니다.

 

<img src = "coupang.png" height = '80'></img>

그러면 이렇게 탑 바를 만들 수 있습니다.

 

.topbar{

  display:inline-flex;

  text-align:center;

}

topbar의 css 코드입니다.

 

다음 시간에 이어서 해보겠습니다!