[리액트 라이브러리 키트] Tailwind CSS 핵심 정리

Об этом предложении

타이포그래피 폰트 사이즈 text-xs , text-sm , text-base , text-lg , text-xl , text-2xl ~ text-9xl 로 텍스트 크기 설정 XS~9XL로 단계별 사이즈가 분류되어 있으며, 실제 픽셀 값은 공식 문서에서 확인 가능 동적 값 지정: text-[13px] 처럼 대괄호 안에 원하는 값을 직접 입력 font size - Typography 폰트 컬러 text-red-500 , text-blue-300 등 색상 이름 + 명도(50~950) 로 텍스트 색상 설정 명도 500이 원색에 가장 가까우며, 숫자가 높을수록 진한 색상 동적 값 지정: text-[rgb(100,30,200)] 처럼 직접 색상값 명시 가능 color - Typography 폰트 웨이트 font-thin (100) ~ font-black (900)으로 텍스트 두께 설정 font-bold , font-extrabold 등 직관적인 이름으로 사용 font weight - Typography import "./App.css"; function App() { return ( <div className="App"> {/* 타이포그래피 */} <div className="text-xs text-red-700">text-xs</div> <div className="text-sm">text-sm</div> <div className="text-base font-bold">text-base</div> <div className="text-lg font-extrabold">text-lg</div> <div className="text-xl font-black">text-xl</div> <div className="text-2xl">text-2xl</div> <div className="text-[13px]">text-13px</div> </div> ); } export default App; 배경 색상 bg-amber-500 , bg-blue-400 등 bg- 접두사 + 색상 이름 + 명도로 설정 import "./App.css"; function App() { return ( <div className="App"> {/* 백그라운드 컬러 */} <div className="bg-amber-500">bg-amber-500</div> </div> ); } export default App; background-color - Backgrounds 사이즈 Width & Height w-20 , h-20 등 숫자 × 기본 간격(spacing = 4px)으로 실제 크기 계산 (w-20 = 80px) 대부분의 UI 디자인이 4px 단위를 기준으로 하기 때문에 이 방식을 채택 w-[80px] 와 같은 방식으로 직접 픽셀 지정 가능, w-full 로 부모 100% 너비 설정 가능 min-w- , max-w- 접두사로 최소/최대 너비도 설정 가능 import "./App.css"; function App() { return ( <div className="App"> {/* 사이즈 */} <div className="h-full w-20 bg-blue-500">w-20 h-full box</div> </div> ); } export default App; width - Sizing height - Sizing 여백 Padding p-5 (전방향, 5×4=20px), pt-5 (상), pr-5 (우), pb-5 (하), pl-5 (좌) px-10 (좌우), py-10 (상하)로 축 기준 설정 가능 Margin Padding과 동일한 방식으로 m- , mt- , mr- , mb- , ml- , mx- , my- 사용 import "./App.css"; function App() { return ( <div className="App"> {/* 여백 */} <div className="m-2 h-20 w-20 bg-green-500 px-5 py-5"> <div className="h-full w-full bg-red-500"></div> </div> </div> ); } export default App; padding- Spacing margin - Spacing 인용자료 출처 한입 리액트 실전 라이브러리 키트 - Zustand, Tanstack Query, Tailwind CSS

Детали предложения

Провайдер

velog

Источник

velog-rss

Балл

54.39

Уверенность

49%