친효스킨! 본문 텍스트 단어 및 글자 줄바꿈 설정 방법 (word-break)
현재 친효스킨의 본문의 경우는 word-break 매소드에 의해서 어디를 끊어서 다음줄로 넘길지에 대한 설정이 적용되어 있습니다. 친효스킨에 적용된 옵션은 break-all 로서, 글자 단위로 끊어서 다음 줄로 넘어가도록 설정되어 있습니다. 이 설정의 장점은 텍스트가 전체를 놓고 보면 가지런해서 보기가 좋다는 장점이 있습니다. 한글은 읽는데 큰 불편함은 없습니다. 단 영어의 경우는 다릅니다. 예를 들어서 apple 사과를 입력하면 보편적으로 이것을 한 글자로 인식하기 때문에 apple가 전체 다음줄로 내려가야 하지만, 그 줄에 딱 맞는 글자수를 체우고나서 나머지를 다음줄로 내려보내게 됩니다. 즉 ap까지하여 그 줄이 꽉 채워진 상태라면 ple는 다음줄로 넘어가게 되어 영어를 읽는데 상당히 어려워지는 문제가 발생합니다.
그러면 생각해 봐야 합니다. 자신이 운영하는 콘텐츠에 CJK (Chinese, Japanese, Korean) 를 제외한 나머지 언어를 많이 사용하는지를 따져봐야겠습니다. 예를 들어서 영어 관련 교육 콘텐츠라고 하면 word-break: break-all은 다소 맞지 않는 매소드가 됩니다. 위에서 말씀드렸던 끊어쓰기 부분이 알파벳 한 단어를 기준으로 줄바꿈이 일어나기 때문입니다. 따라서 이럴때는 옵션을 normal로 변경해줘야 합니다. normal 옵션은 CJK는 글자 기준으로 줄바꿈이 일어나고, 그 외의 문자는 단어를 기준으로 줄바꿈이 일어나기에 아주 안성맞춤 입니다. 친효스킨 1.17 버전에서는 normal을 기본 옵션으로 설정 된 상태 입니다. 이제 본격적으로 수정을 해 봅시다. 친효스킨 CSS에서 아래의 부분을 찾아주시기 바랍니다. "진짜본문" 이라고 검색하시면 쉽게 찾을 수 있을 겁니다.
/* 진짜본문 (article_rep_desc) */
#contents .article {
word-break: break-all;
-webkit-word-break: break-all;
padding: 20px;
border: 1px solid #E5E5E5;
border: 1px solid var(--subColor);
font-family: "RIDIBatang", "Nanum Gothic", serif;
font-size: 17px;
line-height: 1.6em;
}여기를 찾으시면 됩니다. 그리고 수정해야 할 부분은 딱 보이시죠? 설명드렸던 word-break 부분의 매소드 옵션을 normal로 수정해주고 저장을 하면 됩니다. word-break의 매소드 속성은 다음과 같습니다.
*initial : 기본값(다른 CSS 요소에서 적용 시 초기화)
*inherit : 부모 요소를 따름
*normal : CJK 문자는 글자 기준으로, CJK를 제외한 문자는 단어 기준으로 줄바꿈
*break-all : 글자 기준으로 줄바꿈
*keep-all : 단어 기준으로 줄바꿈
따라서 최종 완성본은 아래와 같이 완료 될 겁니다.
/* 진짜본문 (article_rep_desc) */
#contents .article {
word-break: normal;
-webkit-word-break: normal;
padding: 20px;
border: 1px solid #E5E5E5;
border: 1px solid var(--subColor);
font-family: "RIDIBatang", "Nanum Gothic", serif;
font-size: 17px;
line-height: 1.6em;
}그렇습니다. 이렇게 word-break: normal; 로 변경하시고 저장을 하시면 됩니다. 이제 한글은 글자 단위로 줄바꿈이 일어나고, 영어는 단어 단위로 줄바꿈이 일어나게 됩니다. 끝.
"친절한효자손 취미생활" 을 검색!
