css를 이용하여 세로로 글씨를 출력할 수 있다.
브라우저 별로 지원유무가 다르니 벤더 프리픽스를 미리 확인.
소스코드)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.wr_mode{
width:300px; height:300px;
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
border: 1px solid;
}
</style>
</head>
<body>
<div>
<p>vertical : 세로</p>
<p>horizontal : 가로</p>
<p>tb : top -> bottom(위에서 아래로)</p>
<p>lr : left -> right(왼쪽에서 아래로)</p>
<p>-webkit-writing-mode : 크롬 벤더프리픽스</p>
<p>-ms-writing-mode : IE 벤더프리픽스 *IE에서는 vertical-rl이 아닌 tb-lr로 해주어야한다</p>
</div>
<span class="wr_mode">크롬 : -webkit-writing-mode: vertical-lr;</span>
<span class="wr_mode">IE : -ms-writing-mode: tb-lr;</span>
</body>
</html>
'웹개발 > css' 카테고리의 다른 글
| [css] 손가락모양 pointer (0) | 2016.09.11 |
|---|---|
| [css]글자회전 transform (0) | 2015.07.02 |
| [css] 벤더프리픽스(Vendor Prefix) (0) | 2015.07.02 |
