갠홈 공사용 코드 > 백업

원고지 배경 코드 (세로 원고지) 2025│08│02



.dday_containter{

width:calc(100% - 2em);

height:100vh;

background: linear-gradient(to right, transparent 0%, transparent 1px, var(--base) 1px, var(--base) 1em, transparent 1em, transparent 100%), linear-gradient(to bottom, var(--point) 0%, var(--point) 1px, transparent 1px, transparent 100%), linear-gradient(to right, var(--point) 0%, var(--point) 1px, transparent 1px, transparent 100%), linear-gradient(to right, var(--point) 0%, var(--point) 1px, transparent 1px, transparent 100%), var(--base);

    background-size: 3em 2em;

    background-position: 0 0, 0 -1px, 0 -1px, 1em 0px;

border:2px solid var(--point);

border-left-width:1px;

margin: 0 1em;

}

게시판 최대 넓이 조정 2025│08│02

게시판 가로 조정



<?if($board['bo_table_width']>0){?>style="max-width:<?=$board['bo_table_width']?><?=$board['bo_table_width']>100 ? "px":"%"?>;margin:0 auto;"<?}?>

이 코드를 넓이 조정할 태그에 넣기

폴더형 게시판 레이아웃 2025│08│02

이 게시판 레이아웃 만들기(윈도우풍 카테고리+본문 헤더)

본문 헤더 html



<div class="gall_header">

    <div></div>

    <div class="category_name"></div>

    <div class="icon_wrapper">

					<i class="fa-solid fa-window-minimize"></i>

					<i class="fa-solid fa-window-maximize"></i>

					<i class="fa-solid fa-xmark" style="padding: 4px 5.5px;"></i>

	</div>

</div>

카테고리 html



<!-- 게시판 카테고리 시작 { -->

<?php if ($is_category) { ?>

<nav id="bo_cate">

	<ul id="bo_cate_ul">

			<a href='?bo_table=<?=$bo_table?>&sca=' class='category_btn <?=$sca == "" ? "active" : ""?>'><i class='fa-solid fa-folder sidebar-icon'></i>전체보기</a>

		<?

			$categories = explode("|", $board['bo_category_list']); // 구분자가 | 로 되어 있음

			$str = "";

			for ($i=0; $i<count($categories); $i++) {

				$category = trim($categories[$i]);

				if (!$category) continue;

				$class = ' ';

				if ($category == $sca) {

					$class = ' active';

				}

				$str .= "<a href='?bo_table={$bo_table}&sca={$categories[$i]}' class='category_btn {$class}'><i class='fa-solid fa-folder sidebar-icon'></i>$categories[$i]</a>\n";

			}



			echo $str;

		?>

	</ul>

</nav>

<?}?>

	<!-- } 게시판 카테고리 끝 -->

CSS 코드:일반
전체 박스는 .board-skin-basic. 카테고리 박스는 #bo_cate, 본문 박스는 #fboardlist로 설정. 게시판 특성에 따라 바꿔야함



.board-skin-basic{

display:flex;

    gap: 10px;

}



.board-skin-basic #fboardlist{

flex:1;

    border-radius: var(--radius);

    background-color: var(--base);

overflow: hidden;

border:1px solid var(--box-border);

}





.board-skin-basic #fboardlist .gall_header{display: flex;

    justify-content: space-between;

    background-color: var(--point);

    height: 22px;

    border-bottom: 1px solid var(--box-border);

padding:4px 8px;

}



.board-skin-basic #fboardlist .gall_header .icon_wrapper{display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 4px;

}



.board-skin-basic #fboardlist .gall_header .icon_wrapper i{

    border: 1px solid var(--box-border);

    font-size: 12px;

    background-color: var(--base);

    padding: 4px;

color:var(--text);

}



#bo_cate{    width: 160px;

    border-radius: var(--radius);

    background-color: var(--base);

    border: 1px solid var(--border);

    padding: 10px;

position:relative;    overflow: hidden;

    border: 1px solid var(--box-border);

}

#bo_cate:before{

    content: 'Gallery';

    position: absolute;

    top: 0px;

    left: 0px;

    width: calc(100% - 16px);

	padding:4px 8px;

     height: 22px;

    color: var(--base);

    background-color: var(--point);

border-bottom:1px solid var(--box-border);

    }



#bo_cate #bo_cate_ul{

margin-top:30px;

}

#bo_cate a{    display: flex;

    align-items: center;

    padding: 4px 7px;

    margin: 2px 0;

    border-radius: 6px;

    cursor: pointer;

    font-size: 13px;

    transition: all 0.2s ease;

color:var(--text);

}





#bo_cate a:hover{

background-color:var(--point-05);

}



#bo_cate a.active{

background-color:var(--point);

color:var(--base);

}

#bo_cate a i{

width: 16px;

    height: 16px;

    margin-right: 8px;

    opacity: 0.8;

}

반응형 CSS



.board-skin-basic {

    flex-direction: column;}



.board-skin-basic #bo_cate{

width: calc(100% - 22px);

}



.board-skin-basic #bo_cate #bo_cate_ul {

    display: flex;         flex-wrap: wrap;

gap:4px;

}



반응형 css

잘 모르겠으면 당장 이 게시판 뜯어보기...

masonry 레이아웃 2025│08│02

https://sub0709.tistory.com/127
언젠가 이걸 적용한 갤러리 리스트를 만들어보는 게 위시...

클릭하면 복사되는 코드 2025│08│02

①

https://clipboardjs.com/
여기 들어가서 Install 밑에 download.zip 을 받기

② 갠홈 폴더중 js 폴더에 clipboard.min.js 를 넣기

③ head.php를 열어서



<script src="<?php echo G5_JS_URL ?>/clipboard.min.js"></script>

이코드를



<!-- 헤더 영역 -->

위에 넣기

④ 게시글 html 최하단에 아래를 붙여넣기



<script>



      var clipboard = new ClipboardJS( '.btn' );



      clipboard.on( 'success', function() {



        alert( '복사 완료 메세지' );



      } );



      clipboard.on( 'error', function() {



        alert( '복사 실패 메세지' );



      } );



    </script>

⑤ 원하는 이미지에



<p class="btn" data-clipboard-text="복사될 내용" style="text-align: center;"><원하는 이미지 주소></p>

이렇게 감싸기

텍꾸 추가하기 2025│08│02

텍스트 서식 추가
1. css 폴더 textggu.css 에 텍스트 서식 추가
2. extend > mmb.lib 의 콜링 설정 아래에



$str = preg_replace('`텍꾸치환자이름\[(?![\s*])(.*?)(?<![\s*])\]`', '<span class="텍꾸css클래스이름">$1</span>', $str);

이렇게 추가하기

텍꾸를 모든 게시판에 적용하기
lib 폴더 common.lib.php 의



function markup_text($str, $restore=false)



{



//여기부턴 textggu.css를 사용한다



 



//아래부터(1465번줄)



 



$source[] = "`기타6\[(?![\s*])(.*?)(?<![\s*])\]`";



$target[] = "<span class='textggu--etc6'>$1</span>";

이런 방식으로 수정하기

포타 파쿠리 자간행간 2025│08│02



 word-break: break-all;

    word-spacing: -1px;

    letter-spacing: -0.2px;

    line-height: 180%;

    font-size: 16px;

    font-weight: 300;

부드럽게 열리는 상자 2025│08│02



$(".more_open_close").click(function(){

	if($(this).next().hasClass('more_content_box')){

		 $(this).next().slideToggle(function(){

			var txt=$(this).prev();

			if(txt.text()=="열기"){

				txt.text("접기");

			}else if(txt.text()=="접기"){

				txt.text("열기");

			}

		 });

	}else{

		$(this).parents('p').siblings('.more_content_box').slideToggle(function(){

		var txt=$(this).prev().find('.more_open_close');

		if(txt.text()=="열기"){

			txt.text("접기");

		}else if(txt.text()=="접기"){

			txt.text("열기");

		}	

		});

	}

	return false;

});

]

아보카도 에디션에 기본적으로 있는 이 코드를 사용해서...(위치는 js의 _custom? 일거임)



<a href="#" class="more_open_close ui-btn point">

<span style="color: rgb(90, 80, 75);" >버튼명</span ></a>

<div class="more_content_box" style="display: none;">내용</div>

이렇게...

투명도에 따른 컬러코드 2025│08│02

투명도 진수
100% FF
95% F2
90% E6
85% D9
80% CC
75% BF
70% B3
65% A6
60% 99
55% 8C
50% 80
45% 73
40% 66
35% 59
30% 4D
25% 40
20% 33
15% 26
10% 1A
5% 0D
0% 00