💻 들어가며
원티드 프리온보딩이 끝나고 이력서를 넣으면서
이전에 만들었던 프로젝트나 개인적으로 할 프로젝트를 담을
포트폴리오가 필요하다고 생각해서 만들기로 했습니다.
아무래도 노션이나 ppt같은 프로그램으로 작성하는 것보다는
직접 만들어보는게 흥미도 가고 애정을 가지고
더 열심히 만들 수 있을 것 같아 직접 만들기로 했습니다.
오늘은 포스팅 내용은 포트폴리오의 레이아웃을
tailwind로 어떻게 구현했는지에 대해 작성해 봤습니다.
⚒️ 기능 구현
1. 페이지 레이아웃
📌 핵심 코드
const Nav = () => {
return (
<header className="text-gray-600 body-font">
<div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<Link
href={'/'}
className="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0"
>
<span className="ml-3 text-xl">FE 개발자 신상오</span>
</Link>
<nav className="md:ml-auto flex flex-wrap items-center text-base justify-center">
<Link href={'/'} className="mr-5 hover:text-gray-900">
Home
</Link>
<Link href={'project'} className="mr-5 hover:text-gray-900">
Project
</Link>
<a className="mr-5 hover:text-gray-900">Contact</a>
</nav>
</div>
</header>
);
};Tailblock 사이트를 참고해서 기본적인 뼈대를 잡은 다음에
각 요소의 위치와 색상 같은 디테일한 요소를 수정해서 완성했습니다.
<a> 태그로 구현되어있는 코드를 페이지 이동시 리로딩을 막기 위해
next/link의 <Link> 태그로 변경했습니다.
🎯TODO
1. tailwind 다크모드 구현
이번 프로젝트는 Tailblocks 사이트를 참고해서 레이아웃을 잡았습니다.
tailwind가 코드가 지저분해지고 키워드를 공식 사이트에서 찾아서 사용해야 한다는
단점이 있었지만, 참고할만한 자료가 많았고 수정이 쉬워 빠르게 레이아웃을 잡을 수 있었습니다.
원래는 tailwind의 키워드가 안 익어서 사용하지 않으려고 했었는데
손에 익으니까 styled-components보다 간단한 ui는 쉽게 구현할 수 있는 것 같아
개인적으로 토이 프로젝트 할 때는 종종 사용해봐야겠다 생각했습니다.
2. <Link>와 <a> 태그 차이점 학습
단순하게 리로딩이 일어나냐 안 일어나냐의 차이로만 이해를 하고 있는데
next/link에서 Link가 어떤 식으로 구현되어있는지 궁금해서 차이를 공부해보기로 했습니다.
📚 참고자료 / 출처
1. tailblocks - tailwind css 레이아웃 레퍼런스
Tailblocks — Ready-to-use Tailwind CSS blocks
tailblocks.cc