<body class="bg center">에서 bg 뒤에 -t5를 덧붙이는 순간, bucket 이미지 크기가 적용되지 않습니다

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

<body class="bg center">에서 bg 뒤에 -t5를 덧붙이는 순간, bucket 이미지 크기가 적용되지 않습니다

2024 나만의 버킷리스트 만들기 v0

0주차

손*지

・

추천

・

조회수

답변 완료

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

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

<body class="bg center">에서 bg 뒤에 -t5를 덧붙이는 순간, bucket 이미지 크기가 적용되지 않는 것 같습니다. 정사각형 메모지 모양이 없어집니다. t1~t5 다 해봤는데, 모두 그렇네요! 뭘 잘못 했을까요?ㅠㅠ

<!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>
    @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: tomato;
        border-radius: 10px;
        color: white;
        text-align: center;
        padding: 4px 14px;
      }


      .msg {
        margin: -5px 0 15px;
      }


      .bucket {
        width: 160px;
        height: 160px;
        background-position: center;
        background-size: cover;
      }


      .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');
      }
    }
  </style>
  <link rel="stylesheet" type="text/css"
    href="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/bucketList/sparta-bucket2.css">


</head>


<body class="bg center">
  <h1 class="title-t5">2024년 신년계획</h1>
  <p class="msg center">먼 미래 말고 오늘 뭘 이뤘을까</p>
  <p class="msg center">꾸준함을 즐기기</p>
  <div class="flex-row wrap">
    <div class="bucket img1-t5 center">매주 책 1권 읽고 글쓰기</div>
    <div class="bucket img2-t5 center">아카이빙 웹사이트 만들기</div>
    <div class="bucket img3-t5 center">공모전 출품하기
    </div>
    <div class="bucket img4-t5 center">근육량 1kg 늘리기</div>
    <div class="bucket img5-t5 center">매달 지출 피드백하고 예산 세우기</div>
    <div class="bucket img6-t5 center">금융소득 500만원 만들기</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>

댓글 알림