33
좋아요 버튼 넣기
32
배경에 콘페티 날리기
지비
LINK 참고
지비
JS에 있는 걸 전부 복사해서 confetti.js 란 파일로 js 폴더 안에 넣어줌
head.php에 이 js파일을 연결합니다
+head.sub.php에 넣으니 관리자 페이지에서 오류가 생기더라구
마찬가지로 css에 있는 걸 _manager.css.php나 어디든 연결된 css파일에 추가해두고
head.php의 <!--헤더 영역--> 위 빈 공간에 <div id="confetti"></div> 삽입
이 코드가 js파일 뒤에 와야해요
-> 이거 너무 애매하게 써둬서 아래에 정리해서 적어뒀으니 적용하실 땐 밑 덧글 참고하세요~~!
head.php에 이 js파일을 연결합니다
+head.sub.php에 넣으니 관리자 페이지에서 오류가 생기더라구
마찬가지로 css에 있는 걸 _manager.css.php나 어디든 연결된 css파일에 추가해두고
head.php의 <!--헤더 영역--> 위 빈 공간에 <div id="confetti"></div> 삽입
이 코드가 js파일 뒤에 와야해요
-> 이거 너무 애매하게 써둬서 아래에 정리해서 적어뒀으니 적용하실 땐 밑 덧글 참고하세요~~!
지비
#memo 코드
소제[[head.php]]
<!--헤더 영역--> 위의 빈 공간에
<script src="./js/confetti.js"></script>
→도메인 붙여서 정확한 주소로 적어주는 편이 좋아요
<div id="confetti"></div>
소제[[head.sub.php]]
적절한 빈 공간에
<script type="text/javascript" src="https://code .jquery. com/jquery-1.11.0.js"></script>
↑주소 일부러 깨뒀으니 띄어쓰기는 빼고 넣기~~
소제[[css > _manager.css.php]]
# confetti{
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
z-index: -1;
}
↑이쪽도 해시태그로 바뀌어서 샵과 띄어쓰기 했어요!
붙여서 쓰는 거 잊지 말기입니다
<!--헤더 영역--> 위의 빈 공간에
<script src="./js/confetti.js"></script>
→도메인 붙여서 정확한 주소로 적어주는 편이 좋아요
<div id="confetti"></div>
소제[[head.sub.php]]
적절한 빈 공간에
<script type="text/javascript" src="https://code .jquery. com/jquery-1.11.0.js"></script>
↑주소 일부러 깨뒀으니 띄어쓰기는 빼고 넣기~~
소제[[css > _manager.css.php]]
# confetti{
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
z-index: -1;
}
↑이쪽도 해시태그로 바뀌어서 샵과 띄어쓰기 했어요!
붙여서 쓰는 거 잊지 말기입니다
31
로드비 스킨 그림/코멘트 분리하기
지비
로드비 스킨 폴더 안의 list.log.skin.php 에서
<!-- 로그 이미지 출력 부분 --> 아래 문장을
<div class="ui-pic <?=$no_member_class?>"
data-width="<?=$data_width?>"
data-image="<?=$image_width?>"
style="max-width:<?=$data_width?>px !important;" >
로 수정
로드비 스킨 style.css >
# log_list .item .ui-pic 에서
min-width:100%; 삭제
이러면 구조는 끝!!
<!-- 로그 이미지 출력 부분 --> 아래 문장을
<div class="ui-pic <?=$no_member_class?>"
data-width="<?=$data_width?>"
data-image="<?=$image_width?>"
style="max-width:<?=$data_width?>px !important;" >
로 수정
로드비 스킨 style.css >
# log_list .item .ui-pic 에서
min-width:100%; 삭제
이러면 구조는 끝!!
30
로드비 스킨 한 줄에 여러개 표시하기
지비
#memo 로드비 스킨 폴더 > style.css
body # log_list {
background-color: var(--list-color);
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-evenly;
}
로 수정,
body # log_list .item 에
width: 49%;
혹은
width: 32%;
혹은
width: 24%;
를 추가함 각각 2개 3개 4개인데 가로가 충분히 넓지 않으면 깨질 가능성이 높으니까 주의!!!
→끝이고 나머지는 아보카도 관리자 > 게시판 설정 > 페이지 당 목록 수에서 몇개까지 한 페이지에 나오게 할 건지 만져주시면 ok입니다 >_< 해시태그 때문에 # 뒤에 띄어쓰기 했으니까 검색할 때 감안하기!!!
background-color: var(--list-color);
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-evenly;
}
로 수정,
body # log_list .item 에
width: 49%;
혹은
width: 32%;
혹은
width: 24%;
를 추가함 각각 2개 3개 4개인데 가로가 충분히 넓지 않으면 깨질 가능성이 높으니까 주의!!!
→끝이고 나머지는 아보카도 관리자 > 게시판 설정 > 페이지 당 목록 수에서 몇개까지 한 페이지에 나오게 할 건지 만져주시면 ok입니다 >_< 해시태그 때문에 # 뒤에 띄어쓰기 했으니까 검색할 때 감안하기!!!
지비
#memo 일정 높이를 유지하도록 하기
body # log_list .item { } 안에
max-height: 650px;
overflow: auto;
를 추가해줍니다!! 높이는 개인설정대로 바꾸셔도 OK
max-height: 650px;
overflow: auto;
를 추가해줍니다!! 높이는 개인설정대로 바꾸셔도 OK
지비
#memo 모바일 대응
css > manager.css.php 의
@media all and (max-width: <?=$tab_width?>px) { 를 찾아서
(두 개 있는데 header가 있는 쪽을 권장!!) 이 괄호의 안쪽에
body .# log_list .item. item-inner .ui-pic {
width: 100% !important;
max-width: 100% !important;
}
body # log_list .item .item-inner .ui-comment {
width: 100% !important;
margin: 0px !important;
}
body # log_list .item {
width:100% !important;
height: auto !important;
}
body # log_list {
display: block !important;
}
를 추가합니다. 위 아래에서 # log_list는 전부 띄어쓰기 없이 붙여주기!
로드비에서는 해시태그에 걸려서 띄어쓰기 해뒀어요~~~
@media all and (max-width: <?=$tab_width?>px) { 를 찾아서
(두 개 있는데 header가 있는 쪽을 권장!!) 이 괄호의 안쪽에
body .# log_list .item. item-inner .ui-pic {
width: 100% !important;
max-width: 100% !important;
}
body # log_list .item .item-inner .ui-comment {
width: 100% !important;
margin: 0px !important;
}
body # log_list .item {
width:100% !important;
height: auto !important;
}
body # log_list {
display: block !important;
}
를 추가합니다. 위 아래에서 # log_list는 전부 띄어쓰기 없이 붙여주기!
로드비에서는 해시태그에 걸려서 띄어쓰기 해뒀어요~~~
29
스팸 내쫓기... ...
지비
최근에 골머리 썩으시는 분들이 많길래 ^^;
아보카도 관리자 설정 > 환경설정 > 단어 필터링에
price,commercial,[URL=,[/URL],online,buy
을 추가합니다 (이외에도 스팸이 쓰는 글에서 자주 보이는 단어같은 걸…)
스팸 접근 차단 IP에 아래의 목록을 복사&붙여넣기 합니다…
아보카도 관리자 설정 > 환경설정 > 단어 필터링에
price,commercial,[URL=,[/URL],online,buy
을 추가합니다 (이외에도 스팸이 쓰는 글에서 자주 보이는 단어같은 걸…)
스팸 접근 차단 IP에 아래의 목록을 복사&붙여넣기 합니다…
지비
#memo 스팸 접근 차단 IP
#more
5.133.+
5.181.+
5.183.+
31.40.+
37.44.+
45.10.+
45.66.+
45.80.+
45.132.+
45.138.+
45.140.+
45.148.+
45.159.+
46.161.+
54.39.+
77.220.+
77.243.+
79.110.+
81.22.+
89.191.+
83.97.+
83.171.+
83.142.+
84.54.+
85.202.+
88.218.+
91.204.+
91.222.+
91.243.+
93.177.+
94.23.+
94.158.+
141.98.+
142.44.+
147.78.+
158.69.+
176.119.+
185.14.+
185.61.+
185.68.+
185.81.+
185.89.+
185.88.+
185.96.+
185.102.+
185.233.+
185.250.+
193.56.+
193.31.+
193.93.+
193.151.+
193.202.+
193.203.+
194.87.+
194.99.+
194.104.+
194.156.+
212.60.+
212.115.+
212.119.+
213.108.+
213.232.+
217.145.+
5.181.+
5.183.+
31.40.+
37.44.+
45.10.+
45.66.+
45.80.+
45.132.+
45.138.+
45.140.+
45.148.+
45.159.+
46.161.+
54.39.+
77.220.+
77.243.+
79.110.+
81.22.+
89.191.+
83.97.+
83.171.+
83.142.+
84.54.+
85.202.+
88.218.+
91.204.+
91.222.+
91.243.+
93.177.+
94.23.+
94.158.+
141.98.+
142.44.+
147.78.+
158.69.+
176.119.+
185.14.+
185.61.+
185.68.+
185.81.+
185.89.+
185.88.+
185.96.+
185.102.+
185.233.+
185.250.+
193.56.+
193.31.+
193.93.+
193.151.+
193.202.+
193.203.+
194.87.+
194.99.+
194.104.+
194.156.+
212.60.+
212.115.+
212.119.+
213.108.+
213.232.+
217.145.+
지비
일단 단어 필터링을 추가해두면 로드비쪽으로는 잘 오지 않더라구요 ^^; (다른 곳을 다 막아놓으면 뚫기는 함…)
이러면 보통 이제 방명록이나 IP 확인이 가능한 스킨 쪽으로 유도되니까 그 상태로 종종 오는 놈들만 스팸 접근 차단 IP에 추가해줍니다…
IP가 앞의 두 칸에만 해당하면 막히기 때문에 이걸로 무고한… () IP를 가진 사람도 막힐 수 있으니 주의!
이러면 보통 이제 방명록이나 IP 확인이 가능한 스킨 쪽으로 유도되니까 그 상태로 종종 오는 놈들만 스팸 접근 차단 IP에 추가해줍니다…
IP가 앞의 두 칸에만 해당하면 막히기 때문에 이걸로 무고한… () IP를 가진 사람도 막힐 수 있으니 주의!
28
플레이리스트에 곡 이름 출력하기
지비
웬만하면… 포타에 추가할텐데 너무… ^^; 어설픈 방식이라 여기만 남겨둬욧
선행: LINK 이 게시글의 수정방식이 적용된 이후에 가능합니다.
bgm.php 의 var done = false; 위의 빈 공간에
function songt() {
var songindex = player.getPlaylistIndex()
if (songindex == '0') {
parent.document.getElementById('songtitle').innerHTML="곡 이름1"
}
if (songindex == '1') {
parent.document.getElementById('songtitle').innerHTML="곡 이름2"
}
if (songindex == '2') {
parent.document.getElementById('songtitle').innerHTML="곡 이름3"
}
}
setInterval(songt, 1000);
을 추가합니다. if (songindex =='숫자') 절을 필요한 만큼 추가해서 재생목록에 들어간 곡의 순서대로 제목을 직접 적어주세요…
index.php를 켜서 원하는 곳에 <div><p id="songtitle"></p></div> 를 넣어줍니다. 원한다면 앞 뒤의 <div>는 삭제해도 괜찮아요! 저는 텍스트 서식을 넣느라 추가한 거라.. ^///^
선행: LINK 이 게시글의 수정방식이 적용된 이후에 가능합니다.
bgm.php 의 var done = false; 위의 빈 공간에
function songt() {
var songindex = player.getPlaylistIndex()
if (songindex == '0') {
parent.document.getElementById('songtitle').innerHTML="곡 이름1"
}
if (songindex == '1') {
parent.document.getElementById('songtitle').innerHTML="곡 이름2"
}
if (songindex == '2') {
parent.document.getElementById('songtitle').innerHTML="곡 이름3"
}
}
setInterval(songt, 1000);
을 추가합니다. if (songindex =='숫자') 절을 필요한 만큼 추가해서 재생목록에 들어간 곡의 순서대로 제목을 직접 적어주세요…
index.php를 켜서 원하는 곳에 <div><p id="songtitle"></p></div> 를 넣어줍니다. 원한다면 앞 뒤의 <div>는 삭제해도 괜찮아요! 저는 텍스트 서식을 넣느라 추가한 거라.. ^///^
지비
#memo 그러나 셔플기능을 넣는 바람에
아예 재생목록을 섞어주는 거였군요? 그래서 재생목록 index로 불러오기를 못하고 그냥 비디오 URL을 인식하는 방법으로 바꿔끼웠어용 혹시 셔플 쓰시는 분들 계시면 참고~~~~
지비
#memo url을 불러오는 방식의 함수
function songt() {
var songindex = player.getVideoUrl()
var playerurl = '재생목록주소'; ``→ 형식은 따로 밑에!
if (songindex == playerurl + '영상아이디') {
parent.document.getElementById('songtitle').innerHTML="곡명"
}
if (songindex == playerurl + '영상아이디') {
parent.document.getElementById('songtitle').innerHTML="곡명"
}
}
playerurl은 재생목록 주소지만 불러오기 될 때의 형식이기 때문에
유튜브주소/watch?list=재생목록ID&v=
이렇게 지정해주셔야 돼요!!
var songindex = player.getVideoUrl()
var playerurl = '재생목록주소'; ``→ 형식은 따로 밑에!
if (songindex == playerurl + '영상아이디') {
parent.document.getElementById('songtitle').innerHTML="곡명"
}
if (songindex == playerurl + '영상아이디') {
parent.document.getElementById('songtitle').innerHTML="곡명"
}
}
playerurl은 재생목록 주소지만 불러오기 될 때의 형식이기 때문에
유튜브주소/watch?list=재생목록ID&v=
이렇게 지정해주셔야 돼요!!
27
위젯형 메인 화면
지비
#memo 경로 바로 밑 / main.php
widgetmain.php를 따로 만들어서 연결해줄 예정이라 main.php를 아래와 같이 바꿉니다 ^^;
중간에 다른 내용이 있는 걸 전부 지우고 include로 연결…
ㅡㅡㅡㅡㅡㅡ
<?php
include_once('./_common.php');
define('_MAIN_', true);
include_once(G5_PATH.'/head.php');
add_stylesheet('<link rel="stylesheet" href="'.G5_CSS_URL.'/main.css">', 0);
?>
<div id="main_body">
<?include(G5_PATH."/widgetmain.php");?>
</div>
<?
include_once(G5_PATH.'/tail.php');
?>
ㅡㅡㅡㅡㅡㅡㅡ
↑이런 모습이 되면 OK (이대로 복붙하셔도 좋아요)
중간에 다른 내용이 있는 걸 전부 지우고 include로 연결…
ㅡㅡㅡㅡㅡㅡ
<?php
include_once('./_common.php');
define('_MAIN_', true);
include_once(G5_PATH.'/head.php');
add_stylesheet('<link rel="stylesheet" href="'.G5_CSS_URL.'/main.css">', 0);
?>
<div id="main_body">
<?include(G5_PATH."/widgetmain.php");?>
</div>
<?
include_once(G5_PATH.'/tail.php');
?>
ㅡㅡㅡㅡㅡㅡㅡ
↑이런 모습이 되면 OK (이대로 복붙하셔도 좋아요)
지비
같은 위치(main.php가 있는 곳)에 LINK 를 다운받아 넣어줍니다. 아보카도 에디션 > 디자인 설정 > 메인화면에서 기본을 선택하면 이제 이 화면이 출력됩니다.
지비
#memo 위젯형 메인 화면 개인 설정
나머지는 직접 수정하시면 OK!!
폰트는 조선명조굴림 (chosungu) 과 G마켓산스 (GmarketSansMedium)로 들어가있어요.
★만 남겨둔 부분에 원하는 걸 넣어주시면 됩니다.
<iframe src="연결 주소" name="frm" style="width:100%;height:100%;" frameborder="0" scrolling="auto"></iframe>
로 원하는 페이지를 연결하거나… <img src="연결 주소">로 이미지를 넣거나…
폰트는 조선명조굴림 (chosungu) 과 G마켓산스 (GmarketSansMedium)로 들어가있어요.
★만 남겨둔 부분에 원하는 걸 넣어주시면 됩니다.
<iframe src="연결 주소" name="frm" style="width:100%;height:100%;" frameborder="0" scrolling="auto"></iframe>
로 원하는 페이지를 연결하거나… <img src="연결 주소">로 이미지를 넣거나…
지비
#memo 구조 설명
#moremain_div - 메인 화면을 전부 감싸는 기본 격자
main_wrap - 한 칸 안에서 위 아래로 정렬할 필요가 있을 때 넣습니다.
ㅡㅡ
main_wide - 가로가 꽉 차게,
main_small - 가로가 반 정도 차도록
main_small2 - main_wrap 안에 들어있을 때 딱 맞는 가로가 됩니다.
ㅡㅡ
height100 - 높이가 100px가 되도록
같은 용도로 height150, height200, height300, height400이 있습니다.
ㅡㅡ
st_main - 메인으로 쓸 칸의 디자인 속성
st1 - 첫번째 디자인 속성
st2, st3, st4 - 동일합니다. 원하는 스타일을 넣어서 칸마다 다르게 설정해주세요
ㅡㅡ
<div class="main_div">
<div class="main_wide height300 st1"></div></div> <이런 식으로 칸을 짜줍니다…
▲ 가로를 전부 채우고, 높이는 300px인 1번 스타일로 정의된 칸을 만듭니다.
여쭤봐주신 분이 계셔서 정리해둔 거라…^///^
아마 개인설정에 맞게 많이 고쳐야겠지만 필요하시다면 편하게 써주세요!!!
지비
#memo 아보카도 에디션에서 관리 가능한 페이지를 메뉴 없이 출력
LINK
위 파일을 다운받아서 아보카도 에디션 > bbs 폴더 안에 넣습니다.
iframe으로 (갠홈주소)/bbs/content2.php?co_id=(페이지명) 을 걸어줍니다.
ex)
<iframe src="갠홈주소/bbs/content2.php?co_id=widget1" name="frm" style="width:100%;height:100%;" frameborder="0" scrolling="auto"></iframe>
▲ 저는 이런 식으로 연결해서 메인 화면의 안내사항을 아보카도 에디션의 에디터로 수정하고 있어요~
~.~ 개인 설정이 달라 조금 다르게 들어갈지도 모르지만~~~ 적당히 수정해서 써주세요!
위 파일을 다운받아서 아보카도 에디션 > bbs 폴더 안에 넣습니다.
iframe으로 (갠홈주소)/bbs/content2.php?co_id=(페이지명) 을 걸어줍니다.
ex)
<iframe src="갠홈주소/bbs/content2.php?co_id=widget1" name="frm" style="width:100%;height:100%;" frameborder="0" scrolling="auto"></iframe>
▲ 저는 이런 식으로 연결해서 메인 화면의 안내사항을 아보카도 에디션의 에디터로 수정하고 있어요~
~.~ 개인 설정이 달라 조금 다르게 들어갈지도 모르지만~~~ 적당히 수정해서 써주세요!
지비
#memo 아보카도 에디션 게시판을 메뉴 없이 출력
LINK
위 파일을 다운받아서 아보카도 에디션 > bbs 폴더 안에 넣습니다.
iframe으로 (갠홈주소)/bbs/board2.php?bo_table=(게시판 테이블명) 을 걸어줍니다.
ex)
<iframe src="~갠홈주소~/bbs/board2.php?bo_table=banner" name="frm" style="width:100%;height:100%;" frameborder="0" scrolling="auto"></iframe>
배너 게시판은 이 형식으로 연결되어있답니다 >_<
위 파일을 다운받아서 아보카도 에디션 > bbs 폴더 안에 넣습니다.
iframe으로 (갠홈주소)/bbs/board2.php?bo_table=(게시판 테이블명) 을 걸어줍니다.
ex)
<iframe src="~갠홈주소~/bbs/board2.php?bo_table=banner" name="frm" style="width:100%;height:100%;" frameborder="0" scrolling="auto"></iframe>
배너 게시판은 이 형식으로 연결되어있답니다 >_<
지비
#memo 이미지 꽉 차게 넣기
div들에 조금씩 패딩(안쪽으로 여백)을 넣어둬서 그냥 이미지를 넣으면 가장자리가 좀 비게 됩니다 ^^;
<img src="이미지 주소" style="transform:scale(1.2);"> 이런 식으로 넣으면 꽉 차게 들어가니 참고!!
<img src="이미지 주소" style="transform:scale(1.2);"> 이런 식으로 넣으면 꽉 차게 들어가니 참고!!
지비
#memo 추가...
이게 제 PC에만 그런지 모르겠으나 ^^;
main.php로 연결하면 오류가 생기기도 하는 모양이더라구요
Unsafe~ Uncaught로 시작하는 오류인데 iframe 사용하면서 생기는 오류라고 추측은 하고 있지만 해결법은 알 수 없어서… () 간단하게 제가 해결한 방식을 남겨두고 갑니다 ^vㅜ
-> main.php를 다른 이름으로 변경합니다. main2.php라든가…
-> head.php 랑 head.sub.php 랑 index.php(모바일 링크)에서 get_main_link() 를 찾아 '도메인주소/main2.php'; 로 수정해줍니다
-> 이러면 오류없이 나오더라구요
main.php로 연결하면 오류가 생기기도 하는 모양이더라구요
Unsafe~ Uncaught로 시작하는 오류인데 iframe 사용하면서 생기는 오류라고 추측은 하고 있지만 해결법은 알 수 없어서… () 간단하게 제가 해결한 방식을 남겨두고 갑니다 ^vㅜ
-> main.php를 다른 이름으로 변경합니다. main2.php라든가…
-> head.php 랑 head.sub.php 랑 index.php(모바일 링크)에서 get_main_link() 를 찾아 '도메인주소/main2.php'; 로 수정해줍니다
-> 이러면 오류없이 나오더라구요
지비
위젯형 메인 화면 설정 후에 홈에 접속하면 대체 페이지(닷홈 같은 경우에는 세팅 완료 페이지 혹은 닷홈 홈페이지로 연결됩니다)가 나오는 경우 이 오류일 가능성이 있으니 참고!!
25
배경에 물결 효과 넣기
지비
참고 LINK
1. 아래 파일을 다운받아 편한 경로에 넣습니다.
LINK
2. head.sub.php의 <? if($config['cf_favicon']) { ?> 위에
<script src="https://aja x.goog leapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="방금 다운받은 jquery.ripples.js의 경로"></script>
<script>
$('html').ripples({
resolution: 125,
dropRadius: 30,
perturbance: 0.004,
});
</script>
<style>
canvas {
width: -webkit-fill-available;
height: -webkit-fill-available;
}
</style>
를 넣습니다. !!리플에서 링크 걸리는 것 때문에 aja✔x.goog✔lea <이렇게 띄어뒀으니 저부분 띄어쓰기는 지워주셔야해요!!!
resolution, dropRadius, perturbance를 편한만큼 조정합니다…
이걸 전에 했을 때는 따로 div를 만들어서 배경처럼 깔아줬던 것 같은데 ㅠㅅㅠ 다시 해보려니 그 방법이 먹히질 않더라구요 sad…
23
이미지 축소 시 깨짐 방지
지비
#memo css > _manager.css.php
이 파일은~ 아보카도 에디션 전체에 연결되는 스타일 양식입니다아
빈 곳 아무데나
img {
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
}
를 삽입합니다 ~.~
갠홈에 업로드 되는 모든 이미지를 대상으로 하기 때문에… 특정 부분만 지정해서 넣고 싶다면 다른 css파일에 넣거나 img 뒤에 다른 속성값을 붙이거나… 하면 OK
※이쪽은 선명하게 만들면서 도트를 뭉개지 않는 방향이기 때문에~ 없는 쪽이 부드러울 때도 있으니 참고
빈 곳 아무데나
img {
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
}
를 삽입합니다 ~.~
갠홈에 업로드 되는 모든 이미지를 대상으로 하기 때문에… 특정 부분만 지정해서 넣고 싶다면 다른 css파일에 넣거나 img 뒤에 다른 속성값을 붙이거나… 하면 OK
※이쪽은 선명하게 만들면서 도트를 뭉개지 않는 방향이기 때문에~ 없는 쪽이 부드러울 때도 있으니 참고
22
별똥별 효과
지비
참고: LINK
SCSS 변환 사이트에서 body 빼고 변환한 뒤 적용
SCSS 변환 사이트에서 body 빼고 변환한 뒤 적용
지비
#memo CSS 변환
한 김에 이것저것 수정해서 화면에 꽉 차게 만든 코드입니다> LINK
여쭤본 분이 계셨던 김에 백업해요~! ^///^ css폴더 안의 _manager.css.php나 style.css 밑의 적당한 공간에 넣어주세요~ 복사 전 맨 윗줄에 적어둔 안내사항을 참고해서 수정해주셔야 해요~!
여쭤본 분이 계셨던 김에 백업해요~! ^///^ css폴더 안의 _manager.css.php나 style.css 밑의 적당한 공간에 넣어주세요~ 복사 전 맨 윗줄에 적어둔 안내사항을 참고해서 수정해주셔야 해요~!
지비
#memo HTML에 적용
head.php의 <!--헤더 영역--> 바로 위에
<div class="night">
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
</div>
를 삽입합니다.
<div class="shooting_star"></div> 는 20개까지 출력 가능합니다.
<div class="night">와 </div> 사이에 원하는 갯수만큼 복사붙여넣기 해주세요~
<div class="night">
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
</div>
를 삽입합니다.
<div class="shooting_star"></div> 는 20개까지 출력 가능합니다.
<div class="night">와 </div> 사이에 원하는 갯수만큼 복사붙여넣기 해주세요~
20
텍스트 안에 이미지/그라디언트 넣기
지비
뭐라고 해야하나… 텍스트 모양대로 클리핑시키는 방법?
background 로 이미지나 그라디언트를 지정해준 다음
-webkit-background-clip:text;
color:transparent;
로 설정해주면 텍스트 색상 대신 배경이 텍스트 모양대로 들어가용
background 로 이미지나 그라디언트를 지정해준 다음
-webkit-background-clip:text;
color:transparent;
로 설정해주면 텍스트 색상 대신 배경이 텍스트 모양대로 들어가용
지비
#memo 예를 들어서
제목2- 홀로- 이런 식으로 -홀로 -2제목
19
눈 오는 효과
지비
참고 LINK
지비
모든 배경 효과는 아보카도 에디션 > head.php 에서 <!-- 헤더 영역 --> 전에 넣으면 무난하게 적용돼요~!
보통 사운드 효과 </script> 밑과 헤더영역 사이에 넣는 편이예요
보통 사운드 효과 </script> 밑과 헤더영역 사이에 넣는 편이예요
지비
#memo 해무님에게 알려드린 김에 백업! 넣는 법
#more
우선 저는 head.php 에서 <!--헤더 영역--> 위에
<div class="snow_board">
<div class="snow"></div> x n개
</div>
↑이렇게 넣어뒀어요! 안 그러면 빠져나가길래…
먼저 이건 SCSS를 이용한 CSS기 때문에 변환부터 해줍니다
SCSS > CSS 변환기: LINK
여기서 변환한 뒤 snow.css 같은 파일을 하나 만들어서 안에 쭉 붙여넣기 해주신 뒤 head.sub에 연결해주면 OK
※주의!
body는 갠홈 자체에 걸리기 때문에 snow.css에서 꼭! 빼주셔야돼요
body는 빼주시되,
.snow_board {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
filter: drop-shadow(0 0 10px white);
}
↑요걸 넣어주시면 끝!
<div class="snow_board">
<div class="snow"></div> x n개
</div>
↑이렇게 넣어뒀어요! 안 그러면 빠져나가길래…
먼저 이건 SCSS를 이용한 CSS기 때문에 변환부터 해줍니다
SCSS > CSS 변환기: LINK
여기서 변환한 뒤 snow.css 같은 파일을 하나 만들어서 안에 쭉 붙여넣기 해주신 뒤 head.sub에 연결해주면 OK
※주의!
body는 갠홈 자체에 걸리기 때문에 snow.css에서 꼭! 빼주셔야돼요
body는 빼주시되,
.snow_board {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
filter: drop-shadow(0 0 10px white);
}
↑요걸 넣어주시면 끝!
18
Animate 스타일 시트 추가
지비
엪티님이 적용하신 거 좋아보이길래~~~ 넣고 여기저기 효과를 좀 넣어놨어요
참고는 여기 LINK
참고는 여기 LINK
지비
#memo 속성값
animate__animated (기본)
animate__(애니메이션명)
animate__infinite (무한 반복)
다른 css 속성에 직접 적용할 때는
animation-name: (애니메이션명);
animation-duration: 2s; ←꼭 추가해주기
animate__(애니메이션명)
animate__infinite (무한 반복)
다른 css 속성에 직접 적용할 때는
animation-name: (애니메이션명);
animation-duration: 2s; ←꼭 추가해주기
지비
서버를 건드는 작업이라 혹시 모르니까 ``백업하고 시작하는 거 잊지 말기!
당연하지만 아보카도 퍼스널+퍼스널에 적용되는 로드비 스킨 기준이예요~~
참고 LINK
주소 끊어쓰기 귀찮아서 걍 티슷에 씀 → LINK