Web/CSS (6) 썸네일형 리스트형 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.. 이전 1 다음
