쿠팡 썸네일형 리스트형 [Next.js] 쿠팡 사이트 디자인 따라해보기 3 지난 번에 했던 것에 이어서 쿠팡 사이트를 따라해 보겠습니다. 지난 번에는 검색 창까지 만들었었는데요. 오늘은 버튼을 만들어 보겠습니다. 먼저 버튼 태그를 만들고 {alert("하이")}}> 버튼을 누르면 "하이"라는 알림창이 뜨게 만들겠습니다. 그리고 오늘은 처음으로 React Icons라는 사이트에서 아이콘을 import해서 사용해 보겠습니다. React Icons (react-icons.github.io) React Icons 🔍 SearchPlease enter at least 3 characters to search... react-icons.github.io 여기서 import할 아이콘을 찾아서 태그를 만들어 주시면 됩니다. import { BiSearchAlt2 } from "react-ic.. 더보기 [Next.js] 쿠팡 사이트 디자인 따라해보기 2 저번 시간에 이어서 쿠팡 사이트 디자인을 따라해보겠습니다! 쿠팡 사이트의 툴 바는 좌측에 2개의 링크바, 우측에 3개의 링크바가 정렬 되어 있는데 저번에 구현한 사이트에선 이것을 구현하지 못했습니다. 일단 이것먼저 보완해보겠습니다. 우측 3개의 링크바를 먼저 태그로 감싸줘야할 것 같습니다. 로그인 회원가입 고객센터 Rightbar라는 이름의 태그로 감싸줍니다. 그 다음, .Rightbar{ display:flex; justify-content: space-between; } display를 flex한 컨테이너로 바꿔주고 space-between 속성을 주게 되면 공간을 확보하기 위해 우측으로 밀려날 것 같습니다! 성공적으로 정렬 된 모습입니다. 좌측 2개의 링크바도 손봐줍시다! 즐겨찾기 입점신청▼ 먼저 .. 더보기 [Next.js] 쿠팡 사이트 디자인 따라해보기 1 안녕하세요 제가 Next.js를 좀 다루다 보니 기본적인 css 디자인 능력이 좀 부족하더라고요. 그래서 오늘은 연습으로 쿠팡 사이트와 같은(거의 비슷한) 사이트를 만들어 보겠습니다. 차근차근 하나씩 해보겠습니다. 먼저 위쪽을 보시면 작은 회색의 툴바가 있습니다. 툴바를 먼저 만들어 봅시다! 즐겨찾기 입점신청▼ 로그인 회원가입 고객센터 툴바 클래스 입니다. 링크 태그로 감싸져 있는 메뉴를 5개 만들어 줍니다. 그리고 툴바의 배경이 될 박스를 만들어 줍니다. .toolbar{ background-color: rgba(222, 222, 233, 0.456); padding:7px; display:flex; margin:0 auto; justify-content: space-around; } 회색바의 css .. 더보기 이전 1 다음
