웹아틀리에 - Web atelier

줄바꿈 규칙을 바꿔주는 CSS! word-break 본문

IT-웹 Front end/CSS

줄바꿈 규칙을 바꿔주는 CSS! word-break

네루펜 2016. 4. 26. 15:25

줄 바꿈을 할 때에 어느 부분에서 실행을 할지 규칙을 정해주는 CSS. word-break 입니다.


이 word-break의 기본 정의와 사용법을 먼저 보고 시작하도록 하죠


The word-break property specifies line breaking rules for non-CJK scripts.

Tip : CJK scripts are Chinese, Japanese and Korean ("CJK") scripts.


Default value :normal
Inherited : yes
Animatableno. Read about animatable
Version : CSS3
JavaScript syntax : object.style.wordBreak="break-all"

출처 : W3schools.com (상세링크)



보시는 바와 같이 한글(CJK - 중국어, 일본어, 한글)에서는 모든 속성이 작동하지는 않습니다. 하지만 차이가 있는점이 하나 있죠. 


normal = break-all = initial = inherit 는 모두 글자 단위로 줄바꿈이 실행 되구요.


keep-all 하나만이 단어 단위로 줄바꿈이 실행 됩니다.


예를 들어서 


normal 의 경우 : 

어제밤에 우리 아빠가 다정하신 모습으로 한손에는 크레파스를 사가지고 오셨어요. 



keep-all 의 경우 : 

어제밤에 우리 아빠가 

다정하신 모습으로 

한손에는 크레파스를 

사가지고 오셨어요. 



이러한 차이가 나게 되는 것이죠. 


문장에서 사이에 <br/>태그로  줄바꿈을 하는 경우에는 스크린 리더가 정확하게 파악하지 못하므로 접근성을 위해서도 css를 사용하는 습관을 들이는 것이 좋습니다. 


중요한것은 css와 js가 없어도 마크업 만으로도 의미의 전달이 제대로 되어야 한다는 것. 


css는 레이아웃등 꾸며주는 것이 위주가 되어야 한다는 것. 이게 핵심이겠네요. ㅎㅎ



공유하기 링크
Comments