text-align: justify 속성을 사용한 신기한 정렬 기법

text를 정렬하는 방법(text-align)이라면 left, right, center 밖에 몰랐었는데, justify라는 속성을 알게 되어 기록함.

1
<p>t e x t</p>

우선 text-align: justify는 text를 양쪽으로 정렬해주는 속성이다.

내가 하려는 건 한 글자씩 모두 양쪽으로 정렬하려는 것이고, 글자 사이에 공백이 있어야 적용됨.

1
2
3
4
5
6
7
8
9
10
p {
  max-width: 500px;
  text-align: justify;

  &:after {
    content: "";
    display: inline-block;
    width: 100%;
  }
}

See the Pen ZEbZdEm by sel (@selucky) on CodePen.

p 요소의 양쪽으로 글자들이 정렬된 것을 볼 수 있다.