CSS : Vertical Text (세로 텍스트)

CSS (Cascading Style Sheets)

CSS 또는 캐스케이딩 스타일 시트(Cascading Style Sheets)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다. <위키>

---

Vertical Text 세로 텍스트

언젠가는 쓸것이라는 믿음으로 반은 적었는 것인데 이제야 적습니다. 이것 적을때에는 첫번째 밖에 몰랐는데 하나 더 발견해서 적어 둡니다. 이 2가지 모두 인터넷에서 퍼온 것이고 공부용으로 저장한 것입니다.

transform을 이용해서 만들기

transform 속성은 요소를 2D 나 3D 변형을 할 수 있게 하는 속성이다. rotate, scale, translate, skew 등과 같은 변형이 가능하다.

rotate (회전)

• rotate3d (숫자, 숫자, 숫자, 회전 각도)
• rotateX (X 축 축으로하는 회전 각도)
• rotateY (Y 축을 축으로하는 회전 각도)
• rotateZ (Z 축을 축으로하는 회전 각도)

transform-origin 속성은 요소에 2D 변형 또는 3D 변형을 적용 할 때의 변형의 원점을 지정하는 데 사용합니다.

• 값
  • 백분율 : 변형을 적용 할 요소의 왼쪽 위치 (0 %, 0 %)에서의 백분율, 그리고 3D의 경우에는 Z 축 방향의 길이를 지정 (초기 값은 50 % 50 % 0)
  • 길이 : 변형을 적용 할 요소의 왼쪽 위치 (0,0)에서의 길이를 지정, 3D 변형에서는 왼쪽 위치 (0,0,0)의 길이를 지정
  • 키워드 : 수평 방향은 left · center · right 수직 방향 top · center · bottom 및, 3D의 경우에는 Z 축 방향의 길이를 지정
• 적용 대상 · 값의 계승 · 초기 값
  • 초기 값 : 2D 변형은 50 % 50 %, 3D 변형은 50 % 50 % 0
  • 적용 대상 : 블록 수준 요소 인라인 요소
  • 값의 상속 : no

.vertical-text {
transform: rotate(90deg);
transform-origin: left top;
float: left;
}

<div class="verticle-text">TEXT</div>

출처 : http://pranaysonisoft.blogspot.kr/2014/03/css-vertical-text.html

writing-mode을 이용해서 만들기

writing-mode 및 word-wrap 속성을 사용하여 CSS를 사용하여 "세로 모양"텍스트를 표시하는 3 가지 방법.

1. vertical-lr 사용 :

.text-vertical-1 {
    writing-mode: vertical-lr;
}

2. vertical-lr + rotate 사용 :

.text-vertical-2 {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}

3. break-word 사용 :

.text-vertical-3 {
  width:20px;
  word-wrap: break-word;
  text-align:center;
}

<div class="text-vertical-1">TEXTO1</div>
<div class="text-vertical-2">TEXTO2</div>
<div class="text-vertical-3">TEXTO3</div>

출처 : http://www.bufa.es/css3-texto-vertical/