아보카도에 움직이는 배경 넣기

아보카도에 움직이는 배경 넣기

QA

아보카도에 움직이는 배경 넣기

본문

안녕하세요!

https://codepen.io/GhostRider/pen/ZEeYxE 의 효과를 개인 홈페이지 배경에 넣고 싶은데요.

완전 초보라서 이렇게 하는 게 맞는 건지 궁금합니다.

 

2083619900_1704786575.3748.png

이 내용을 복사해 메모장으로 만들고, 파일명을 confetti.css로 만들어 css 폴더에 넣고

 

2083619900_1704786630.2655.png

마찬가지로 전문을 복사해 메모장으로 만들어 confetti.js로 만들고 js 폴더에 넣었습니다.

 

질문 1

그다음 CSS는 head.sup.php 파일에 아래 소스를 넣는 게 맞을까요?

<link rel="stylesheet" href="홈페이지 주소/css/confetti.css"> 

 

질문 2

js는 head.php 파일에 아래처럼 넣었습니다.

<script src="홈페이지 주소/js/confetti.js"></script>

 

질문 3

위에 두 개가 맞다면, 적어둔 소스를 head.sup.php 와 head.php 파일의 각각 어느 위치에 넣어야 하는지도 궁금합니다ㅠㅠ

참고용으로 php 파일 함께 업로드합니다. 

https://drive.google.com/drive/folders/1xwgLqo510HLxiYfXbZOUQfK2hMndUwEN?usp=drive_link

(가문의 명예를 걸고 결코 아무 바이러스도 없는 클린한 파일입니다.)

 

2083619900_1704787237.7071.png

질문 4

head.php 파일에 위에 저 html 코드도 넣어야 하는 것 같은데, 이건 어디에 넣어야 하는 걸까요?

 

정말 초보라 모르는 게 많습니다.. 도와주세요!!

이 질문에 댓글 쓰기 :

답변 2

네 다 맞습니다.

모두 head.sup.php 에 넣으시면 됩니다.

네 js, css 모두 head.sup.php에 넣으면 되세요.

마지막 html에 들어있는 스크립트 코드도 head.sup.php에 넣으시면 됩니다.

근데 다른 스크립트들과 충돌날 수 있으니 한번 적용해보시고,  뭔가 안된다 싶으면 이유를 찾아야합니다.

아 html에 코드에 있는 <div id="confetti"></div> 이건 원하는 페이지에 넣어야 하구요.

저 질문 하나만 더 드릴게요!
<div id="confetti"></div>
이걸 head.sup.php 에 넣었을 때는 배경에 뜨는데 index.php에 넣었을 때는 뜨지 않습니다 ㅠㅠㅠ

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

<?php
include_once('./_common.php');
define('_INDEX_', true);
$main_link=get_main_link();
if (G5_IS_MOBILE) {
goto_url($main_link);
}
include_once('./head.sub.php');
add_stylesheet('<link rel="stylesheet" href="'.G5_CSS_URL.'/index.css">', 0);
?>


<? if($config['cf_bgm']) { // 배경음악 출력부분 ?>
<div id="site_bgm_box">
<iframe src="./bgm.php?action=play" name="bgm_frame" id="bgm_frame" border="0" frameborder="0" marginheight="0" marginwidth="0" topmargin="0" scrolling="no" allowTransparency="true" allow="autoplay; encrypted-media"></iframe>
</div>
<? } ?>

<!-- 콘텐츠 시작 -->
<div id="wrapper">
<iframe src="<?=$main_link?>" name="frm_main" id="main" border="0" frameborder="0" marginheight="0" marginwidth="0" topmargin="0" scrolling="auto" allowTransparency="true"></iframe>

</div>

<script>
$(document.body).on("keydown", this, function (event) {
if (event.keyCode == 116) {
document.getElementById('main').contentDocument.location.reload(true);
return false;
}
});
</script>

<?php
include_once(G5_PATH.'/tail.sub.php');
?>


ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

여기에서 어디에 <div id="confetti"></div> 를 넣어야 할까요??ㅠㅠㅠ
맨 위에도 넣어봤는데 뜨질 않습니다..

혹시 콘텐츠시작에  id="wrapper" 이 값에 백그라운드 색상이나 z-index값이 css로 들어가있나요?

confetti 여기 css값에 z-index가 -1이기에 맨 뒤로 가 있는 상황이거든요.

 id="wrapper" 여기에 백그라운드나 z-index가 있다면 가려져서 안보이는 상황일 수 있어요.

일단 실제 url을 보면.. 더 확실히 알 수 있을거같긴하네요.

주사쟝님..! 아래 댓글이 안 달려서 이걸 확인하시면 여기에 댓글 부탁드려요!! ㅠㅠ

z-index를 1로 했더니 뜨긴..뜨는데..!!!
이번엔 효과가 앞에 있어서 그런지 메뉴나 관리 버튼이 안 눌립니다!!!!
하.... 왜이러는 걸까요??ㅠㅠ

답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT