CSS 썸네일형 리스트형 [Tailwind CSS] Tailwind 설치 기본 출처 : 'Tailwind CSS Tutorial' The Net Ninja [tailwind css] 1. 설치 'node.js 설치' [tailwind css] 1. 설치 'node.js 설치' tailwindcss가 좋다라는 말은 많고, 사용 용례도 늘어나고는 있는데, 사용하는 경우 어떻게 쓸지는 한글자료를 찾기 어려워서 정리해두는 중입니다. 홈페이지 작성 마무리단계이기는 한데, 이걸�� jaehyunshin.tistory.com 일단은 테스트 템플릿을 만들기.. 1. cmd - cd 'document' 2. mkdir tailwind 3. cd tailwind 4. mkdir testplay 5. cd testplay 6. code . - vs code가 열리는걸 보면 1차 성공 터미널을 열.. 더보기 [Tailwind CSS] Tailwind 설치 1. node.js 설치 기본 출처 : 'Tailwind CSS Tutorial' The Net Ninja tailwindcss가 좋다라는 말은 많고, 사용 용례도 늘어나고는 있는데, 사용하는 경우 어떻게 쓸지는 한글자료를 찾기 어려워서 정리해두는 중입니다. 홈페이지 작성 마무리단계이기는 한데, 이걸로 얼마나 빨리 만들지 보고 싶어서요. 그냥 기획안부터 올려두고 만들걸 후회를 하지만, 그래도... 회사 홈페이지를 작성중에 조금 다른 방법을 써볼까 싶어서 컴퓨터를 밀 각오를 가지고 1. node.js 설치 nodejs.org/ko/ 설치가 되어 있는지 여부확인 cmd 창을 열고, node -v 을 입력하면 node가 설치되어 있는경우 node의 버전을 확인할 수 있다. 아니면 설치 버전 정보가 나타나면 설치 완료 더보기 복붙으로 반응형 웹사이트 만들기 [tailblocks] 웹페이지 구조를 하나하나 만들어서 프로토타입으로 만드는데 걸리는 시간을 한참 줄여줄 수 있는 팁 하나를 소개해드리고자 합니다. 물론 각 항목들에 대한 수정은 있어야 할지 몰라도, 반응형 되고요, 페이지의 구성도 네비게이션바부터 푸터까지 다 잡아서 나타낼 수 있어요. 바로 tailblocks 라는 페이지를 이용하는 건데, 사용방법은 굉장히 간단하면서도, 편리합니다. 지금 보시면서 따라하셔도 금방 웹페이지 하나를 만드실 수 있어요. 사이트는 아래 링크를 통해 접근 가능하십니다. https://mertjf.github.io/tailblocks/ tailblocks — Ready-to-use Tailwind CSS blocks mertjf.github.io tailblock으로 검색하시면 아래 제일 처음 나타나.. 더보기 [CSS Layout] Flex box 3. justify-content 이전에는 wrap에 대해서 살펴보았습니다. 지난번 글 작성 이후 안에 코드를 넣어두었는데, 주석을 지워가면서 확인해보시면 실제로 어떻게 나오는지 확인하시기 쉬우실 것 같아요. [CSS Layout] Flex box 2. wrap [CSS Layout] Flex box 2. wrap [CSS Layout] Flex box 1. 기본 방향_flex-direction [CSS Layout] Flex box 1. 기본 방향_flex-direction w3schools.com 에서 소개하는 바와 같이, Flex box의 가장 큰 강점은 디자인을 float 나 position을 설정.. jaehyunshin.tistory.com 변수 이름은 flex-wrap: 기본값은 nowrap 부모 바깥으로 넘어가지 않게 묶기.. 더보기 [CSS Layout] Flex box 1. 기본 방향_flex-direction 응용 지난번 살펴본 Flex Box의 기본방향 'flex-direction' 을 응용해보면, 어떨까 갑자기 생각이 나서.. 기본적인 홈페이지의 구성을 하나하나 잡아가보면서 진행하면 어떨까 싶어서요. 대강 막 쳤어요. 상단에 네비게이션 바, 가운데 프로모션 이미지, 아래에 메인 내용, 오른쪽에 별도의 섹션을 넣고, 아래에 footer를 달겁니다. 우리가 살펴봤던것처럼, flex의 방향만 가지고도 이렇게 배치를 잡아나갈 수 있습니다. row로 해서 잡아나가도 상관없고, column으로 해서 잡아나가도 상관은 없어요. 우리는 일단 해볼겁니다. navbar promo main aside footer 더 세부적인 내용으로는, 네비게이션 바에 내용들을 채워나간다던가, 메인 영역에 카드(이미지와 텍스트가 삽입되어 있는)를.. 더보기 [CSS Layout] Flex box 1. 기본 방향_flex-direction w3schools.com 에서 소개하는 바와 같이, Flex box의 가장 큰 강점은 디자인을 float 나 position을 설정하지 않고도 유연성있는 반응형 레이아웃 구성을 할 수 있도록 해준다는게 있어요. 모던 웹브라우져에서는 거의 다 지원되는데, I.E 10에서는 지원이 잘 안되는 경우가 있다는 Naver D2 2019년 기록이 있네요. 모바일웹에서는 문제없다고 하고, 다른것들에 비해 배우기도 쉬워서, 회사에서 퍼블리싱작업할 때 이걸 사용하기도 했습니다. 여러 사이트에서도 찾아서 예시를 볼 수 있으니 참조해보시면 좋겠습니다. 1. 편한 에디터를 열어서 index.html 을 만들어줍니다. 1 2 3 A Flexible Layout must have a parent element with the d.. 더보기 이전 1 다음
