강의

N
챌린지

멘토링

N
클립

커뮤니티

Cộng đồng Hỏi & Đáp của Inflearn

Hình ảnh hồ sơ của ckrnckr128059
ckrnckr128059

câu hỏi đã được viết

Bộ sưu tập trang web phản hồi (Architecture Agency)

Phát triển giao diện điều hướng di động - Tạo anchor 'a' và cuộn mượt đến các section

파일 내 index.html에 대한 오류

Viết

·

254

·

Đã chỉnh sửa

1

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>DesignWokrs Agency</title>
	<script src="/js/jquery-2.1.4.js"></script>
	<!-- page scroll Effects js＆css -->
	<script src="./js/velocity/modernizr.js"></script>
	<script src="/js/velocity/velocity.min.js"></script>
	<script src="./js/velocity/velocity.ui.min.js"></script>
	<script src="./js/velocity/main.js"></script>
	<link rel="stylesheet" href="./js/velocity/velocity.css">
	<!-- Smooth scrolling -->
	 <!-- <script src="./js/jquery.scrollTo.min.js"></script> -->
	<!-- custom js＆css -->
	<script src="./custom.js"></script>
	 <!-- 순서가 중요함 pc버전인 스타일 css가 먼저우선시 되야함 -->
	<link rel="stylesheet" href="./style.css">
	<!-- 모바일 부분만 반응 css -->
	<link rel="stylesheet" href="./responsive.css">
	
</head>
											<!-- 애니메이션 속성들  -->
<!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax -->

<body data-hijacking="on" data-animation="rotate">
	
    <div class="container"> 
		<section class="cd-section visible" id="home">
			<div>
				<div class="content">
				<img src="./images/temp-section-01.jpg">
			</div>
			</section>

	<section class="cd-section" id="about">
		<div>
			<div class="content">
				<img src="./images/temp-section-02.jpg">
			</div>
		</div>
	</section>

	<section class="cd-section" id="project">
		<div>
			<div class="content">
				<img src="./images/temp-section-03.jpg">
			</div>
		</div>
	</section>
	
	<section class="cd-section" id="plan">
		<div>
			<div class="content">
				<img src="./images/temp-section-04.jpg">
			</div>
		</div>
	</section>

	<section class="cd-section" id="awards">
		<div>
			<div class="content">
				<img src="./images/temp-section-05.jpg">
			</div>
		</div>
	</section>

	<section class="cd-section" id="location">
		<div>
			<div class="content">
				<img src="./images/temp-section-06.jpg">
			</div>
		</div>
	</section>

	<section class="cd-section" id="contact">
		<div>
			<div class="content">
				<img src="./images/temp-section-07.jpg">
			</div>
		</div>
	</section>

	<header>
		<div class="gnb-inner">
		<div class="logo">
			<a href="#none"><img src="images/logo.png"></a>
		</div>
		<!-- 네비게이션 부분 -->
		<div class="gnb">
			<div class="menu">
			<a href="#home">Home</a>
			<a href="#about">About</a>
			<a href="#project">Project</a>
			<a href="#plan">Plan & History</a>
			<a href="#awards">Awards</a>
			<a href="#location">Location</a>
			<a href="#contact">Contact</a>
			</div>
			<div class="slogan">We design places, not projects.</div>
		  </div>
		  <!-- 햄버거 버튼 -->
		  <div class="trigger">
			<span></span>
			<span></span>
			<span></span>
		  </div>
		</div>
	</header>
 </div>

	<nav>
		<ul class="cd-vertical-nav">
			<li><a href="#0" class="cd-prev inactive">Next</a></li>
			<li><a href="#0" class="cd-next">Prev</a></li>
		</ul>
	</nav> <!-- .cd-vertical-nav -->
</body>
</html>
>/* pc버전 */
/* Google Web Font : Montserrat */
@import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap');
@import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap');

/* FontAwesome CDN 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

/* Reset CSS */
* {box-sizing: border-box;}
ul { list-style: none;}
a {text-decoration: none;}

/* Default CSS */

body{ 
    font-family: 'Montserrat', sans-serif;
    color: #222;
    font-size: 15px;
    margin: 0;
    height: 100vh;
    background-color: #fff;

}

/* Entire Layout(전체적인 레이아웃) */
.cd-section {
    height: 100vh;
}
.cd-section > div {
    height: 100%;
    position: relative;
}
.content {
    background-color: #ddd;
    position: absolute;
    /* 연산함수 calc를 이용하여 섹션내에 삐저나오지 않고 들어오게함 */
    width: calc(100% - 40px);
    height: calc(100% - 80px);
    left: 20px;
    bottom: 20px;
    /* 넘치는 부분 끊기 */
    overflow: hidden;

}
/* Header */
header {
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
}
.gnb-inner {
    /* bd+tab  =보더 생성 */
    /* border: 1px solid #000; */
    width: calc(100% - 40px);
    margin: auto;
    height: 60px;
    /* 높이값만큼 주면 중앙 정렬 */
    line-height: 60px;
}
.logo {
    float: left;
}
.gnb {
    float: right;
}
.menu {
   display: block;
   
}
.menu a{
    
}
.gnb a {}
.slogan { 
    font-size: 16px;
    font-style: italic;
}
.trigger {
    display: none;
  
 
$(function() {
    /* Trigger */
    $('.trigger').click(function(){
     $(this).toggleClass('active')
     $('.gnb').toggleClass('active')
 })
    // 중복되는 선택자 콤마로 이어감 
    $('section, .menu a').click(function(){
        // 모바일에서 여백 섹션을 눌렀을 때 서브메뉴가 안으로 들어감
        $('.gnb').removeClass('active')
    })
    
    // // Smooth Scrolling
    // $('.menu a').click(function(e){
    //     // ||:쉬프트 +원표시  0.9초동안 슬라이딩 
    //     $.scrollTo(this.hash || 0, 900);
    // })
/* 모바일전용 */
/*pc min:최소너비 */
/* 모바일 기준 최대넓이 768을 넘지 못한다 */
@media (max-width: 768px) {
    /* Entire Layout(전체적인 레이아웃) */
    .cd-section {
        height: auto;
    }
    .cd-section > div {
        height: auto;
    
    }
    .content {
        position: static;
        width: 100%;
        height: 100%;
        left: 20px;
        bottom: 20px;
    }

    /* Header */
    .menu {
        display: block;
        
    }
    .slogan {
        display: none;
    }
    .gnb {
        background-color: #fff;
        position: fixed;
        top: 0;
        right: -270px;
        width: 250px;
        height: 100vh;
        /* 왼쪽,위아래,퍼짐정도 */
        box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1);
        transition: 0.5s;
    }
    .gnb.active {
        right: 0;
    }

    .menu {
        line-height: 40px;
        /* 메뉴를 전체적으로 내림 */
        margin-top: 60px;
    }
    .menu a {
        text-align: right;
        display: block;
        padding-right: 20px;
        color: #000;
        font-size: 20px;
    }

    /* Trigger */
    .trigger{
        display: block;
        width: 24px;
        height: 14px;
        position: absolute;
        right: 20px;
        top: 20px;
    }
    .trigger span {
        position: absolute;
        height: 1px;
        width: 100%;
        background-color: #000;
        transition: 0.5s;
    }
    .trigger span:nth-child(1) {
        top: 0;
    }
    .trigger span:nth-child(2) {
        top: 50%;    
        width: 80%;
    }
    .trigger span:nth-child(3) {
        top: 100%;
    }
    .trigger.active span:nth-child(1) {
        top: 50%;
        transform: rotate(45deg);
    }
    .trigger.active span:nth-child(2) {
        top: 50%;    
        width: 80%;
        opacity: 0;
    }
    .trigger.active span:nth-child(3) {
        top: 50%;
        transform: rotate(-45deg);
    }
}

비쥬얼 스튜디오 오픈 서버로는 현재까지 작업 내용이 잘 표시되지만 폴더내에서 index 클릭 시 메인페이지 이미지가 표시 되지 않고 모바일로 변경시 사진과 같은 오류 문구와 함께
햄버거 버튼에 적용했던 효과들이 작동되지않습니다.

HTML/CSSjquery웹-디자인반응형-웹

Câu trả lời 1

1

codingworks님의 프로필 이미지
codingworks
Người chia sẻ kiến thức

오류 메세지는 저도 처음보는거라 알기 어렵습니다.

이미지가 안나오거나 하는건 index.html의 경로가 바뀌었으니까 index 파일 내에 모든 링크도 바뀌어야 합니다.

예를들어 ./images/aaa.png 라고 하면 안됩니다. 그냥 images/aaa.png 라고 해야 합니다.

js 파일 링크로 js/custom.js 라고 해야 합니다.

index 파일 내에 모든 경로 바꿔주세요.

ckrnckr12님의 프로필 이미지
ckrnckr12
Người đặt câu hỏi

감사드립니다!

Hình ảnh hồ sơ của ckrnckr128059
ckrnckr128059

câu hỏi đã được viết

Đặt câu hỏi