[HTML/CSS] 대소문자 변환, 첫글자만 대문자로 바꾸기 (text-transform)

 

웹에서 알파벳의 대문자를 소문자로, 소문자를 대문자로 변환하는 방법은 2가지가 있습니다.

1. Javascript를 이용하는 방법
   • [Javascript] 대소문자 변경 (대문자를 소문자로, 소문자를 대문자로)
   • [Javascript] 문자열의 첫 글자만 대문자로 변환하기
2. CSS를 이용하는 방법
   • text-transform

 

 

여기서는 CSS를 이용하여

대소문자를 변환하거나, 첫글자만 대문자로 바꾸는 방법을 소개합니다.

 

text-transform

CSS의 text-transform 속성은

요소의 문자열을 대문자 또는 소문자로 표시하는 방법을 지정합니다.

 

  text-transform 속성 값  

• none
• uppercase : 텍스트를 대문자로 
• lowercase : 텍스트를 소문자로
• capitalize : 각 단어의 첫글자를 대문자로

 

  예제  

<p style='text-transform: none'>hi hELLO</p>
<p style='text-transform: uppercase'>hi hELLO</p>
<p style='text-transform: lowercase'>hi hELLO</p>
<p style='text-transform: capitalize'>hi hELLO</p>

 

text-transform: none;

텍스트를 변경 없이 그대로 출력합니다.

 

text-transform: uppercase;

모든 텍스트를 대문자로 변경합니다.

 

text-transform: lowercase;

모든 텍스트를 소문자로 변경합니다.

 

text-transform: capitalize;

각 단어의 첫글자를 대문자로 변경합니다.

 

 

 

문단의 첫글자는 대문자로, 나머지는 소문자로 (::first-letter)

capitalize는 각 단어의 첫 글자를 대문자로 변경하지만,

나머지 글자를 소문자로 바꾸어주지는 않습니다.

 

 

  예제 - 문단의 첫글자는 대문자로, 나머지는 소문자로 

<p>hi hELLO</p>

p {
  text-transform: lowercase;
}

p::first-letter {
  text-transform: uppercase;
}

 

문단의 첫글자는 대문자로 하고, 나머지는 소문자로 바꾸기 위해서는

1. 문단 전체를 소문자로 바꿉니다. 
   

   p {
   	text-transform: lowercase;
   }

2. 문단의 첫 글자를 대문자로 바꿉니다.
   

   p::first-letter {
   	text-transform: uppercase;
   }

   '::first-letter'는 선택된 요소(여기서는 <p>)의 첫 번째 글자에 스타일을 적용합니다.
   여기서는 'text-transform' 속성을 이용하여, 첫번째 글자만 대문자로 변경하였습니다.

 

'::first-letter'는 가상 요소의 하나입니다.

가상 요소에 대한 설명은 지난 포스팅을 참조하세요.

[HTML/CSS] ::before, ::after 가상 요소(Pseudo-elements)

 

---

 

CSS를 사용하여

문자열의 대소문자를 변경하는 방법을 알아보았습니다.