본문 바로가기

[HTML5] - 18 - 반응형 게시판 만드는 법

I-ri 발행일 : 2023-05-06
728x90
반응형
728x90
반응형

#주의#

이 글은 강의 글이 아니다.

틀린 부분, 깔끔하지 못한 부분 있을 수 있다.

지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다.

 

 

이번에는 게시글의 제목만 보이고 마우스를 올리면 내용까지 보이게 만들어 볼 것이다.

우선 <style> 태그에 아래의 코드를 넣어준다.

.card-text {
  display: none; /* 카드 내용 숨김 */
}
.card-title:hover + .card-text {
  display: block; /* 제목에 마우스를 올리면 카드 내용 보임 */
}

그리고 JavaScript 코드에서는 addPost() 함수를 수정한다.

 

카드 내용을 숨기고, 제목에 마우스를 올리면 내용을 보이도록 만들어 줄 것이다.

function addPost() {
  var title = document.getElementById("title").value;
  var content = document.getElementById("content").value;
  var date = new Date().toLocaleString();

  var postDiv = document.createElement("div");
  postDiv.className = "card my-3";
  postDiv.innerHTML = `
    <div class="card-body">
      <h3 class="card-title">${title}</h3>
      <p class="card-text">${content}</p>
      <p class="card-text"><small class="text-muted">${date}</small></p>
      <img class="card-img-bottom" src="images/3.webp" alt="이미지">
      <button type="button" class="btn btn-danger my-3">삭제</button>
    </div>
  `;

  // 카드 내용 숨김
  postDiv.querySelector(".card-text").style.display = "none";

  // 제목에 마우스를 올리면 카드 내용 보임
  postDiv.querySelector(".card-title").addEventListener("mouseover", function() {
    postDiv.querySelector(".card-text").style.display = "block";
  });

  // 제목에서 마우스를 떼면 카드 내용 숨김
  postDiv.querySelector(".card-title").addEventListener("mouseout", function() {
    postDiv.querySelector(".card-text").style.display = "none";
  });

  postDiv.querySelector(".btn-danger").addEventListener("click", function() {
    postDiv.remove();
    savePosts();
  });

  var postsDiv = document.getElementById("posts");
  postsDiv.insertBefore(postDiv, postsDiv.firstChild);

  savePosts();

  document.getElementById("title").value = "";
  document.getElementById("content").value = "";
}

addPost() 함수를 이렇게 수정해 주면 위의 gif처럼 작동될 것이다.

 

하지만 이미지는 그대로 있다.

 

이것도 평소엔 보이지 않다가 마우스를 올리면 보이게 만들어 볼 것이다.

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>이리의 맥 이야기</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    .card-text,
    .card-img-bottom {
      display: none;
    }
    .card:hover .card-text,
    .card:hover .card-img-bottom {
      display: block;
    }
  </style>
</head>
<body style="background-color: black;">
  <div class="hero text-center text-white py-5">
    <h1 class="display-4">이리의 맥 이야기</h1>
    <h2>컴온!!!!</h2>
  </div>
  <div class="container my-5">
    <form onsubmit="addPost(); return false;">
      <div class="form-group">
        <label for="title">제목</label>
        <input type="text" class="form-control" id="title" name="title" placeholder="제목을 입력하세요...">
      </div>
      <div class="form-group">
        <label for="content">내용</label>
        <textarea class="form-control" id="content" name="content" placeholder="내용을 입력하세요..." rows="8"></textarea>
      </div>
      <button type="submit" class="btn btn-primary">게시글 작성</button>
    </form>
    <div id="posts"></div>
    <nav>
      <ul class="pagination justify-content-center my-5">
        <li class="page-item disabled">
          <a class="page-link" href="#" tabindex="-1">이전</a>
        </li>
        <li class="page-item active"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item">
          <a class="page-link" href="#">다음</a>
        </li>
      </ul>
    </nav>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script>
    function getPosts() {
      var posts = localStorage.getItem("posts");
      if (posts) {
        document.getElementById("posts").innerHTML = posts;
      }
    }

    function savePosts() {
      var postsDiv = document.getElementById("posts");
      localStorage.setItem("posts", postsDiv.innerHTML);
    }

    function addPost() {
      var title = document.getElementById("title").value;
      var content = document.getElementById("content").value;
      var date = new Date().toLocaleString();

      var postDiv = document.createElement("div");
      postDiv.className = "card my-3";
      postDiv.innerHTML = `
        <div class="card-body">
          <h3 class="card-title">${title}</h3>
          <p class="card-text">${content}</p>
          <p class="card-text"><small class="text-muted">${date}</small></p>
          <img class="card-img-bottom" src="images/3.webp" alt="이미지">
          <button type="button" class="btn btn-danger my-3">삭제</button>
        </div>
      `;

      var cardText = postDiv.querySelector(".card-text");
      var cardImg = postDiv.querySelector(".card-img-bottom");

      postDiv.addEventListener("click", function() {
        if (cardText.style.display === "none") {
          cardText.style.display = "block";
          cardImg.style.display = "block";
        } else {
          cardText.style.display = "none";
          cardImg.style.display = "none";
        }
      });

      var deleteBtn = postDiv.querySelector(".btn-danger");
      deleteBtn.addEventListener("click", function() {
        postDiv.remove();
        savePosts();
      });

      var postsDiv = document.getElementById("posts");
      postsDiv.insertBefore(postDiv, postsDiv.firstChild);

      savePosts();

      document.getElementById("title").value = "";
      document.getElementById("content").value = "";
    }

    getPosts();
  </script>
</body>
</html>

이렇게 바꿔주면 이미지까지 숨겨진다.

 

마우스를 올리면 이미지와 내용이 나타나게 된다.

 

 

728x90
반응형

'개발 이야기 > [HTML5]' 카테고리의 다른 글

[HTML5] - 20 - 게시글 작성 폼과 기능 만드는 법  (1) 2023.05.07
[HTML5] - 19 - 게시글 삭제 기능 만드는 법  (0) 2023.05.06
[HTML5] - 17 - Visual Studio 추천 확장 프로그램  (0) 2023.05.05
[HTML5]- 16 - 작성 시간 표시 기능 만드는 법  (4) 2023.05.05
[HTML5] - 15 - 게시글 작성 기능 만드는 법  (1) 2023.05.05

관련글

댓글

티스토리툴바