디자인 썸네일형 리스트형 [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 .. 더보기 [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.. 더보기 [CSS] flex-direction 속성을 게임으로 배우는 방법 안녕하세요 저번 시간에 이어서 Flexbox Froggy를 진행해보겠습니다. 8단계부터는 flex-derection 속성을 이용한 문제입니다. 그럼 시작해 볼까요? flex-direction은 저도 처음 접하는 스타일 속성인데 이것은 요소들의 정렬 방향을 정해준다 합니다. 8단계를 먼저 살펴볼까요? 연꽃이 오른쪽에 있어서 오른쪽으로 방향을 정해주면 될 것 같네요! 지금 개구리들이 왼쪽으로 정렬되어 있기 때문에 오른쪽으로 정렬 방향을 바꾸어 주면 될 것 같습니다. 이때 사용하는 것이 flex-direction:row-reverse; 개구리들이 쏙 들어가네요 이제 9단계입니다. 9단계는 아래로 정렬해주면 되겠네요. 위에서 아래로 정렬해주는 flex-direction:column; 을 사용해주고 클리어했습니다.. 더보기 [CSS] align-items 속성을 게임으로 배워보자 전 포스팅에 이어서 Flexbox Froggy 게임을 진행해보도록 하겠습니다. jusify-content 속성은 가로선(좌우)을 기준으로 정렬했다면 align-items 속성은 세로선(상하)을 기준으로 정렬해주는 스타일인 것 같습니다. 5단계는 개구리들을 바닥쪽으로 정렬해 주어야겠네요. align-items:flex-end; 를 써줍니다. 연꽃이 가운데에 있네요. 가운데로 슝 align-items:center를 적용하였지만 세로상의 가운데로만 이동하였습니다. 가로상으로도 가운데로 이동하려면 justify-content의 힘이 필요할 것 같네요. justify-content:center를 적어주니 연꽃에 도착합니다. 이젠 들어가야될 코드가 바로 떠오르지 않나요? 게임을 하니까 금방 외워지네요! 아래로 정렬.. 더보기 [CSS] justify-content 속성을 게임으로 배우기 안녕하세요 유튜브를 CSS로 공부하다 재밌는 사이트를 알게되었습니다. CSS design 스타일중 Flexbox 속성을 게임으로 공부할 수 있는 사이트인데요. 이것은 바로 FLEXBOX FROGGY라는 사이트입니다. 오늘은 이 게임의 문제를 풀면서 FLEXBOX 속성과 친해져보겠습니다. 먼저 사이트에 접속해줍니다. Flexbox Froggy - CSS flexbox 속성 배우기 게임 Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 하는 법은 간단합니다. 개구리를 일종의 스타일 박스라고 생각하고 개구리를 연꽃까지 옮기면 됩니다. 하지만 이때 개구리를 FLEXBOX 스타일을 사용해서 이동시켜야 합니다. 1단계입니다. 개구리를 오른쪽끝으로 이.. 더보기 이전 1 다음
