질문이 있습니다. | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

질문이 있습니다.

[왕초보] 웹개발 종합반 v0

4주차

손*석

・

추천

・

조회수

답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

강의중 기존에 있던 추억 저장하기버튼을 class를 통해서 토글기능을 만들어줬는데 파이어베이스를 추가하고 type=module도 추가하면서 id로 바꿔주니까 토글의 기능은 하지만 누를때마다 화면이 흔들?리는 듯한 느낌이 있습니다 강의중 영상도 마찬가지 입니다 왜 그럴까요?

나만의 추억앨범 << 이게 들어있는 칸 전체가 움직인는거같아요

을 눌러 코드박스를 만들어 보세요.

Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!

작성한 코드 및 에러 메세지

<!DOCTYPE html>

<head>

<link

href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"

rel="stylesheet"

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"

crossorigin="anonymous"

<style>

.mytitle {

background-image: url("https://images.unsplash.com/photo-1511992243105-2992b3fd0410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80");

height: 250px;

color: white;

/* 구역안의 내용물을 어떻게 정렬할것인지에 따라 column, row 로 바꿔사용*/

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

.mytitle > button {

background-color: transparent;

color: white;

width: 150px;

height: 50px;

border: 1px solid white;

border-radius: 5px;

margin-top: 20px;

}

.mycards {

width: 1200px;

margin: 30px auto 0px auto;

}

.postingbox {

width: 500px;

margin: 30px auto 0px auto;

padding: 20px;

box-shadow: 0px 0px 3px 0px blue;

border-radius: 5px;

}

.postingbutton {

display: flex;

flex-direction: row;

align-items: center;

justify-content: center;

}

.postingbutton > button {

margin: 5px;

}

</style>

// Firebase SDK 라이브러리 가져오기

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";

import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

import {

collection,

addDoc,

} from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

// Firebase 구성 정보 설정

const firebaseConfig = {

apiKey: "AIzaSyDvqOAD63A5M-QNMILUwy7sWlVV7h7i2gQ",

authDomain: "sparta-31f56.firebaseapp.com",

projectId: "sparta-31f56",

storageBucket: "sparta-31f56.appspot.com",

messagingSenderId: "71365977063",

appId: "1:71365977063:web:668bf73d964f6263679342",

measurementId: "G-6BTK1GXF5B",

};

// Firebase 인스턴스 초기화

const app = initializeApp(firebaseConfig);

const db = getFirestore(app);

$("#make").click(async function () {

let image = $("#image").val();

let title = $("#title").val();

let content = $("#content").val();

let date = $("#date").val();

let doc = { image: image, title: title, content: content, date: date };

await addDoc(collection(db, "콜렉션이름"), doc);

window.location.reload();

});

$("#toggle").click(async function () {

$("#post").toggle();

});

let url = "http://spartacodingclub.shop/sparta_api/seoulair";

fetch(url)

.then((res) => res.json())

.then((data) => {

let mise = data["RealtimeCityAir"]["row"][0]["IDEX_NM"];

$("#mise").text(mise);

});

let docs = await getDocs(collection(db, "콜렉션이름"));

docs.forEach((doc) => {

let row = doc.data();

console.log(row);

let image = row["image"];

let title = row["title"];

let content = row["content"];

let date = row["date"];

let temp = `

<img

src="${image}"

class="card-img-top"

alt="..."

<h5 class="card-title">${title}</h5>

<p class="card-text">${content}</p>

</div>

</div>

</div>`;

$("#card").append(temp);

});

</script>

</head>

<body>

</div>

<input

type="email"

class="form-control"

id="image"

placeholder="앨범 이미지"

</div>

<input

type="email"

class="form-control"

id="title"

placeholder="앨범 제목"

</div>

<input

type="email"

class="form-control"

id="content"

placeholder="앨범 내용"

</div>

<input

type="email"

class="form-control"

id="date"

placeholder="앨범 날짜"

</div>

</div>

<img

src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"

class="card-img-top"

alt="..."

</div>

</div>

<img

src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"

class="card-img-top"

alt="..."

</div>

</div>

<img

src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"

class="card-img-top"

alt="..."

</div>

</div>

<img

src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"

class="card-img-top"

alt="..."

</div>

</div>

</body>

</html>

댓글 알림