CSS(Cascading Style Sheet)를 활용하면 웹페이지에 다양한 효과를 줄 수 있습니다.
텍스트를 회전 시키는 효과를 주거나, 텍스트에 그림자 효과를 주거나, 텍스트를 일괄적으로 대문자나 소문자 또는 Captialize 효과를 강제로 적용할 수도 있습니다.
이번 글에서는 CSS로 텍스트의 회전, 그림자, 대문자/소문자/Captialize 효과를 주는 방법에 대해 알아보겠습니다.
CSS로 텍스트 회전 효과 주기
텍스트를 회전하는 효과를 주려면 transform 속성을 사용하면 됩니다.
transform 속성은 HTML element를 변형시킬 수 있는 속성 입니다.
속성 값에는 rotate(), scale(), skew(), translate()와 같은 함수를 사용할 수 있으며 여러 개 복합적으로 사용하여 좀 더 다양한 효과를 줄 수도 있습니다.
웹킷 계열(크롬, 사파리)은 -webkit-transform으로, 모질라 계열(파이어폭스, 오페라)은 -moz-transform으로 사용 합니다.
<CSS>
<style> .ex-text { font-size: 50px; font-weight: bold; -webkit-transform: rotate(40deg); -moz-transform: rotate(40deg); } </style> <body> <div class=“ex-text”>Hello World!”</div> </body> |
<CSS 적용 결과>
CSS로 텍스트에 그림자 효과 주기
텍스트에 그림자 효과주기 위해서는 text-shadow를 사용하면 됩니다.
<CSS>
<style> .ex-text { font-size: 50px; font-weight: bold; text-shadow: 10px 12px 5px #888; } </style> <body> <div class=“ex-text”>Hello World!</div> </body> |
text-shadow 속성은 앞에서 부터
가로 위치(10px) : 원래 텍스트로부터 떨어진 가로 위치 x-offset (음수값 가능)
세로 위치(12px) : 원래 텍스트로부터 떨어진 세로 위치 y-offset (음수값 가능)
흐림도 정도(Blur)(5px) : 그림자의 흐린 정도에 대한 값
그림자 컬러(#888) : 그림자의 색상 지정
<스타일 적용 결과>
CSS로 텍스트를 대문자, 소문자, Captialize 강제로 적용하기
텍스트를 강제로 대문자, 소문자, Capitalize로 적용하고자 할 때 text-transform를 사용하면 됩니다.
<CSS>
<style> .ex-text { font-size: 50px; font-weight: bold; } .uppercase { text-transform: uppercase; // 대문자로 변경 } .lowercase { text-transform: lowercase; // 소문자로 변경 } .capitalize { text-transform: capitalize; // 문장의 첫 문자를 대문자로 변경 } </style> <body> <div class=“ex-text”>Hello World!</div> <div class=“ex-text uppercase”>Hello World!</div> <div class=“ex-text lowercase”>Hello World!</div> <div class=“ex-text capitalize”>hello World!</div> </body> |
<스타일 적용 결과>
※ 함께 읽으면 도움이 될 만한 다른 포스팅 글입니다.
이 글이 도움이 되었기를 바랍니다. ^-^