loading

친절한효자손 취미생활

현재 친효스킨의 본문의 경우는 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; 로 변경하시고 저장을 하시면 됩니다. 이제 한글은 글자 단위로 줄바꿈이 일어나고, 영어는 단어 단위로 줄바꿈이 일어나게 됩니다. 끝.

 

 

 

공유하기

facebook twitter kakaoTalk kakaostory naver band

댓글

비밀글모드

  1. 감사합니다. 임시방편으로 코드를 수정해서 적용은 했는데 알려주신 방법으로 고쳐보겠습니다.
    2020.04.28 00:46 신고
  2. 안녕하세요. 친효님.^^ 이제야 인사드립니다. 그동안 눈팅으로 열심히 스킨 적용시켜서 블로그 운영중이구요. 이 스킨 덕분에 다시 티스토리를 시작하게 된점 너무 감사드립니다. 첨부터 인사 드리고 스킨을 썼어야 하는데 너무 늦어서 죄송하군요. 항상 누군가에게 도움주시려 하는 정성스런 포스팅을 보면서 늘 감탄만 하고 있습니다. 과연 나도 이런 올바른 방향으로 블로그를 오랫동안 잘 운영할 수 있을까...하는 궁금증이 항상 생깁니다.ㅎㅎ 첫 인사는 이쯤만 드리고 더 자주 찾아뵐께요. 가급적 번거롭게 해드리지 않고 혼자 먼저 해결해 본 후에 문의드릴까 했는데 혼자 해결 못하는게 몇가지 있어 인사 드린김에 여쭤보고 싶은데요. 이런저런 자료 찾다가 페이지스피드 인사이트를 알게 됐는데 지금 제 블로그 측정해보니 사이트 속도가 너무 느리게 나오더군요. 제 포스팅에 무슨 문제가 있는 걸까요? 찾다보면 html 과 css 를 압축해서 업로드하면 좋아진다고 하는데 정말 그런지 의문도 들고요. 친효님이 개발하신 스킨이라 함부로 손대기도 겁납니다.^^ 실제로 pc 나 모바일에서 보면 크게 느린걸 못느끼겠는데 수치가 너무 낮게 나오니 괜히 그렇군요. 손 안대는게 좋을까요? 그리고 블로그 최상단과 최하단에 에드센스 삽입하는게 잘 안되는군요. 올려주신 내용보고 전부 적용한거 같은데도 통 나타나질 않아서 몇일째 포기중입니다. 혹 알려주실 수 있으시면 부탁 좀 드릴께요. 그리고 첨 인사드리면서 이런말씀 드리면 부담되실까 걱정되긴 하는데 혹 서울 오실일 있으시면 연락 한번 꼭 주세요. 스킨과 각종 유익한 정보에 대한 값어치에 비하면 보잘것 없지만 식사라도 한끼 사드리고 싶습니다. 물론 시간과 마음이 허락되신다면요. 아무튼 항상 감사드리고 5월1일 방송 기대합니다~
    2020.04.28 12:41 신고
    • 안녕하세요, 속도측정 테스트 사이트는 믿을게 못 됩니다. 왜냐하면 티스토리 라는 플랫폼은 순수 개인 플랫폼이 아닌, 이미 준완성된 양식에 개인이 원하는 스킨만 덧씌우는 형태이기 때문에 가장 핵심인 서버 속도는 티스토리가 담겨있는 다음 서버를 따라가게 되어 있습니다. 따라서 아무리 속도측정을 해도 보통이거나 느린 수준으로만 나타납니다. 체감상은 별로 안 느린거 같죠? 맞습니다. 별로 안 느립니다. 그러니까 그냥 사용하면 됩니다.
      2020.04.28 16:11 신고
    • 연결이 이상하게 되어 있어서 삭제하고 다시 댓글 달아서 죄송합니다. 이제야 알았네요. 자세한 설명으로 괜히 쓸데없는 고민을 덜어 주셔서 감사합니다.^^
      2020.04.28 17:05 신고
  3. 번역 자료를 복붙하니 본문 사이즈 이상으로 글이 길어지는 현상이 발견하여 이쪽으로 오게 되었는데요

    normal 에서 혹시 몰라 break-all로 바꾸니 제대로 적용이 되네요...1.175버젼에는

    기본적으로 둘다 normal로 기본셋팅되어있는데 이상하네용;;
    2020.07.28 14:53 신고
    • 안녕하세요, 영어가 중간에 띄어쓰기가 없고 계속 이어져 있는 문장의 경우는 자동으로 잘라지지가 않습니다. 그래서 어쩔 수 없이 break-all을 사용해야 하는데, 그런 경우가 거의 없으니 기본값이 normal로 되어 있습니다.
      2020.07.28 15:31 신고
  4. 그래도 바꿨더니 아주 보기좋게 자동 줄자꿈이 됐네요 일일히 엔터치다가 또 친효님 덕을 보고갑니당ㅋ 감사합니다
    2020.07.28 15:32 신고