맨 처음 원했던 스타일은 다음과 같았다.
<body>
<div class="grid">
<div class="grid_left">
<div class="grid_left_section">
<span>top top top</span>
</div>
<div class="grid_left_section">
<span>right right right</span>
</div>
</div>
<div class="grid_right">
<span>main</span>
</div>
</div>
</body>html은 위와같이 짰다.
가장 먼저 생각한 난관은 grid_left_section 클래스 안에있는 글자를 돌리는 부분이었다. 하지만 transform을 활용하면 가볍게 구현할 수 있을 것 같아 별로 크게 신경쓰지 않았다. 분명 span이 찌그러질 것 같아서 span의 width는 max-content를 줬다.
근데...
grid_left_section 안에있는 span을 rotateZ로 돌려도.. width가 전혀 줄어들지 않았다...
혹시나 하는 마음에 grid_right 컨테이너의 너비를 더 줘도 요지부동이었다. 너무 화가난 나머지 개발자 도구를 키고 알아보기로 했다.
수상한 점을 눈치채셨나요?
grid_left_section 컨테이너의 너비와 90도 돌아간 span의 높이가 같았다.
소수점까지 똑같은 우연이 일어날리가 만무했다.
그렇다. transform: rotateZ는 눈속임을 하고 있었다. 90도 돌아간 척 하면서, span의 컨테이너는 돌아가지 않은 모습으로 숨어있었다. 괜히 애꿎은 grid_right 컨테이너에게 화냈었던 자신이 너무 부끄러워졌다.
그래서 writing-mode를 사용하여 해결했다.
writing-mode: vertical-rl을 통해 span을 돌리면, 실제로 90도 돌릴 수 있다.
따라서 grid_left_section 클래스에 writing-mode: vertical-rl을 주고 해결할 수 있었다.
결과적으로 나온 css는 다음과 같다.
.grid {
display: grid;
height: 100%;
grid-template-columns: 1fr 20fr;
grid-template-rows: 1fr;
padding: 10px;
}
.grid .grid_left {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
color: #fff;
font-size: 30px;
font-weight: 800;
}
.grid .grid_left .grid_left_section {
display: flex;
align-items: center;
writing-mode: vertical-rl;
padding: 20px 0;
text-transform: uppercase;
}
.grid .grid_left .grid_left_section:first-child {
background-color: green;
}
.grid .grid_left .grid_left_section:last-child {
justify-content: flex-end;
background-color: purple;
}
.grid .grid_left .grid_left_section:last-child span {
transform: rotateZ(180deg);
}
.grid .grid_right {
display: flex;
justify-content: center;
align-items: center;
background-color: orange;
font-size: 100px;
font-weight: 800;
text-transform: uppercase;
}
'Web > CSS' 카테고리의 다른 글
| [CSS] position: absolute로 가운데에 놓기 (0) | 2021.07.28 |
|---|---|
| [CSS] 테두리가 움직이는 점선 배경 만들기 (0) | 2021.07.26 |