사실 text-align 속성은 텍스트를 정렬하는 사람이면 누구나 써봤을 것이다. 하지만 사실상 모두 left, center, right 외에는 잘 쓰지 않기에 부가적인 기능을 찾아보기 힘들다. 그러므로 이에 대한 부가적인 속성 중
text-align : justify라는 속성이 있다. 해당 속성은 우리가 텍스트 정렬을 할 때, 자간 간격을 모두 동일하게 유지하게 해준다.(줄바꿈이 일어날 때!) 그러므로 양쪽 정렬이라고도 부른다.
해당 속성을 이용하면, 특정 단어의 길이가 커서 다음 줄로 넘어갈 때, 그 전 줄에서 공백이 심하게 남는 현상을 없앨 수 있다. 단어의 길이가 크지 않더라도 단어 간 뛰어쓰기 때문에 줄바꿈하는 위치가 줄마다 달라줄 수 있다. 이때 text-align : justify 속성을 활용하면 모두 시작과 끝의 위치가 같기에 통일감을 줄 수 있다.
하지만 오히려 이런 현상 때문에 문제가 될 수 있는 것은, 어떤 줄에는 긴 단어로 인해 공백이 많이 남은 부분을 없애기 위해 해당 줄의 텍스트가 자간을 추가로 많이 나눠갖는 반면, 또 어떤 줄에는 공백이 거의 없어 자간을 덜 나눠 갖기에 같은 영역의 텍스트라도 줄마다 자간이 다르게 형성될 수 있다는 점이다. 이런 부작용을 없애기 위해선 word-break 속성도 함께 정의해주는 것이 좋다.
word-break 속성은, 줄바꿈을 어떤 것을 기준으로 할 것인지를 얘기한다. 총 크게 3가지 속성이 있는데, normal/keep-all/break-all이다.
normal는 default 값인데, CJK(Chinese,Japanese,Korean) 언어는 글자를 기준으로 줄바꿈, 그 이외의 문자는 단어를 기준으로 줄바꿈하게 된다.
글자를 기준으로 줄바꿈한다는 것은, 줄바꿈을 할 때 단어가 끝났는지 안끝났는지 상관없이 그 길이만으로 판단한다는 것이다. 그러므로 영어의 경우 속성을 정의하지 않으면 단어 기준으로 줄바꿈이 되기 때문에, 줄 마다 다른 자간이 형성되는 것이다. 한국어는 속성을 정의하지 않으면 글자 기준으로 줄바꿈이 되기 때문에 크게 신경쓰지 않아도 된다.
keep-all 속성은 글자 기준으로 줄바꿈하는 속성이다. CJK 언어는 따로 설정하지 않아도 default로 설정된다. 그러므로 영어 텍스트를 활용할 때 양쪽 정렬을 사용하면서도 모든 줄에 같은 자간을 유지하고 싶다면 글자 기준으로 줄바꿈하여 통일성을 줄 수 있다.
break-all은 문자 기준으로, CJK 언어를 줄바꿈할 때 단어기준으로 하고 싶다면 사용할 수 있겠다.
하지만 사실상 반응형 웹의 고려가 많은 시점에서 break-all을 사용하게 되면 텍스트 상자의 크기가 작아지면서 문제가 생기기 때문에, 영어를 사용하는 경우 keep-all 속성을 걸어주는 것이 좋겠다.
물론 그냥 중앙 정렬을 하면 되지 않겠나? 싶지만 우리가 기사 글을 읽을 때 줄바꿈 후 남는 글자들이 중앙에 나오지 않지 않는가. 그런걸 고려해봤을 때 다음과 같은 CSS 속성은 의미가 있다.
