CSS를 사용하여 텍스트 회전
이 기사에서는 CSS를 사용하여 HTML 텍스트를 회전합니다. 중국어, 일본어 또는 한국어와 같은 많은 언어에서 회전된 텍스트를 자주 사용합니다.
또한 웹 페이지를 디자인하는 동안 개발자는 사용자 인터페이스를 더 매력적으로 만들기 위해 텍스트를 어느 정도 회전해야 할 수 있습니다. 여기에서는 두 가지 다른 방법을 사용하여 텍스트를 회전했습니다.
CSS transform 속성을 사용하여 텍스트 회전
아래 예에서는 div 요소를 만들고 식별을 위해 element-text 클래스 이름을 지정했습니다. div 요소 안에 <span> 요소를 만들고 그 안에 텍스트를 추가했습니다.
예제 코드:
<div class="example-text">
<span>Rotated texts.</span>
</div>
이제 <div> 요소의 모든 텍스트를 회전하기 위해 CSS에서 해당 클래스 이름을 사용하여 div에 액세스했습니다.
다음으로 transform: rotate(-90deg) CSS 속성을 div 요소에 적용하여 전체 콘텐츠를 회전시켰습니다. 그러나 우리는 -webkit-transform: rotate(-90deg);를 사용했습니다. Chrome 브라우저에서 텍스트를 회전하려면 -moz-transform: rotate(-90deg); Firefox 브라우저에서 텍스트를 회전하고 -o-transform: rotate(-90deg);와 동일 오페라를 위해.
또한 div 요소의 위치를 상단에 설정하기 위해 몇 가지 추가 CSS를 적용했습니다. 여기에서 Position: absolute는 div 요소의 위치가 문서 본문 자체인 부모를 기준으로 변경됨을 의미합니다.
.example-text {
-webkit-transform: rotate(-80deg);
-moz-transform: rotate(-80deg);
-o-transform: rotate(-80deg);
position: absolute;
top: 40px;
}
아래 출력에서 사용자는 텍스트가 시계 반대 방향으로 90도 회전된 것을 볼 수 있습니다.
rotate() 메서드의 인자로 양의 정도 값을 전달하면 콘텐츠나 텍스트를 시계 방향으로 회전시키므로 사용자는 아래 예제를 통해 배울 수 있습니다.
.example-text {
-webkit-transform: rotate(80deg);
-moz-transform: rotate(80deg);
-o-transform: rotate(80deg);
position: absolute;
top: 40px;
}
<div class="example-text">
<span>Rotated texts.</span>
</div>
CSS 쓰기 모드 속성을 사용하여 텍스트 회전
쓰기 모드 CSS 속성은 텍스트의 방향을 변경하는 데 도움이 됩니다. 이를 사용하여 텍스트를 90도 또는 -90도 회전할 수 있습니다.
verticle-rl을 writing-mode 속성의 값으로 사용하여 사용자가 오른쪽에서 왼쪽으로, 위에서 아래로 텍스트를 읽을 수 있도록 텍스트를 회전할 수 있습니다.
아래 예에서는 writing-mode: vertical-rl CSS 속성을 사용하여 회전한 일부 텍스트를 포함하는 <p> HTML 태그를 만들었습니다.
예제 코드:
<p class="text">These text rotated by writing-mode: vertical-rl; CSS property. Read it from top to bottom and left to right.</p>
.text{
writing-mode: vertical-rl;
height: 200px;
}
verticle-lr을 writing-mode 속성 값으로 사용하면 왼쪽에서 오른쪽으로, 위에서 아래로 텍스트를 읽을 수 있도록 텍스트를 회전시킵니다.
.text{
writing-mode: vertical-lr;
height: 200px;
}
<p class="text">These text rotated by writing-mode: vertical-rl; CSS property. Read it from top to bottom and left to right.</p>
위의 출력을 통해 사용자는 왼쪽에서 오른쪽으로, 위에서 아래로 텍스트를 읽을 수 있습니다.
텍스트를 회전하는 다양한 방법을 배웠습니다. 첫 번째 방법은 프로그래머가 임의의 각도로 텍스트를 회전할 수 있도록 합니다.
두 번째 방법을 사용하면 프로그래머는 텍스트를 90도 회전하여 왼쪽에서 오른쪽으로 또는 오른쪽에서 왼쪽으로 읽을 수 있게 만들 수 있습니다. 따라서 첫 번째 방법을 사용하는 것이 좋습니다.
