본문 바로가기
Dev/html css

CSS 텍스트 속성 : text-align:justify,text-justify:auto,inter-word,inter-ideograph,inter-cluster,distribute,kashida,newspaper,distribute-all-lines,distribute-center-last

by 알 수 없는 사용자 2020. 9. 14.

목차

    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 와 같이 움직이지 .

     

    반응형

    댓글