-
글쓴이글
-
2021년 7월 15일 11:53 #11600
이종욱참가자안녕하세요. firebase serve 화면에 사각박스 등 이미지 관련 내용들이 강의와 다르게 표시됩니다. 카톡에 보내드린 이미지가 그것 입니다. 잘못된 부분을 지적 부탁드립니다. 감사합니다.
<!DOCTYPE html>
<html lang="kr"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="main.css" rel="stylesheet">
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script></head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-3">
<div class="product">
<div class="thumbnail" style="background-image: url('https://via.placeholder.com/350')"></div>
<div class="flex-grow-1 p-4">
<h5 class="title">아기다스 신발</h5>
<p class="date">2030년 1월 8일</p>
<p class="price">20000원</p>
<p class="float-end">?0</p>
</div>
</div>
</div><script src="/__/firebase/8.7.1/firebase-app.js"></script>
<script src="/__/firebase/8.7.1/firebase-auth.js"></script>
<script src="/__/firebase/8.7.1/firebase-firestore.js"></script>
<script src="/__/firebase/8.7.1/firebase-storage.js"></script>
<script>var firebaseConfig = {
apiKey: "AIzaSyCYo5aAJkQq3QmCDqhTK9RJBUGhWmYD-e8",
authDomain: "house-8c3e8.firebaseapp.com",
projectId: "house-8c3e8",
storageBucket: "house-8c3e8.appspot.com",
messagingSenderId: "165847282502",
appId: "1:165847282502:web:b0336b9271243a92fceb47",
measurementId: "G-74K9YLM1B2"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script>const db = firebase.firestore();
db.collection('product').get().then((결과)=>{
결과.forEach((doc) => {
console.log(doc.data());
var 템플릿 = '<div class="product">
<div class="thumbnail" style="background-image: url('https://via.placeholder.com/350')"></div>
<div class="flex-grow-1 p-4">
<h5 class="title">${doc.data().창호}</h5>
<p class="date">2030년 1월 8일</p>
<p class="price">20000원</p>
<p class="float-end">?0</p>
</div>
</div>';
$('.container').append(템플릿)
})
})
</script>
</body>
</html>2021년 7월 15일 14:00 #11612
codingapple키 마스터이거 복사붙여넣기하니까 저는 잘 나오는데요
css도 main.css파일에 잘 복사붙여넣기하셨나요?
크롬콘솔창에 에러는 안뜨시나요?
-
글쓴이글
- 답변은 로그인 후 가능합니다.