Skip to content

Qvil Blog

Github

[CSS] CSS로 대문자 소문자 변환, 첫글자만 대문자 변환(Feat. React.js예제)

— css, uppercase, lowercase, capitalize, react.js — 1 min read

CSS text-transform 속성을 사용하면 된다.(React는 textTransform)

  • 대문자 변환 : uppercase
  • 소문자 변환 : lowercase
  • 첫글자만 대문자 변환 : capitalize

예제

CSS

1p.uppercase {
2  text-transform: uppercase;
3}
4
5p.lowercase {
6  text-transform: lowercase;
7}
8
9p.capitalize {
10  text-transform: capitalize;
11}

React.js

1var style = {
2    textTransform: "capitalize"
3}
4<p style={style}></p>
1<p style={{ textTransform: "capitalize" }}></p>

이 블로그 테마에서 Liquid Template 때문에 { 두개를 연속으로 쓰면 Liquid 문법으로 인식해서 적용이 안된다. 그래서 { {로 문법을 적용함.

참고

https://www.w3schools.com/cssref/pr_text_text-transform.asp