[개인 프로젝트] 포트폴리오 회고

포트폴리오

깃허브 : 링크
배포링크 : 링크

💡 새롭게 학습한 부분 1. tailwindCSS

Next.js에서 tailwindCSS 사용 방법

💡 새롭게 학습한 부분 2. Notion API

Notion Developers공식 홈페이지

🚀 모바일 사이즈일 경우 햄버거 메뉴로 만들기

{/* 웹 */}
 const [isMenuClicked, setIsMenuClicked] = useState<boolean>(false)
 
<nav className="md:flex lg:flex sm: hidden"></nav>
...
{/* 모바일 */}
<div className="lg:hidden sm:flex " onClick={handleMenuClick}>
{isMenuClicked ? "닫기 버튼" : "햄버거 버튼"}</div>
{isMenuClicked&& <nav className="lg:hidden  flex  text-base flex-col sm:flex"></nav>}

display : none과 visibility : hidden 의 차이점

1. display:none <-> block
   아예 사라지게 하는것. 보이지도 않고 해당 공간도 존재하지 않게 됨
   
   
2. visibility:hidden <-> visible
   보이지만 않고 해당 공간은 존재. width와 height값을 주었다면 그만큼 공간은 존재하게 됨
   
   
3. display = "" 하면 디폴트 값이 쓰여지게 되는데 이때 span 태그 안에 있으면 inline, div 태그 안에 있으면 block 가 쓰여지게 된다.