본문 바로가기
부트캠프 개발일지 2023-2024/Pre-course 사전학습

[Pre-course] 웹기발 기초 : JQuery 2

by whereanna00 2023. 10. 1.

JQuery

jQuery + fetch 로 웹페이지 제어하기

 

Fetch =  (서버에서 데이터를 받아오는)인터넷을 통해 데이터를 요청하고 받아오는 과정을 의미. Fetch 는 짧은 코드로 데이터를 가져올 수 있음.

 

버튼을 눌렀을 때, id 로 지정한 element가 appear/disapper 하도록 하기

** toggle();

 <script>
    function openClose(){
      $('#postingBox').toggle();
    }
 </script>
</head>
<body>
  <div class="mytitle">
    <h1>나만의 추억앨범</h1>
    <button onclick="
    openClose()">추억 저장하기</button>
  </div>

 

데이터 넣고 카드 생성하기

.val() :  jQuery 메서드 중 하나로 선택한 요소의 값을 가져오는 역할

더보기

프로그래밍 순서

  • script 태그안에 새로운 function 함수 작성
  • 기록하기 버튼에 onclick 작성
  • div안에 id 선택자 가져오기
  • 메서드 val을 통해 postbox에 값들 변수에 담기
  • 카드 html코드 변수에 담기
  • div안에 class 선택자 선택 후 append 메서드
  <script>
    function openClose(){
      $('#postingBox').toggle();
    }

    function makeCard(){
      // 값을 가져오기
      let image = $('#image').val();
      let title = $('#title').val();
      let content = $('#content').val();
      let date = $('#date').val();

      //카드 생성 후 붙이기 
      let temp_html = `      
      <div class="col">
        <div class="card h-100">
          <img src="${image}" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">${title}</h5>
            <p class="card-text">${content}</p>
          </div>
          <div class="card-footer">
            <small class="text-body-secondary">${date}</small>
          </div>
        </div>
      </div>`;
      $('#card').append(temp_html);
    }
  </script>
더보기

전체코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>나만의 추억앨범</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <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>
    @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');

    * {
      font-family: 'Black Han Sans', sans-serif;
    }

    .mytitle {
      height: 250px;
      color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      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');
      background-position: center;
      background-size: cover;
    }

    .mytitle > button {
      width: 150px;
      height: 50px;
      background-color: transparent;
      color: white;
      border: 1px solid white;
      border-radius: 5px;
      margin-top: 20px;
    }

    .mycards {
      width: 1200px;
      margin: 30px auto 0px auto;
    }

    .mypostingbox {
      width: 500px;
      margin: 30px auto 0px auto;
      padding: 20px;
      box-shadow: 0px 0px 3px 0px blue;
      border-radius: 5px;
    }

    .mybtn {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }

    .mybtn > button {
      margin-right: 5px;
    }
  </style>

  <script>
    function openClose(){
      $('#postingBox').toggle();
    }

    function makeCard(){
      // 값을 가져오기
      let image = $('#image').val();
      let title = $('#title').val();
      let content = $('#content').val();
      let date = $('#date').val();

      //카드 생성 후 붙이기 
      let temp_html = `      
      <div class="col">
        <div class="card h-100">
          <img src="${image}" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">${title}</h5>
            <p class="card-text">${content}</p>
          </div>
          <div class="card-footer">
            <small class="text-body-secondary">${date}</small>
          </div>
        </div>
      </div>`;
      $('#card').append(temp_html);
    }
  </script>
</head>
<body>
  <div class="mytitle">
    <h1>나만의 추억앨범</h1>
    <button onclick="
    openClose()">추억 저장하기</button>
  </div>
  <div class="mypostingbox" id="postingBox">
    <div class="form-floating mb-3">
      <input type="email" class="form-control" id="image" placeholder="앨범 이미지">
      <label for="floatingInput">앨범 이미지</label>
    </div>
    <div class="form-floating mb-3">
      <input type="email" class="form-control" id="title" placeholder="앨범 제목">
      <label for="floatingInput">앨범 제목</label>
    </div>
    <div class="form-floating mb-3">
      <input type="email" class="form-control" id="content" placeholder="앨범 내용">
      <label for="floatingInput">앨범 내용</label>
    </div>
    <div class="form-floating mb-3">
      <input type="email" class="form-control" id="date" placeholder="앨범 날짜">
      <label for="floatingInput">앨범 날짜</label>
    </div>
    <div class="mybtn">
      <button type="button" class="btn btn-primary" onclick="
        makeCard()">기록하기</button>
      <button type="button" class="btn btn-outline-primary">닫기</button>
  </div>
  </div>
  <div class="mycards">
    <div id="card" class="row row-cols-1 row-cols-md-4 g-4">
      <div class="col">
        <div class="card h-100">
          <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 class="card-body">
            <h5 class="card-title">앨범 제목</h5>
            <p class="card-text">앨범 내용</p>
          </div>
          <div class="card-footer">
            <small class="text-body-secondary">앨범 날짜</small>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <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 class="card-body">
            <h5 class="card-title">앨범 제목</h5>
            <p class="card-text">앨범 내용</p>
          </div>
          <div class="card-footer">
            <small class="text-body-secondary">앨범 날짜</small>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <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 class="card-body">
            <h5 class="card-title">앨범 제목</h5>
            <p class="card-text">앨범 내용</p>
          </div>
          <div class="card-footer">
            <small class="text-body-secondary">앨범 날짜</small>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <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 class="card-body">
            <h5 class="card-title">앨범 제목</h5>
            <p class="card-text">앨범 내용</p>
          </div>
          <div class="card-footer">
            <small class="text-body-secondary">앨범 날짜</small>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>
</html>

 

스파르타플릭스 예시

<script>
    function openClose() {
      $('#postingBox').toggle();
    }

    function makeCard() {
      let image = $('#image').val();
      let title = $('#title').val();
      let comment = $('#comment').val();
      let star = $('#star').val();

      let temp_html = `
        <div class="col">
          <div class="card h-100">
            <img src="${image}" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">${title}</h5>
              <p class="card-text">${star}</p>
              <p class="card-text">${comment}</p>
            </div>
          </div>
        </div>`;
        $('#card').append(temp_html);
    }
  </script>

 

더보기

전체코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>스파르타플릭스</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <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>
    @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');

    * {
      font-family: 'Black Han Sans', sans-serif;
    }

    .main {
      color: white;
      background-image: url('https://occ-0-1123-1217.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABeIfo7VL_VDyKnljV66IkR-4XLb6xpZqhpLSo3JUtbivnEW4s60PD27muH1mdaANM_8rGpgbm6L2oDgA_iELHZLZ2IQjG5lvp5d2.jpg?r=e6e.jpg');
      background-position: center;
      background-size: cover;
    }

    body {
      background-color: black;
    }

    .mycards {
      width: 1200px;
      margin: 20px auto 20px auto;
    }

    .mypostingbox {
      width: 500px;
      margin: 20px auto 20px auto;
      border: 1px solid white;
      padding: 20px;
      border-radius: 5px;
    }

    .form-floating > input {
      background-color: transparent;
      color: white;
    }

    .form-floating > label {
      color: white;
    }

    .input-group > label {
      background-color: transparent;
      color: white;
    }

    .mypostingbox > button {
      width: 100%;
    }
  </style>

  <script>
    function openClose() {
      $('#postingBox').toggle();
    }

    function makeCard() {
      let image = $('#image').val();
      let title = $('#title').val();
      let comment = $('#comment').val();
      let star = $('#star').val();

      let temp_html = `
        <div class="col">
          <div class="card h-100">
            <img src="${image}" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">${title}</h5>
              <p class="card-text">${star}</p>
              <p class="card-text">${comment}</p>
            </div>
          </div>
        </div>`;
        $('#card').append(temp_html);
    }
  </script>

</head>
<body>
  <header class="p-3 text-bg-dark">
    <div class="container">
      <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
        <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
          <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
        </a>

        <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
          <li><a href="#" class="nav-link px-2 text-danger">spartaflix</a></li>
          <li><a href="#" class="nav-link px-2 text-white">홈</a></li>
          <li><a href="#" class="nav-link px-2 text-white">시리즈</a></li>
          <li><a href="#" class="nav-link px-2 text-white">영화</a></li>
          <li><a href="#" class="nav-link px-2 text-white">내가 찜한 콘텐츠</a></li>
        </ul>

        <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
          <input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..." aria-label="Search">
        </form>

        <div class="text-end">
          <button type="button" class="btn btn-outline-light me-2">Login</button>
          <button type="button" class="btn btn-danger">Sign-up</button>
        </div>
      </div>
    </div>
  </header>
  <div class="main">
    <div class="h-100 p-5 text-bg-dark rounded-3">
      <h2>킹덤</h2>
      <p>병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한 역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직 세자뿐이다.</p>
      <button type="button" class="btn btn-outline-light" onclick="
      openClose()">영화 기록하기</button>
      <button type="button" class="btn btn-outline-light">상세정보</button>
    </div>
  </div>
  <div id="postingBox" class="mypostingbox">
    <div class="form-floating mb-3">
      <input type="email" class="form-control" id="image" placeholder="영화 이미지 주소">
      <label for="floatingInput">영화 이미지 주소</label>
    </div>
    <div class="form-floating mb-3">
      <input type="email" class="form-control" id="title" placeholder="영화 제목">
      <label for="floatingInput">영화 제목</label>
    </div>
    <div class="input-group mb-3">
      <label class="input-group-text" for="inputGroupSelect01">별점</label>
      <select class="form-select" id="star">
        <option selected>별점 선택</option>
        <option value="⭐">⭐</option>
        <option value="⭐⭐">⭐⭐</option>
        <option value="⭐⭐⭐">⭐⭐⭐</option>
        <option value="⭐⭐⭐⭐">⭐⭐⭐⭐</option>
        <option value="⭐⭐⭐⭐⭐">⭐⭐⭐⭐⭐</option>
      </select>
    </div>
    
    <div class="form-floating mb-3">
      <input type="email" class="form-control" id="comment" placeholder="추천 이유">
      <label for="floatingInput">추천 이유</label>
    </div>
    <button type="button" class="btn btn-danger" onclick="
    makeCard();">기록하기</button>
  </div>
  <div class="mycards">
    <div id="card" class="row row-cols-1 row-cols-md-4 g-4">
      <div class="col">
        <div class="card h-100">
          <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">영화 제목</h5>
            <p class="card-text">⭐⭐⭐</p>
            <p class="card-text">영화 코멘트</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">영화 제목</h5>
            <p class="card-text">⭐⭐⭐</p>
            <p class="card-text">영화 코멘트</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">영화 제목</h5>
            <p class="card-text">⭐⭐⭐</p>
            <p class="card-text">영화 코멘트</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">영화 제목</h5>
            <p class="card-text">⭐⭐⭐</p>
            <p class="card-text">영화 코멘트</p>
          </div>
        </div>
      </div>

    </div>
  </div>

</body>
</html>

 

 

728x90
반응형

'부트캠프 개발일지 2023-2024 > Pre-course 사전학습' 카테고리의 다른 글

[Pre-course] 웹개발 기초 : addDoc, getDoc, Github 배포, 파이썬  (0) 2023.10.03
[Pre-course] 웹개발 기초 : Firebase, Database, Firestore Database (데이터 넣기, 데이터 가져오기)  (0) 2023.10.03
[Pre-course] 웹개발 기초 : Client-Server, Fetch  (1) 2023.10.02
[Pre-course] 웹개발 기초 : JavaScript, JQuery  (0) 2023.10.01
[Pre-course] 웹개발 기초 : html, css  (0) 2023.10.01

관련글

티스토리툴바