[Bootstrap4] 05. 부트스트랩4 텍스트 색상

Posted by 낭만사업가 정대표 블로그 on 2022-02-28 05:31:17

텍스트 색상 (Text Colors)

부트스트랩4에는 텍스트 색상을 지정하는 데 사용할 수 있는 몇 가지 클래스가 있습니다.

텍스트 색상에는 다음과 같은 클래스가 있습니다: 

.text-muted.text-primary.text-success.text-info.text-warning.text-danger.text-secondary.text-white.text-dark.text-body  (default body color/often black) and  .text-light

Example

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary text.

Dark grey text.

Body text.

Light grey text.

Try it Yourself »

상황에 맞는 텍스트 클래스는 링크에서도 사용할 수 있습니다. 그러면 더 어두운 마우스호버 색상이 추가됩니다.

.text-black-50   또는   .text-white-50 클래스를 사용하여 흑백 텍스트에 50% 불투명도를 추가할 수도 있습니다.

Example

Black text with 50% opacity on white background

White text with 50% opacity on black background

Try it Yourself »

배경색 (Background Colors)

배경색에 대한 클래스는 다음과 같습니다.: 
.bg-primary.bg-success.bg-info.bg-warning.bg-danger.bg-secondary.bg-dark  and  .bg-light .

배경색은 텍스트 색상을 설정하지 않으므로 경우에 따라 .text-* 클래스와 함께 사용할 수 있습니다.

Example

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary background color.

Dark grey background color.

Light grey background color.

Try it Yourself »

Total 106
번호 제목 글쓴이 조회 날짜
106 67 06-20
105 103 06-21
104 38 06-20
103 119 02-25
102 539 02-27
101 13 06-23
100 122 02-25
99 113 02-27
98 11 06-24
97 75 02-25
96 116 02-27
95 21 06-27
94 57 04-11
93 93 02-28
92 64 04-12
RSS

오픈런하우스

1인가구를 위한 원룸형 아파트 쉐어하우스, 1인기업(프리랜서)을 위한 홈오피스형 공유주택

GO!