CSS 세로로 글쓰기

오른쪽 nav처럼 세로로 글쓰기 위해서

 

---

방법 1: position: absolute; + transform: rotate();

.parent {
    display: relative;
}
    
.child {
    position: absolute;
	transform: rotate(-90deg);
	top: 50;
	left: 50px;
}

• rotate하면 parent범위를 넘어서 위치가 많이 바뀜

• 조정하기 어려움

---

방법 2: position:absolute; + writing-mode: vertical-rl;

CSS syntax:

writing-mode: horizontal-tb | vertical-rl | vertical-lr ;

.parent {
	position: relative;
}

.child {
	position: absolute;
	writing-mode: vertical-rl;
	right: 30px;
	top: 0px;
}

• writing-mode쓰면 parent 안에서 위치하기 때문에 위치 조정 쉬움

sideways는 아직 지원 좋지않음

 

---

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode