css
자주 사용하는 tailwind css class cheat sheet
냠냠맨
2023. 4. 24. 15:14
제가 자주 사용하는 속성들을 간단히 정리합니다.
| Animation |
| transition |
all |
transition 효과 |
| duration |
100 , 200 , 300 |
전환 기간 |
| delay |
100 150 |
전환 지연 |
| rotate |
0~6 |
요소 회전 |
| ease-in-out |
ease-in-out |
애니메이션 처리 |
| skew |
skew-(x or y)-1 |
요소 기울이기 |
| 요소 가운데 정렬 |
| flex |
display:flex |
| justifycenter |
justifycontent-center |
| itemscenter |
alignitem-center |
| 자주 사용하는 디자인 속성 |
| rounded |
md, lg , xl ,2xl etc |
border radius |
| border |
border-(n*2) |
border |
| border |
t,r,b,l |
top, left, bottom, right |
| outline |
|
|
| overflow-hidden |
요소가 너무 크면 콘텐츠를 자름 |
overflow:hidden |
| overflow-scroll |
스크롤이 필요한 경우에만 스크롤 표시 |
overflow:scroll |
| overflow-x-auto |
필요시 가로스크롤 허용 |
|
| flex 방향 |
flex-row , flex-col |
방향을 설정해줌 |
| 요소 안보이게 가려주기 |
| hidden |
아예 렌더트리 바깥으로 빠짐 |
display: none |
| invisible/visible |
요소는 안보이지만 자리는 차지함 |
|
| 마진 패딩 정리 |
| p |
p-1, p-2 |
패딩 |
| m |
m-1, m-2 |
마진 |
| t,r,l,b |
top, left, right, bottm |
한쪽면만 적용하고자할 때 |
| x , y |
x축 / y축 |
x축 혹은 y축만 적용하고자할때 |
| 그라디언트 주기 |
| bg-gradient-to-(방향t,r,l,b) from (색상) to (색상) |
bg-gradient-to-r-from-indigo-600 to-pink-500 |
그라디언트를 배경에 주는 방법 |
| text 관련 속성 |
| text-inherit |
color를 상속받겠다는 뜻 |
color:inherit |
| text-slate |
50, 100, 200 |
흰글씨 |
| text-gray |
100,200 |
검정글씨 |
| text-center |
|
text-align:center |
| underline |
|
밑줄긋기 |
| decoration |
pink-500(색상) |
밑줄색깔지정 |
| text-ellipsis |
|
text-overflow:ellipsis |
| text 크기조정 |
text-xs, sm, base, lg ,xl, 2xl ~ |
텍스트 크기조정 |
| font 굵기 조정 |
font-medium, semibold, bold etc |
굵기를 조절함 |
| opacity |
(n*5) |
투명도 조절 |
| blur |
sm,md,lg,xl |
블러 조절 |
