목차
text-align:justify; text-justify:~ 속성은 골 때리게도 CSS2에는 포함되지 않고, CSS3에는 포함이 되어 있고, IE 구버전들은 일부 지원을 하고, 9 이상에서는 지원이 되지 않는 웃긴 양상을 보이는 텍스트 속성이다.
더 귀찮은 것은 골 때리게도, 이 속성을 공무원님들이 너무 좋아라 하신다는 거다. -_-;
군정시대 습성들이 남아 계신 건지 글씨들이 각 맞춰서 열 맞춰서 서 있기를 바라는 분들이 간혹 있다.
그러면서 단어는 음절단위에서 개행하지 않게 해 달란다.
아하~
나처럼 이런 갈굼을 당하는 퍼블리셔들이 많으신지, 의외로 검색 유입에 text-align:justify를 검색하는 사람들이 꽤 있다.
그분들의 갈증을 해소해드리고자, 브라우저별로 속성 값이 어떻게 적용되는지를 일일이 브라우저마다 돌려서 캡처 떠서 한 이미지로 만들어 두었다.
결론부터 말하자면, IE6~8까지만 적용되고, 나머지 모든 브라우저에서는 안된다.
IE8에서는 모든 속성이 다 안 먹고 유일하게 distribute-all-lines 만 적용된다.
이마저도 9에서는 적용되지 않는다.
IE6,7에서는 inter-cluster, kashida, newspaper, distribute-all-lines 만 적용된다.
text-align:jusitify의 취지는 여러 줄이 넘어갈 때 만 양쪽 정렬을 한다.
한 줄이 완전히 다 차지 않은 경우에는 양쪽 정렬을 하지 않으며, 한 줄이 다 차지 않아도 양쪽 정렬을 하고자 할 때에는 distribute-all-lines을 적용한다.
<style>
.text-01 { width:304px; border:2px solid #06F; padding:10px;font-size:14px; text-align:justify;text-justify:auto;}
.text-02 { width:304px; border:2px solid #077817; padding:10px; font-size:14px; text-align:justify;text-justify:inter-word;}
.text-03 { width:304px; border:2px solid #603; padding:10px; font-size:14px; text-align:justify;text-justify:inter-ideograph;}
.text-04 { width:304px; border:2px solid #CC0; padding:10px; font-size:14px; text-align:justify;text-justify:inter-cluster;}
.text-05 { width:304px; border:2px solid #F99; padding:10px; font-size:14px; text-align:justify;text-justify:distribute;}
.text-06 { width:304px; border:2px solid #ff3333; padding:10px; font-size:14px; text-align:justify;text-justify:kashida;}
.text-07 { width:304px; border:2px solid #AA0004; padding:10px; font-size:14px; text-align:justify;text-justify:newspaper}
.text-08 { width:304px; border:2px solid #AA0004; padding:10px; font-size:14px; text-align:justify;text-justify:distribute-all-lines}
.text-09 { width:304px; border:2px solid #AA0004; padding:10px; font-size:14px; text-align:justify;text-justify:distribute-center-last}
</style>
<div class="text-01">
<p>text-justify:auto;<br />I don't even try to control you. Look into my eyes and I'll own you.
<br />I've got the moves like jagger.<br />I've got the moves like jagger.</p>
<p> 난 너를 통제하려고 조차 안하는데 . 나의눈을 봐 , 그럼 난 널 갖게되지 . <br /> 난 Jagger 와 같이 움직이지 .<br /> 난 Jagger 와 같이 움직이지 .</p>
</div>
<div class="text-02">
<p> text-justify:inter-word;<br />I don't even try to control you. Look into my eyes and I'll own you.
<br />I've got the moves like jagger.<br />I've got the moves like jagger.</p>
<p> 난 너를 통제하려고 조차 안하는데 . 나의눈을 봐 , 그럼 난 널 갖게되지 . <br /> 난 Jagger 와 같이 움직이지 .<br /> 난 Jagger 와 같이 움직이지 . </p>
</div>
<div class="text-03">
<p> text-justify:inter-ideograph;<br />I don't even try to control you. Look into my eyes and I'll own you.
<br />I've got the moves like jagger.<br />I've got the moves like jagger.</p>
<p> 난 너를 통제하려고 조차 안하는데 . 나의눈을 봐 , 그럼 난 널 갖게되지 . <br /> 난 Jagger 와 같이 움직이지 .<br /> 난 Jagger 와 같이 움직이지 . </p>
</div>
<div class="text-04">
<p> text-justify:inter-cluster;<br />I don't even try to control you. Look into my eyes and I'll own you.
<br />I've got the moves like jagger.<br />I've got the moves like jagger.</p>
<p> 난 너를 통제하려고 조차 안하는데 . 나의눈을 봐 , 그럼 난 널 갖게되지 . <br /> 난 Jagger 와 같이 움직이지 .<br /> 난 Jagger 와 같이 움직이지 . </p>
</div>
<div class="text-05">
<p> text-justify:distribute;<br />I don't even try to control you. Look into my eyes and I'll own you.
<br />I've got the moves like jagger.<br />I've got the moves like jagger.</p>
<p> 난 너를 통제하려고 조차 안하는데 . 나의눈을 봐 , 그럼 난 널 갖게되지 . <br /> 난 Jagger 와 같이 움직이지 .<br /> 난 Jagger 와 같이 움직이지 . </p>
</div>
<div class="text-06">
<p> text-justify:kashida;<br />I don't even try to control you. Look into my eyes and I'll own you.
<br />I've got the moves like jagger.<br />I've got the moves like jagger.</p>
<p> 난 너를 통제하려고 조차 안하는데 . 나의눈을 봐 , 그럼 난 널 갖게되지 . <br /> 난 Jagger 와 같이 움직이지 .<br /> 난 Jagger 와 같이 움직이지 . </p>
</div>
<div class="text-07">
<p> text-justify:newspaper;<br />I don't even try to control you. Look into my eyes and I'll own you.
<br />I've got the moves like jagger.<br />I've got the moves like jagger.</p>
<p> 난 너를 통제하려고 조차 안하는데 . 나의눈을 봐 , 그럼 난 널 갖게되지 . <br /> 난 Jagger 와 같이 움직이지 .<br /> 난 Jagger 와 같이 움직이지 . </p>
</div>
<div class="text-08">
<p> text-justify:distribute-all-lines;<br />I don't even try to control you. Look into my eyes and I'll own you.
<br />I've got the moves like jagger.<br />I've got the moves like jagger.</p>
<p> 난 너를 통제하려고 조차 안하는데 . 나의눈을 봐 , 그럼 난 널 갖게되지 . <br /> 난 Jagger 와 같이 움직이지 .<br /> 난 Jagger 와 같이 움직이지 . </p>
</div>
<div class="text-09">
<p> text-justify:distribute-center-last;<br />I don't even try to control you. Look into my eyes and I'll own you.
<br />I've got the moves like jagger.<br />I've got the moves like jagger.</p>
<p> 난 너를 통제하려고 조차 안하는데 . 나의눈을 봐 , 그럼 난 널 갖게되지 . <br /> 난 Jagger 와 같이 움직이지 .<br /> 난 Jagger 와 같이 움직이지 . </p>
</div>
text-justify:auto;
I don't even try to control you. Look into my eyes and I'll own you.
I've got the moves like jagger.
I've got the moves like jagger.
난 너를 통제하려고 조차 안하는데 . 나의눈을 봐 , 그럼 난 널 갖게되지 .
난 Jagger 와 같이 움직이지 .
난 Jagger 와 같이 움직이지 .
text-justify:inter-word;
I don't even try to control you. Look into my eyes and I'll own you.
I've got the moves like jagger.
I've got the moves like jagger.
난 너를 통제하려고 조차 안하는데 . 나의눈을 봐 , 그럼 난 널 갖게되지 .
난 Jagger 와 같이 움직이지 .
난 Jagger 와 같이 움직이지 .
text-justify:inter-ideograph;
I don't even try to control you. Look into my eyes and I'll own you.
I've got the moves like jagger.
I've got the moves like jagger.
난 너를 통제하려고 조차 안하는데 . 나의눈을 봐 , 그럼 난 널 갖게되지 .
난 Jagger 와 같이 움직이지 .
난 Jagger 와 같이 움직이지 .
text-justify:inter-cluster;
I don't even try to control you. Look into my eyes and I'll own you.
I've got the moves like jagger.
I've got the moves like jagger.
난 너를 통제하려고 조차 안하는데 . 나의눈을 봐 , 그럼 난 널 갖게되지 .
난 Jagger 와 같이 움직이지 .
난 Jagger 와 같이 움직이지 .
text-justify:distribute;
I don't even try to control you. Look into my eyes and I'll own you.
I've got the moves like jagger.
I've got the moves like jagger.
난 너를 통제하려고 조차 안하는데 . 나의눈을 봐 , 그럼 난 널 갖게되지 .
난 Jagger 와 같이 움직이지 .
난 Jagger 와 같이 움직이지 .
text-justify:kashida;
I don't even try to control you. Look into my eyes and I'll own you.
I've got the moves like jagger.
I've got the moves like jagger.
난 너를 통제하려고 조차 안하는데 . 나의눈을 봐 , 그럼 난 널 갖게되지 .
난 Jagger 와 같이 움직이지 .
난 Jagger 와 같이 움직이지 .
text-justify:newspaper;
I don't even try to control you. Look into my eyes and I'll own you.
I've got the moves like jagger.
I've got the moves like jagger.
난 너를 통제하려고 조차 안하는데 . 나의눈을 봐 , 그럼 난 널 갖게되지 .
난 Jagger 와 같이 움직이지 .
난 Jagger 와 같이 움직이지 .
text-justify:distribute-all-lines;
I don't even try to control you. Look into my eyes and I'll own you.
I've got the moves like jagger.
I've got the moves like jagger.
난 너를 통제하려고 조차 안하는데 . 나의눈을 봐 , 그럼 난 널 갖게되지 .
난 Jagger 와 같이 움직이지 .
난 Jagger 와 같이 움직이지 .
text-justify:distribute-center-last;
I don't even try to control you. Look into my eyes and I'll own you.
I've got the moves like jagger.
I've got the moves like jagger.
난 너를 통제하려고 조차 안하는데 . 나의눈을 봐 , 그럼 난 널 갖게되지 .
난 Jagger 와 같이 움직이지 .
난 Jagger 와 같이 움직이지 .
댓글