색상을 설정하는 방법
접두사는 배경색을 의미하는 bg ,
글자 색깔을 의미하는 text ,
border 색깔을 의미하는 border 등이 있다.
채도는 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 등 10개 번호로 세분한다.
불투명도는 20이상 100이하 범위의 5의 배수이다.
유채색일 경우
유채색 이름 규칙
접두사-색상명-채도[/불투명도]무채색일 경우
무채색은 채도가 없으므로 채도를 넣지 않는다.
무채색 이름 규칙
접두사-색상명[/불투명도]텍스트를 설정하는 방법
글자 크기 설정하기
글자 크기 이름 규칙
text-크기줄임말크기 줄임말은 다음과 같다.
- small을 의미하는
sm - medium을 의미하는
md - large를 의미하는
lg - extra small을 의미하는
xs - extra large을 의미하는
xl
이런 단어는 디스플레이 장치의 크기를 의미한다.
CSS관점에서 보통 모바일은 sm , 태블릿은 md 크기이다.
TailwindCSS의 글자 크기는 text-base 클래스를 기준으로 한다.
글자 굵기 설정하기
글자 굵기 이름 규칙
font-굵기단어굵기 단어는 다음과 같다.
- thin
- light
- normal
- medium
- bold
- black
기울임꼴 설정하기
기울임꼴 이름 규칙
{italic,non-italic}줄바꿈 문자 설정하기
줄바꿈 이름 규칙
whitespace-줄바꿈단어줄바꿈 단어는 다음과 같다.
- normal
- nowrap
- pre
- pre-line
- pre-wrap
텍스트 정렬하기
정렬 이름 규칙
text-방향방향은 다음과 같다.
- left
- center
- right
- justify
텍스트 표시 줄 수 조절하기
앞에서 @tailwindcss/line-clamp 라는 TailwindCSS의 플러그인을 설치했다.
사용법은 line-clamp-숫자 로 사용한다.
예를 들어 line-clamp-3 은 텍스트가 아무리 길어도 최대 3줄로 출력하고 overflow일 경우 문자열(...)을 붙인다.
텍스트 관련 컴포넌트 구현
Tailwindcss 클래스들을 그대로 사용하면 코드가 복잡해진다.
타이틀을 나타내는 Title 컴포넌트를 만든다고 가정하자.
Title 컴포넌트가 재사용될 때 변경되는 스타일들은 제외하고 고정된 스타일들은 미리 컴포넌트에 하드코딩한다.
type TextProps = DetailedHTMLProps<
HTMLAttributes<HTMLParagraphElement>,
HTMLParagraphElement
> & {
numberOfLines?: number
}
type TitleProps = TextProps & {}
export const Title: FC<TitleProps> = ({
className: _className,
numberOfLines,
...props
}) => {
const className = makeClassname(
'font-bold text-5xl text-center whitespace-pre-line',
_className,
numberOfLines
)
return <p {...props} className={className} />
}
// 컴포넌트 사용
<Title className="text-blue-600">{D.randomTitleText()}</Title>위의 코드에서 Title 컴포넌트를 호출할 때 children에
D.randomTitleText()를 넘겨주었다.
하지만 Title 정의에 보면 children 속성을 매개변수로 받지않았다.
사실 children 속성은...props안에 포함되어 있다.
children 속성은 리액트 컴포넌트의 기본 속성이므로 DetailedHTMLProps 타입을 확장한 TitleProps 타입 안에 이미 선언되어 있다.
또한, 컴포넌트에 children 을 할당할 땐<p>{children}</p>로도 사용되지만<p children={children} />로도 사용될 수 있기에<p {...props} />안에 이미 다 포함이 되어있다.
따라서 PropsWithChildren 타입을 명시하지 않아도 제대로 동작한다.
