CSS text-transform 사용 방법

홈페이지를 제작하다보면 텍스트는 필연적으로 들어가게 되어있습니다. 메뉴 항목이라던지, 홈페이지 제목 등등에 사용되곤 하죠. 푸터 영역엔 무조건 텍스트가 들어갑니다. 설마 푸터를 이미지로 퉁치는 만행을 저지르는 일은 없어야 할 것입니다. 오늘 알아볼 text-transform은 한글이 아닌 알파벳으로 이루어진 영문장을 사용할 경우에 적용할 수 있는 방법입니다. 내용이 너무나도 간단하니 예시를 통해 바로 알아봅시다.

 

See the Pen CSS text-transform by rgy0409 (@rgy0409) on CodePen.

어떤가요? 금새 파악이 되죠? 그러면 간단히 요약해 보겠습니다.

 

text-transform: none; ▶ 기본값

text-transform: capitalize; ▶ 영단어의 첫 텍스트를 대문자

text-transform: lowercase; ▶ 모든 영단어를 소문자

text-transform: uppercase; ▶ 모든 영단어를 대문자

이렇게 됩니다. 만약 영어로 이루어진 홈페이지를 제작한다거나 웹에서 어떤 특정 컬럼을 영어로 작성하고자 할 때 이 세가지 옵션을 사용한다면 원하는대로 멋진 웹페이지를 제작할 수 있지 않을까 싶습니다. 외국 잡지같은 포트폴리오를 연출할때도 영단어가 많이 사용되므로 text-transform을 사용한다면 모두 소문자로 작성한 영문글이라 할지라도 대소문자를 원하는대로 조율할 수 있을 것입니다. 끝.