javascript 썸네일형 리스트형 [Next.js] 쿠팡 사이트 디자인 따라해보기 2 저번 시간에 이어서 쿠팡 사이트 디자인을 따라해보겠습니다! 쿠팡 사이트의 툴 바는 좌측에 2개의 링크바, 우측에 3개의 링크바가 정렬 되어 있는데 저번에 구현한 사이트에선 이것을 구현하지 못했습니다. 일단 이것먼저 보완해보겠습니다. 우측 3개의 링크바를 먼저 태그로 감싸줘야할 것 같습니다. 로그인 회원가입 고객센터 Rightbar라는 이름의 태그로 감싸줍니다. 그 다음, .Rightbar{ display:flex; justify-content: space-between; } display를 flex한 컨테이너로 바꿔주고 space-between 속성을 주게 되면 공간을 확보하기 위해 우측으로 밀려날 것 같습니다! 성공적으로 정렬 된 모습입니다. 좌측 2개의 링크바도 손봐줍시다! 즐겨찾기 입점신청▼ 먼저 .. 더보기 [Next.js] React 기능들을 이용해서 디자인하기 오늘은 저번 시간과 마찬가지로 Next.js와 친해지는 시간을 가져보겠습니다. 그러기 위해서는 React기능들을 복습할 필요가 있겠네요. 이번 공부는 코딩애플님의 강좌를 참고하였습니다. Home상세 1 Next.js 입문 React에서와 똑같이 div 태그안에 className을 통해서 css를 디자인할 수 있습니다. 태그는 html에 a href태그와 같은 기능을 합니다. 는 기본페이지로 이동하게 해주고, 는 기본페이지 뒤에 /list를 입력하면 그 페이지로 이동하게 해줍니다. 태그는 글자의 크기를 키워줍니다. 이때 ~ 역순으로 크기가 증가합니다. Next.js에서 css를 건드리려면 React의 app.js와 똑같은 역할을 하는 globals.css로 이동을 해야합니다. 내용을 다 지우고 .front.. 더보기 이전 1 다음
