이제 작업물들을 소개하는 것을 만들어보겠습니다. 하기 전에 Home.module.css안에 내용들을 알려드리도록 하겠습니다. Home.module.css .project_nav { text-align: center; background-color: rgb(29, 128, 159); } .projects { background-color: white; width: 800px; height: 500px; margin: 0 auto; margin-top: 15px; text-align: center; border-radius: 15px; border: 2px solid black; } .info { margin-left: 25px; text-align: left; } .left_tab { float: left..

여러 웹사이트들을 가보면 위에 메뉴들이 여기저기 페이지를 옮겨 다녀도 그대로 계속 있는 것을 보실 수 있습니다. 그 메뉴들을 Header 즉, 공유된 컴포넌트라고 합니다. Next.js에서는 이 Header를 매우 쉽고 간단하게 만들 수 있습니다. index.js를 아래 사진과 같이 바꿔주세요. export default function Home() { return ( Home 페이지입니다. ); } 그리고 pages폴더 안에 about.js 파일을 추가해주세요. about.js도 다음과 같이 바꿔주세요. export default function about() { return ( About 페이지입니다. ); } 이제 새로운 폴더 하나를 만들 겁니다. components라는 폴더를 하나 만들어주세요. ..

❗ 주의 ❗ 기본적으로 HTML, CSS, JavaScript, React에 관해서 알고 있어야 합니다. 오늘은 Next.js를 이용해서 자신만의 포트폴리오 사이트를 만들도록 하겠습니다. 만들었던 프로젝트들을 간단히 소개 및 사이트 이동이 되게 하고, 내가 어떤 기술을 가지고 있는지와 나에 대한 것들을 적는 사이트를 제작할 것입니다. 그럼 일단 프로젝트를 만들어봅시다. 명령 프롬프트로 가서 폴더 하나를 만드세요. mkdir "폴더명" 그런 다음 그 폴더로 가줍시다. cd "폴더명" 그리고 CNA를 이용해서 Next.js 앱을 설치하도록 하겠습니다. npx create-next-app 그러면 What is your project named?라고 물어볼 텐데 이는 프로젝트명입니다. 저희는 프로젝트명을 nex..