Web (10) 썸네일형 리스트형 tailwind 의 layout w/ flex (2/2) note1) className ="flex flex-col md:flex-row" screen size 에 따라 responsive design 이 된 경우임. 즉 window size 에 따라 flex-col 와 flex-row 이 선택적으로 반영된다 Header Main content Sidebar flex-row 이 적용된 경우임 flex-col 이 적용된 경우임 note2) window 크기에 따라 wrap 이 자동적으로 된다. Header 01 02 03 04 05 note3) justify-center div 의 자식 div 인 Sidebar, Main content 가 중앙에 몰리게 된다 Header Sidebar Main content note4) 다양한 content justificati.. tailwind 의 display (inline, inline-block, block, float) note1) display: inline, : 부분적으로 다음줄로 wrap 이 가능하다 display: inline-block : 부분적으로 wrap 이 되지 않고, 통째로 다음 line 으로 wrap 이 된다. display: block : element 전제가 그 line 전체를 차지한다. When controlling the flow of text, using the CSS property display: inline will cause the text inside the element to wrap normally. While using the property display: inline-block will wrap the element to prevent the text inside from e.. tailwind 의 layout w/ grid note1) col-start-2 col-end-3 을 이용하여 multi column 을 span 하게 할 수 있다. 01 02 03 04 note2) grid-flow-col 은 가로 방향으로 우선 grid 가 채워지는 방식임 01 02 03 note3) auto-cols-max content size 에 따라 column with 가 조절이 된다 column 이 많으면 wrop 이 되지 않고 scroll bar가 만들어 지면서 옆으로 붙는다 grid-flow-col : element 를 옆으로 차례로 붙인다 first item 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 note4) grid-rows-4 vertical 방향으로 4 item 을 먼저 채우고 .. tailwind 의 layout w/ Container note1) columns-2 은 vertical 로 우선 채우고 다음 column 으로 넘어간다. Well, let me tell you something, ... Sure, go ahead, laugh... Maybe we can live without... Look. If you think this is... Hear. If you think That is... note2) break-after-column" “ 이 element 를 처리하고 다음 column 으로 가라. Well,className let me tell you something, ... Sure, go ahead, laugh... Maybe we can live without... Look. If you think this is.... tailwind 의 layout w/ flex (1/2) note1) flex class 가 있는 div 안의 child 는 옆으로 layout 이 만들어 진다 note2) ½ 는 가로의 비율을 의미함 (50%”50%) note3) min-h-screen : min height 가 screen size 임, width 는 각각 전체 width 의 20% 80% 로 배정함 Sidebar Main content note4) min-h-screen 이 div 를 full screen 을 차지하게 함 Sidebar Main content note5) space-x-4 : child element 간에 space 를 x 축으로 4 point 를 준다. Sidebar Main content note6) flex-col : position items vertically S.. tailwind 의 layout w/ grid(inc setup) Practice 환경 준비 어래 link의 instruction 과 같이 project 를 setup 한다 (따라하기 쉬움) https://tailwindcss.com/docs/guides/nextjs Install Tailwind CSS with Next.js - Tailwind CSS Setting up Tailwind CSS in a Next.js v10+ project. tailwindcss.com npx create-next-app@latest tailwind-next --typescript --eslint cd my-project global.css 에서 모두 지우고 아래만 추가한다 @tailwind base; @tailwind components; @tailwind utilities; pro.. Useful commands for Apache2, nginx sudo service apache2 restart sudo service apache2 stop apache2 가 running 하는지 확인 ps aux | grep apache2 sudo service nginx restart sudo service nginx stop sudo service nginx start nginx 가 running 하는지 확인 ps aux | grep nginx Domain 연결하는 방법 in netlify 구매한 domain name (hobbycoding.site) 을 netlify.com 을 통해 무료로 hosting 하는 방법. Netlify란? Netlify는 깃허브(Github) 등과 연동된 쉬운 호스팅을 제공하고 (물론 drag and drop 을 이용하여 작성한 web site folder 를 upload 하는 것도 가능함), CDN, Continuous Deployment(지속적 배포), One-Click HTTPS 제공 등 고성능 사이트 / 웹 응용 프로그램을 제작하는데 필요한 쉽고 빠른 다양한 서비스들을 제공한다. Netlify 회원가입 Github, Gitlab, Bitbucket 의 회원계정을 이용하여 회원 가입이 가능한데 본인은 GitHub 계정을 이용하여 가입을 진행하였다. New.. 이전 1 2 다음
