- 1204 TailWindCss2023년 12월 04일 18시 14분 07초에 업로드 된 글입니다.작성자: 삶은고구마
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.
tailwindcss.com
Tailwind CSS
Utility-First 컨셉을 가진 CSS 프레임워크
Utility-First란
미리 세팅된 유틸리티 클래스를 활용하여 HTML코드 내에서 CSS를 적용시키는 것을 뜻 한다.
CSS의 각 속성들을 직관적인 className으로 표현하여 효율적으로 사용할 수 있게 된다.
일반적으로 필요한 대부분의 CSS속성을 className으로 제공한다.
https://zeriong.tistory.com/36
[ Tailwind CSS ] 직관적인 CSS 프레임워크
Tailwind CSS Utility First를 지향하는 CSS프레임워크다. Utility First란 미리 세팅된 유틸리티 클래스를 활용하여 HTML코드 내에서 CSS를 적용시키는 것을 뜻 한다. CSS의 각 속성들을 직관적인 className으로
zeriong.tistory.com
bootstrap
foundation
=>tailwind만큼 커스텀마이징이 상세하지않음
vsc extension Tailwind CSS IntelliSense
목차
1.hello_tailwindcss
2.font
3.text
4.alignment
5.box_model
6.display
7.position
8.flexbox
9.grid
10.responsive(반응형)
https://tailwindcss.com/docs/installation/play-cdn
Try Tailwind CSS using the Play CDN - Tailwind CSS
Use the Play CDN to try Tailwind right in the browser without any build step.
tailwindcss.com
<script src="https://cdn.tailwindcss.com"></script> <script src="js/tailwindcss.config.js"></script>header란에 script 추가
1.hello_tailwindcss
<!--class값으로 태그를 제어한다.--> <h1 class="text-3xl font-bold underline text-clifford">Helloworld</h1>class에 css속성 값을 넣어서 사용할 수 있음.
text 크기가 3xl이고, bold체 이며, 밑줄이 그어져있고 clifford 컬러 속성을 h1에 부여하게 된다.
속성은 공백(스페이스)기준으로 여러개 부여할 수 있다.
2.font
<h1 class="text-3xl">HelloWorld</h1> <h2 class="text-2xl">HelloWorld</h2> <h3 class="text-xl">HelloWorld</h3> <h4 class="text-lg">HelloWorld</h4> <h5 class="text-base">HelloWorld</h5> <h6 class="text-sm">HelloWorld</h6> <!--class에서 지원하지 않는 클래스설정인 경우 []씌워서 사용--> <p class="text-[20px]">HelloWorld</p> <!--4 = 1rm --> <div class="my-4"> <p class="text-xl font-serif">ABCDEFGHIJKLMN opqrstuvwxyz 0123456789 가나다라마바사</p> <p class="text-xl font-sans">ABCDEFGHIJKLMN opqrstuvwxyz 0123456789 가나다라마바사</p> <p class="text-xl font-mono">ABCDEFGHIJKLMN opqrstuvwxyz 0123456789 가나다라마바사</p> <p class="text-xl font-['궁서']">ABCDEFGHIJKLMN opqrstuvwxyz 0123456789 가나다라마바사</p> <p class="leading-10 text-xl font-['Gaegu']">ABCDEFGHIJKLMN opqrstuvwxyz 0123456789 가나다라마바사</p>class 속성으로 사이즈나 글씨체를 바꿀 수 있음.
단 , tailwind 내에서 제공하는 유효한 속성값을 입력해야 적용이 됨
가령 text-9xl 보다 더 큰 사이즈를 원해 text-20xl로 작성하는경우 text-20xl은 없는 속성이라 적용되지 않음.
혹은 text-[20px] 등, 괄호안에 내가 원하는 값을 입력하면 적용됨(tailwind와 무관한 속성)
글씨체를 변경하고 싶을 땐 tailwind 폰트 / [기본폰트] / [구글폰트] 등등 여러개 적용 가능.
3.text
<div> <!--특정 색조에 있어서 채도 높아짐 /밝기 어두워지는 순으로 50~950 지정--> <p class="text-red-50">HelloWorld</p> <p class="text-red-100">HelloWorld</p> <p class="text-red-200">HelloWorld</p> <p class="text-red-300">HelloWorld</p> <p class="text-red-400">HelloWorld</p> <p class="text-red-500">HelloWorld</p> <p class="text-red-600">HelloWorld</p> <p class="text-red-700">HelloWorld</p> <p class="text-red-800">HelloWorld</p> <p class="text-red-900">HelloWorld</p> <p class="text-red-950">HelloWorld</p> <p class="text-[#ff00ff]">임의의 컬러 지정</p> </div>
결과 tailwind에서 지정한 컬러값도 사용 가능함.
[]안에 내가 원하는 컬러를 직접 지정할 수 있음.
<a href="#" class="hover:line-through text-green-800">인덱스</a>마우스 호버시 취소선이 그어지고 green 800컬러로 변경되는 속성값
4.alignment
<!--1.글자만 가운데 정렬됨--> <div class="bg-slate-400 text-center"> <span class="bg-pink-400">가운데</span> <img src="/sample/image/tower1.PNG" class="w-40" alt=""> </div> <!--2.이미지도 같이 정렬--> <!--flex : justify-content(메인축), align-items(크로스축)--> <div class="bg-slate-400 flex flex-col items-center"> <span class="bg-pink-400">가운데</span> <img src="/sample/image/tower1.PNG" class="w-40" alt=""> </div> <!--block 요소 정렬--> <div class="bg-rose-600 w-40 h-40"></div> <div class="bg-rose-600 w-40 h-40 mx-auto"></div> <div class="bg-rose-600 w-40 h-40 ml-auto""></div>flex 와 속성값들도 지정가능함.
5.box_model
<!-- width height padding border margin --> <!--원본색상에 제일 가까운 수치 600--> <!--w-[100px]--> <!--r+l=x t+b=y p는 4방향--> <div class="bg-green-600 w-80 h-80 py-4 border-4 border-red-500 border-dashed shadow-md hover:shadow-lg hover:shadow-black">Hello</div> <!--div .w-40.h-40.bg-sky-600.m-4--> <div class="w-40 h-40 bg-sky-600 m-4 rounded-full"></div>박스영역을 만들어서 도형깎는놀이도 가능하다.
rounded-full은 css에서의 border-radius 와 동일한 기능이다.
테두리깎아서 둥글게만들기->원형
class속성에 내가 원하는 값을 저렇게 넣으면 되는데.. 문제는 코드가 길어짐.
6.display
<!--inline block inline-block--> <div class="inline-block w-40 h-40 bg-blue-400 p-1">하나</div> <div class="inline-block w-40 h-40 bg-blue-400 p-1">둘</div> <div class="inline-block w-40 h-40 bg-blue-400 p-1">셋</div> <div class="inline-block w-40 h-40 bg-blue-400 p-1">넷</div> <div class="inline-block w-40 h-40 bg-blue-400 p-1">다섯</div> <h2 class="text-2xl">요소 감추기~</h2> <!--영역채 사라짐--> <div class="hidden w-40 h-40 bg-yellow-500">display:none</div> <hr> <!--영역은 두고 사라짐--> <div class="invisible w-40 h-40 bg-yellow-500">visibility:hidden</div> <hr> <!--투명도 조절--> <div class="opacity-100 hover:opacity-20 h-40 bg-yellow-500">opacity:0</div>inline
block
inline-block 속성도 부여할 수 있다.
요소 감추기 속성도 사용할 수 있는데, css와 속성값이 조금 다르니 헷갈릴 수 있음.
css tailwind display:none hidden visibility:hidden invisible opacity:0 opacity-0 7.position
<!--기본적으론 relative 였다가, top-0이면 fixed됨--> <!--최근에 선언된 태그가 위로 올라오기때문에 z-index를 큰 수치로 줘서 최상위로 올리기ㅏ--> <h2 class="text-2xl my-4 sticky top-0 bg-green-400 z-30">sticky</h2> <h2 class="text-2xl my-4">static</h2> <div class="bg-gray-400"> <div class="w-80 h-80 bg-indigo-600"></div> <div class="top-10 w-60 h-60 bg-violet-600"></div> <div class="top-20 w-40 h-40 bg-fuchsia-600"></div> </div> <!--static에서 offset 적용가능--> <h2 class="text-2xl my-4">relative</h2> <div class="bg-gray-400"> <div class="w-80 h-80 bg-indigo-600"></div> <div class="relative top-10 w-60 h-60 bg-violet-600"></div> <div class="relative top-20 w-40 h-40 bg-fuchsia-600"></div> </div> <!--기준이 되는 부모에게 relative --> <h2 class="text-2xl mt-32 my-4">absolute</h2> <div class="bg-gray-400 relative"> <div class="w-80 h-80 bg-indigo-600"></div> <div class="absolute top-10 left-10 w-60 h-60 bg-violet-600"></div> <div class="absolute top-20 left-20 w-40 h-40 bg-fuchsia-600"></div> </div> <h2 class="text-2xl my-4">fixed</h2> <div class="w-20 h-20 bg-rose-200 bottom-10 right-10 fixed"></div>8.flexbox
flexbox 속성도 제공한다.
기존 css에서 사용한 값과 같음.
<!-- class 속성 값에 아래와 같이 순차적으로 작성. flex flex-(row | col) ->flex-direction justify-(start | end | center | between | evenly | around) ->justify-content(메인축) items-(stretch | start | end | center)->align-items(크로스축) flex-(nowrap | wrap) content-(start | end | center | between | evenly | around) ->align-content(크로스축-멀티축)줄이 여러개 --> <h1 class="text-3xl my-4">Flexbox</h1> <!--row, nowrap이 기본값--> <ul class="bg-orange-300 h-[300px] flex flex-wrap justify-center items-center content-center"> <li class="border border-black p-4 bg-[#ff4500] w-20">1</li> <li class="border border-black p-4 bg-[#ff4500] w-20">2</li> <li class="border border-black p-4 bg-[#ff4500] w-20">3</li> <li class="border border-black p-4 bg-[#ff4500] w-20">4</li> <li class="border border-black p-4 bg-[#ff4500] w-20">5</li> <li class="border border-black p-4 bg-[#ff4500] w-20">6</li> <li class="border border-black p-4 bg-[#ff4500] w-20">7</li> <li class="border border-black p-4 bg-[#ff4500] w-20">8</li> <li class="border border-black p-4 bg-[#ff4500] w-20">9</li> <li class="border border-black p-4 bg-[#ff4500] w-20">10</li> </ul>9.grid
grid는 테이블과 비슷한 구조다.
행/렬 구조로 설정이 가능하다.
<!-- 몇 행 몇 열 설정 grid grid-(cols|rows)-n ->grid-cols-n | grid-rows-n grid-flow-col gap-(x|y)-n 간격 --> <h1 class="text-3xl my-4">Grid</h1> <ul class="bg-fuchsia-300 grid grid-cols-3 gap-2"> <!-- <ul class="bg-fuchsia-300 grid grid-rows-3 grid-flow-col gap-2"> --> <li class="bg-orange-300 p-4">1</li> <li class="bg-orange-300 p-4">2</li> <li class="bg-orange-300 p-4">3</li> <li class="bg-orange-300 p-4">4</li> <li class="bg-orange-300 p-4">5</li> <li class="bg-orange-300 p-4">6</li> <li class="bg-orange-300 p-4">7</li> <li class="bg-orange-300 p-4">8</li> <li class="bg-orange-300 p-4">9</li> <li class="bg-orange-300 p-4">10</li> </ul>10.responsive(반응형)
현재 브라우저의 너비를 실시간으로 측정해 내가 원하는 스타일을 적용할 수 있다.
특정 px 범위대로 기본부터 2xl까지 속성값을 제공함
div class 속성값 해석
mx-auto:양옆 마진 auto
기본 slate-400 컬러지만 너비에 따라 div영역의 색상이 달라짐.
sm 즉, 640px 이상부터는 빨간색
md 768px 부터는 노란색
lg 1024px 부터는 초록색으로 변경된다.
반대로 창을 줄여서 너비값이 줄어들때도 다른 색상이 적용된다.
<h1 class="text-3xl my-4">Responsive</h1> <!-- css @media 쿼리 : 기기의 width값에 근거해서 다른 css 적용한다. 아무것도 적지않으면 기본값 하나로만 적용되고, sm하나라도 쓴다면 기본값/sm값으로 구분됨. -기본값: ~640px -sm: 640px ~ -md: 768px~ -lg: 1024px~ -xl: 1280px~ -2xl: 1536px~ --> <!--기본 회색이지만, 640px넘는 순간 red로바꾸기--> <div class="w-10/12 h-96 mx-auto bg-slate-400 sm:bg-red-400 md:bg-yellow-400 lg:bg-green-400"></div>'공부 > front-end' 카테고리의 다른 글
css3 반응형 웹 (0) 2024.07.11 html5 드래그 앤 드롭 기능 (0) 2024.07.11 1201 jQuery (0) 2023.12.01 HTML 5API -1일차 (0) 2023.11.29 1128 Javascript 5일차 (1) 2023.11.28 이전글이 없습니다.댓글