빠르게 성장하는 개발자

navbar (navigation bar)을 만들면서, 약간의 난관에 봉착했다.내가 원하는 네비게이션 바의 조건 (은근 간단하지만 구현하는데 하루종일 걸렸다.)💡1. 화면 크기가 줄어들면 hamburger icon이 나오고, menu들은 세로형으로 나온다. 2. menu를 누르면 다시 햄버거 아이콘으로 돌아간다. 3. 스크롤을 내리면 네비게이션 바가 사라진다. 4. 살짝만 스크롤을 올리면 네비게이션바가 상단에 다시 나온다.tailwind는 mobile-first 를 지향해서 min-width만 제공하고 max-width는 따로 제공하지 않는다.즉, md:w-2 같은 코드는 클래스에 바로 넣으면 돼서 편하지만, 나처럼 큰화면에서 반대로 작아질 때 media query를 default로 제공하지 않는다. m..

사이에 아래 코드를 추가해 준다. 3. body 안에 tocbot 위치시키기Ctrl + F를 이용해서 태그를 찾고. 바로 아랫부분에 toc 을 추가한다// 바로 하단에 추가 4. JavaScript 수정하기 태그가 끝나기 전 바로 윗부분 javascript 부분에 해당코드를 추가한다.5. CSS 수정하기/*tocbot*/ .toc-absolute { position: absolute; margin-top:165px; } .toc-fixed { position: fixed; top: 165px; } .toc { right: calc((100% - 850px) / 2 - 300px); width: 250px; padding: 10px; box-sizing: border-box; } .toc-list { ma..

import InputStyle from './Input.module.css'; function Input({ placeholder, helper, InputType }: InputProps): JSX.Element { let helpermessage = helper ? helper : ''; return ( {helpermessage} ); } export default Input; .Div { @apply w-[21.875rem] flex flex-col gap-1; } .InputBox { @apply w-full p-4 /* shadow */ appearance-none border border-main-30 rounded-lg text-body focus:border-none focus:outl..

어제 UX/UI 특강을 들으면서 처음으로 테일윈드(Tailwind CSS, 이하 테일윈드) 에 대해서 처음 들었다. 부트스트랩의 만족도는 떨어지고, 사용자도 줄어드는 반면 테일윈드 사용자는 꾸준히 증가하고 있고 만족도도 크다는 것!! (근데 왜 싸피에서는 부트스트랩을….알려줘…? 어차피 하루 알려줬지만.. 트렌드에 맞게 소개라도 해주었으면.) Anyway, 트렌드를 알게 된 이상 가만히 있을 수 없다.테일윈드 홈페이지를 참고해서 공식문서를 보면서 빠르게 정체를(?) 파악해보기 시작했다. 1. Utility-First Fundamentals전통적으로 class를 만들고 → class를 한땀한땀 만들었다면 → 테일윈드는 인라인 스타일로 이미 정해져있는 style을 ‘적용’ 만하면 되는 것이다.⇒ 공식문서를 ..