* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
4강 기능 잘 가져다 쓰기편에서 강사님께서 div에 class='flex-row ' 넣으셨을 때 버킷리스트가 가로로 바뀌었다가 wrap까지 넣으면 세로로 바뀌면서 두 줄로 나눠지던데
저는 계속 세로로 한 줄입니다 가로로 돌아가지도 않고 두 줄로 나눠지지도 않고 쭉 세로로 한 줄입니다
일단 다음거 해보고 안되면 질문 남기기 해야지 했는데 스탬프 넣는 스크립트를 복사해서 붙여 넣어 봤지만 아무것도 안 뜹니다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>2024 버킷리스</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Hahmlet:wght@300&display=swap");
*{
font-family: "hahmlet", serif;
}
.bg {
background-image: url('https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/bucketList/bg-grid.png');
background-position: center;
background-size: cover;
margin: auto;
width: 360px;
}
.title {
background-color: skyblue;
border-radius: 10px;
color: lightgoldenrodyellow;
text-align: center;
padding: 4px 14px;
}
.bucket {
width: 160px;
height: 160px;
background-position: center;
background-size: cover;
color: black }
.img1 {
background-image: url('https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/bucketList/bucket-red.png');
}
.img2 {
background-image: url('https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/bucketList/bucket-lightred.png');
}
.msg {
margin: -5px 0 15px;
}
.center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
</head>
<body class="bg center">
<h1 class="title">2024 버킷리스트</h1>
<p class="msg center">올해 안에 3가지를 달성할 경우,</p>
<p class="msg center">사고 싶었던 것을 사겠음.</p>
<div calss='flex-row wrap' >
<div class='bucket img1 center'> 저축하기</div>
<div class='bucket img2 center'>코딩 배워서 써먹어보기</div>
<div class='bucket img1 center'>주짓수&무에타이 배우기</div>
<div class='bucket img2 center'>기부 한 번이상 하기</div>
<div class='bucket img1 center'>친구랑 요리 해보기</div>
<div class='bucket img2-t3 center'>체중조절 해서 근육량 늘리기</div>
</div>
<script>
// 페이지 로드 시 이전 상태 복원
document.addEventListener("DOMContentLoaded", (event) => {
const buckets = document.querySelectorAll(".bucket");
buckets.forEach((bucket, index) => {
// 로컬 스토리지에서 상태 읽기
const isDone = localStorage.getItem("bucket" + index) === "done";
if (isDone) {
bucket.classList.add("done");
}
});
});
// 버킷 리스트 클릭 이벤트
const buckets = document.querySelectorAll(".bucket");
buckets.forEach((bucket, index) => {
bucket.addEventListener("click", function () {
// 클래스 토글
bucket.classList.toggle("done");
// 로컬 스토리지에 상태 저장
if (bucket.classList.contains("done")) {
localStorage.setItem("bucket" + index, "done");
} else {
localStorage.setItem("bucket" + index, "");
}
});
});
</script>
</body>
</html>
