1. 버튼 만들기(transition + hover)

 

//<App.js>
//최종 코드

export default function App(){
	return(
    	<>
        <button className={'w-32 h-10 rounded-xl bg-blue-500 text-white font-bold mt-10 transition' +
        ' durantion - 100 hover:bg-red-500 hover:scale -110 mx-5'}>열전환</button>
        </>
    )
}

<button className={'w-32 h-10 bg-blue-500'}>열전환</button>

: w넓이 32, h높이 10, 색깔 bg-blue-500, text에 '열전환'이라는 문구 표시

w-32 h-10 bg-blue-500

 

<button className={'w-32 h-10 bg-blue-500 rounded-xl'}>열전환</button>

rounded: 테두리 둥글게 (-sm: 조금만 ,-xl: 많이, -mx: xl 과 sm의 사이, -xl2: xl보다 더 둥글게, -xl3: xl2보다 더 둥글게)

rounded-xl

font

text-색상: text 컬러 바꾸기

font-bold : 폰트 두껍게(sans: 폰트 종류, serif: 폰트 종류, mono: 폰트 종류/ 굵기(thin: 얇게, extralight: 매우 얇게, light: 얇게, normal: 보통, medium: 보통 -> normal과 크게 다르지 않음, semibold: 조금 굵게, bold: 굵게, extrabold: 매우 굵게, black: 최대로 굵게))

<button className={'w-32 h-10 bg-blue-500 rounded-xl text-white font-bold'}>열전환</button>

text-white font-bold

<button className={'w-32 h-10 bg-blue-500 rounded-xl text-white font-bold mt-10'}

mt-10: margin-top에 10을 준다.(m-margin, t-top)

mt-10

transition

:애니메이션을 추가시킬 수 있음.

<button className={'w-32 h-10 bg-blue-500 rounded-xl text-white font-bold mt-10 transition' +

' '}>열전환</button>

hover

: 마우스 커서를 올려놓았을 때 animation

duration : 딜레이 시간(1000까지)

<button className={'w-32 h-10 bg-blue-500 rounded-xl text-white font-bold mt-10 transition' +

' duration-1 hover:bg-red-500'}>열전환</button>

** '' + '' 할때 앞 '' 뒤 '' 둘 중 하나는 띄어쓰기 해야함!!  ''+' '

duration-1

<button className={'w-32 h-10 bg-blue-500 rounded-xl text-white font-bold mt-10 transition' +

' duration-1000 hover:bg-red-500'}>열전환</button>

 

duration-1000

 

<button className={'w-32 h-10 rounded-xl bg-blue-500 text-white font-bold mt-10 transition' +

' duration-100 hover:bg-red-500 hover:scale-110 '}>열전환</button>