정리해달라는 요청이 있어서 모아본 텍스트 서식이예요~~~~ 설치 방법은 아보카도 에디션 기준으로 작성했지만 어디서든 사용 가능합니다~~! 애니메이션이나 마우스 오버 효과가 들어간 것들이 있어 자세한 건 코드펜 쪽으로 확인하시는 걸 추천해요

코드펜

some text decoration & effect
CodePen

적용법

① 아래의 파일을 다운로드해, textggu.css파일은 css폴더에 / textggu.js파일은 js폴더에 넣어줍니다.

textggu.css
용량 12.89KB
textggu.js
용량 1.66KB


② head.sub.php를 열어 적당한 공간에 아래 코드를 삽입해줍니다. (<? 와 ?>, <script>와 </script>사이만 피해서 넣어주세요! </head> 전에 넣어주시면 OK)

<?php

if(G5_IS_MOBILE) {

위에 넣어주는 게 무난합니다.

<link rel="stylesheet" href="<?php echo G5_CSS_URL?>/textggu.css" type="text/css">
<script src="<?php echo G5_JS_URL ?>/textggu.js"></script>
<link rel="stylesheet" href='https://cdn.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css'>
<!-- 마지막 줄은 galmuri 폰트를 사용하지 않거나 이미 사용 중이라면 삭제해주세요! -->


③ 이제 아래처럼 사용할 수 있습니다.

textggu-- 로 시작해 title1~title7 / sub1~sub7 / etc1~etc6 으로 들어가있어요!!

<span class="textggu--title1">제목①</span>
<span class="textggu--title2">제목②</span>
<span class="textggu--title3">제목③</span>
<span class="textggu--title4">제목④</span>
<span class="textggu--title5">제목⑤</span>
<span class="textggu--title6" data-text="부제는 여기에 작성합니다">제목⑥</span>
<span class="textggu--title7">제목⑦</span>

<span class="textggu--sub1">소제1</span>
<span class="textggu--sub2">소제2</span>
<span class="textggu--sub3">소제3</span>
<span class="textggu--sub4">소제4</span>
<span class="textggu--sub5">소제5</span>
<span class="textggu--sub6">소제6</span>
<span class="textggu--sub7">소제7</span>

<span class="textggu--etc1">기타1</span>
<span class="textggu--etc2">기타2</span>
 <span class="textggu--etc3">기타3</span>
 <span class="textggu--etc4">기타4</span>
 <span class="textggu--etc5">기타5</span>
 <span class="textggu--etc6">기타6</span>


④ 간편화 

extend 폴더 > mmb.lib.php 에서 // 콜링 설정 을 찾아 그 문단 밑의 빈 곳에 아래의 코드를 붙여넣어 줍니다.

    // 스타일 설정
    $str = preg_replace('`제목1\[(?![\s*])(.*?)(?<![\s*])\]`', '<span class="textggu--title1">$1</span>', $str);
    $str = preg_replace('`제목2\[(?![\s*])(.*?)(?<![\s*])\]`', '<span class="textggu--title2">$1</span>', $str);
    $str = preg_replace('`제목3\[(?![\s*])(.*?)(?<![\s*])\]`', '<span class="textggu--title3">$1</span>', $str);
    $str = preg_replace('`제목4\[(?![\s*])(.*?)(?<![\s*])\]`', '<span class="textggu--title4">$1</span>', $str);
    $str = preg_replace('`제목5\[(?![\s*])(.*?)(?<![\s*])\]`', '<span class="textggu--title5">$1</span>', $str);
    $str = preg_replace('`제목6\[(?![\s*])(.*?)(?<![\s*])\]-(?![\s*])(.*?)(?<![\s*])-`', '<span class="textggu--title6" data-text="$2">$1</span>', $str);
    $str = preg_replace('`제목7\[(?![\s*])(.*?)(?<![\s*])\]`', '<span class="textggu--title7">$1</span>', $str);

    $str = preg_replace('`소제1\[(?![\s*])(.*?)(?<![\s*])\]`', '<span class="textggu--sub1">$1</span>', $str);
    $str = preg_replace('`소제2\[(?![\s*])(.*?)(?<![\s*])\]`', '<span class="textggu--sub2">$1</span>', $str);
    $str = preg_replace('`소제3\[(?![\s*])(.*?)(?<![\s*])\]`', '<span class="textggu--sub3">$1</span>', $str);
    $str = preg_replace('`소제4\[(?![\s*])(.*?)(?<![\s*])\]`', '<span class="textggu--sub4">$1</span>', $str);
    $str = preg_replace('`소제5\[(?![\s*])(.*?)(?<![\s*])\]`', '<span class="textggu--sub5">$1</span>', $str);
    $str = preg_replace('`소제6\[(?![\s*])(.*?)(?<![\s*])\]`', '<span class="textggu--sub6">$1</span>', $str);
    $str = preg_replace('`소제7\[(?![\s*])(.*?)(?<![\s*])\]`', '<span class="textggu--sub7">$1</span>', $str);

    $str = preg_replace('`기타1\[(?![\s*])(.*?)(?<![\s*])\]`', '<span class="textggu--etc1">$1</span>', $str);
    $str = preg_replace('`기타2\[(?![\s*])(.*?)(?<![\s*])\]`', '<span class="textggu--etc2">$1</span>', $str);
    $str = preg_replace('`기타3\[(?![\s*])(.*?)(?<![\s*])\]`', '<span class="textggu--etc3">$1</span>', $str);
    $str = preg_replace('`기타4\[(?![\s*])(.*?)(?<![\s*])\]`', '<span class="textggu--etc4">$1</span>', $str);
    $str = preg_replace('`기타5\[(?![\s*])(.*?)(?<![\s*])\]`', '<span class="textggu--etc5">$1</span>', $str);
    $str = preg_replace('`기타6\[(?![\s*])(.*?)(?<![\s*])\]`', '<span class="textggu--etc6">$1</span>', $str);

이제 제목1[이렇게] 쓰면 로드비 게시판에서 자동변환됩니다.

제목6은 부제가 필요한 서식이라 제목6[이렇게 큰 텍스트]-이렇게 부제- 를 기입해주세요!!


개인 설정

● 적용된 웹폰트와 폰트 서체 설정은 textggu.css의 상단을 참고해서 수정해주세요!

● 색상 변경은 textggu.css의 전역 설정을 참고해주세요~


업데이트

● 소제6, 소제7이 복수사용되지 않는 문제를 고쳐뒀어요~! textggu.js만 바꿔넣어주시면 OK


이외에 오류가 있으면 덧글로 남겨주세요~!!

아래는 아무것도 없습니다! 후원상자예요 ~.~

  • 텍스트 11자 공백 제외
500P