CSS 썸네일형 리스트형 [React] Nutriguide Landing Page 코드 리뷰 안녕하세요! 오늘 부터는 완성된 Nutriguide의 페이지 코드를 하루에 하나씩 리뷰해보려고 합니다. 그럼 시작하겠습니다 : ) NutriGuide는 3일치의 식단을 입력받고 사용자에게 부족한 영양소 정보를 추출해서 영양제를 추천해주는 사이트입니다. LandingPage에는 간단히 각 페이지의 정보를 보여줍니다. AI 건강 상담 버튼을 누르면 AI 건강 상담 페이지로, AI 영양제 추천 버튼을 누르면 식단 인풋 페이지로 이동합니다. import React from 'react';import { Link, useNavigate } from 'react-router-dom';import { Button } from 'antd';import myImage from '../img/logo.png'; i.. 더보기 [CSS] Antd CSS Framework 처음 사용해 본 CSSs Framework는 React BootStrap이었는데 이번 프로젝트에서는 Antd라는 Framework를 사용해 볼 예정입니다. Framework를 사용하면 좋은 점은 CSS에 시간과 노력을 투자할 필요가 줄어든다는 점입니다. 그래서 기능에 더 집중할 수 있게 됩니다. 그 중에서도 Antd는 중국에서 만든 FrameWork로 기능이 많고 깔끔한 디자인인게 장점이고 그렇기 때문에 용량 문제가 단점으로 꼽힐 수 있습니다. Ant Design of React - Ant Design Ant Design of React - Ant Design An enterprise-class UI design language and React UI library with a set of high-qu.. 더보기 [React] 리액트로 서버에 데이터 연동하기2 저번 시간에는 express를 이용해서 서버에 데이터를 추가하고 변경하는 것까지 해봤습니다. 이번에는 리액트에서 코드를 짜서 서버에 데이터 요청을 해보겠습니다. (라매개발자님의 강의 영상을 참고하였습니다.) 먼저 create-react-app database를 터미널에 입력해서 작업 폴더를 만들어 줍니다. 그리고 필요없는 css파일들과 logo.svg파일을 지워줍시다. 파일을 지웠으니까 index.js와 app.js의 import문과 내용을 지워줍니다. function App() { return ( Todolist ); } export default App; 임의로 코드를 적고 npm start를 통해서 테스트 해봅시다. 잘 나오네요! 서버에 데이터를 요청하려면 fetch와 axios를 사용해야 합니다... 더보기 [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 .. 더보기 [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를 적어주니 연꽃에 도착합니다. 이젠 들어가야될 코드가 바로 떠오르지 않나요? 게임을 하니까 금방 외워지네요! 아래로 정렬.. 더보기 이전 1 2 다음
