* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
아까 질문해서 크기를 줄이니 3 x3 이 되어 완료 되었다고 생각했는데
지문을 보니 한 칸의 버킷리스트 크기가 160 px 이더라구요
160 픽셀이면 두개 씩 5줄로 뜨는데 어떻게 해결해야 할까요?
클릭 시 ‘달성을 축하합니다!’ 알림창이 나오도록 구현하세요.
라고 하는데
onclick=”alert(’’)”를 활용하면 됩니다.
라고 합니다 어디에 써야할지를 모르겠어요 ㅠ
이건 크기가 작아야 이렇게 되는데..
작성한 코드 및 에러 메세지
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>2024 버킷리스트</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
.bg {
background-image: url("./벚꽃.gif");
background-size: cover;
background-repeat: no-repeat;
margin: 0 auto;
background-color: #141617;
}
.title {
margin-top: 50px;
color: #E8344E;
}
.test {
color: white;
margin-bottom: 48px;
margin-top: 0px;
}
.bucket {
width: 160px;
height: 160px;
background-size: cover;
background-position: center;
}
.img1 {
background-image: url("./Bucket01.png");
color: white;
}
.img2 {
background-image: url("./Bucket02.png");
color: #E8344E;
}
.img3 {
background-image: url("./Bucket03.png");
color: #E8344E;
}
.img4 {
background-image: url("./Bucket04.png");
color: white;
}
.img5 {
background-image: url("./Bucket05.png");
color: white;
}
.img6 {
background-image: url("./Bucket06.png");
color: #E8344E;
}
.img7 {
background-image: url("./Bucket06.png");
color: white;
}
.img8 {
background-image: url("./Bucket05.png");
color: #E8344E;
}
.img9 {
background-image: url("./Bucket03.png");
color: #E8344E;
}
</style>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body class="bg center">
<h1 class="title">SPARTHON Bucket List</h1>
<p class="test">꿈은 꾸는 것이 아닌, 이루는 것이다.</p>
<div class="flex-row wrap">
<div class="bucket img1 center"> 나만의 웹 만들기 </div>
<div class="bucket img2 center"> 바디프로필 준비하기 </div>
<div class="bucket img3 center"> 인테리어 꾸미기 </div>
<div class="bucket img4 center"> 식물키우기 </div>
<div class="bucket img5 center"> 10키로 감량 </div>
<div class="bucket img6 center"> 웹 사이트자랑하기 </div>
<div class="bucket img2 center"> 적금 들기 </div>
<div class="bucket img1 center"> 해외 여행 </div>
<div class="bucket img9 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>
