그누보드 생초짜입니다 도와주세요~
본문
그누보드 설치하고 사이트를 만들고 있는데
메인 효과를 내려고 http://www.blueb.co.kr/?c=1/4&uid=4160 여기 들어가서
다운을 받아 적용하려합니다.
그누보드 테마 내에 CSS는 있으니 두고 JS 폴더 만들고
CSS, JS 폴더에 각각 파일 넣고 메인에 소스 붙여넣기 했습니다.
저렇게 하고도 바로 안돼서
head_sub 파일 아래쪽에는 이렇게 넣었고요
<script src="<?php echo G5_THEME_JS_URL ?>/full-page-scroll.min.js"></script>
<script src="<?php echo G5_THEME_CSS_URL ?>/full-page-scroll.min.css"></script>
아래는 메인소스입니다. index.php 있는 폴더내에도 혹시몰라서 css,js파일을 복사해 봤습니다.
<!DOCTYPE html>
<html>
<head>
<title>Full page scroll</title>
<link rel="stylesheet" type="text/css" href="full-page-scroll.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Pacifico:400' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="jquery.fullpage-scroll.js"></script>
<style type="text/css">
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.scroll-container {
width: 100%;
height: 100%;
position: relative;
margin: 0;
padding: 0;
}
.scroll-container section {
width: 100%;
height: 100%;
}
.dots {
z-index: 1;
list-style: none;
padding: 0;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.dots li a {
padding: 10px;
width: 4px;
height: 5px;
display: block;
}
.dots li a:before {
content: '';
position: absolute;
width: 8px;
height: 8px;
background: rgba(255, 255, 255, 0.48);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-webkit-transition: -webkit-transform 0.3s ease, background-color 0.3s ease;
-moz-transition: -moz-transform 0.3s ease, background-color 0.3s ease;
-ms-transition: -ms-transform 0.3s ease, background-color 0.3s ease;
-o-transition: -o-transform 0.3s ease, background-color 0.3s ease;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.dots li a.active:before {
content: '';
background-color: #FFFFFF;
width: 14px;
height: 14px;
margin-top: -4px;
left: 7px;
background-color: white;
-webkit-transform: scale(1.0);
-moz-transform: scale(1.0);
-ms-transform: scale(1.0);
-o-transform: scale(1.0);
transform: scale(1.0);
}
.dots-right {
left: 25px;
}
.dots-left {
right: 10px;
}
.section1 {
background-color: #7DBCD4;
}
.section2 {
background-color: #98C19F;
}
.section3 {
background-color: #A199E2;
}
.section4 {
background-color: #CC938E;
}
.section5 {
background-color: #D2C598;
}
section div {
font-family: 'Open Sans';
font-style: normal;
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
span {
font-size: 4em;
font-style: normal;
color: #fff;
}
</style>
</head>
<body>
<div id="main" class="scroll-container">
<section class="section1">
<div>
<span>Page #1</span>
</div>
</section>
<section class="section2">
<div>
<span>Page #2</span>
</div>
</section>
<section class="section3">
<div>
<span>Page #3</span>
</div>
</section>
<section class="section4">
<div>
<span>Page #4</span>
</div>
</section>
<section class="section5">
<div>
<span>Page #5</span>
</div>
</section>
</div>
<script src="full-page-scroll.js"></script>
<script type="text/javascript">
new fullScroll({
displayDots: true,
dotsPosition: 'left',
animateTime: 0.7,
animateFunction: 'ease'
});
</script>
</body>
</html>
저렇게 해서 들어가보면 아래처럼 나오는데 어떻게 해야 할까요?
뭐 처음 그누보드 설치한 후 따로 불러와줘야 되는 스크립트 같은게 있는건가요?
경로 지정을 잘 못 해서 저렇게 나오는 걸까요?
지금 한창 공부하면서 만드는 중이라 초보의 시선에서 가르쳐 주시면 감사하겠습니다. ㅎㅎ
답변 1
확인 주소가 있지 않는 이상 정확하게 문제를 판단 하여 조언을 드리기에는 어려운 점이 많습니다 정확한 답변을 원하시면 사이트 내용을 확일 할 수 있는 주소를 첨부해 주셔야 합니다.
답변을 작성하시기 전에 로그인 해주세요.
