div 코드 닫는 타이밍 질문 (div class 포함)

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

div 코드 닫는 타이밍 질문 (div class 포함)

undefined주차

권*성

・

추천

・

조회수

답변 완료

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

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

<div> 코드를 적었을때 닫는 타이밍도 궁금합니다.
<div class="blahblah name">을 했을 때는 코드를 닫아줄 필요는 없나요?

보고 계신 화

면 전체를 캡처해 주시면, 튜터님들이 빠르게 상황을 이해할 수 있어요.

작성한 코드 및 에러 메세지

에러 난건 아니고 정상 작동하는데, </div>가 아래에 여러개 쌓여있어서 제가 깔끔하게 못한건가 싶어서 질문드려요. 맨 아래로 가봐주세요.

<!doctype html>
<html lang="en">

<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"crossorigin="anonymous"></script>

    <title> bootstrap practice </title>

      <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500&display=swap" rel="stylesheet">

  <style>
      * {
        font-family: 'Noto Serif KR', serif;
      }
    .mytitle {
      background-color: aqua;

      height: 250px;
      width: 100%;
      background-image:  url(https://images.immediate.co.uk/production/volatile/sites/4/2021/08/edge-of-the-universe-5dfee93.jpg?quality=90&webp=true&resize=1200,510);
      background-size: cover;
      background-position: center;

      color: black;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

      .mytitle > button {
        width: 200px;
        height: 50px;
        background-color: transparent;
        color: black;

        border-radius: 50px;
        border: 1px solid black;
        margin-top: 10px;
   }
        .mytitle > button:hover {
           border: 2px solid black;
        }

        .mycomment {
          color: gray;

        }

        .wrap {
          max-width:1200px;
          width:95%;

          margin: 20px auto 0 auto;

        }

        .mypost {
          max-width:500px;
          width:95%;

          margin: 20px auto 0 auto;
          box-shadow: 0px 0px 3px 0px gray;
          padding: 20px;

        }

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

          margin-top: 10px;
        }

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



<body><div class="mytitle"><h1> My Favorite Moives </h1><button> Movie log</button></div>

  <div class="mypost"><div class="form-floating mb-3"><input type="email" class="form-control" id="floatingInput" placeholder="name@example.com"><label for="floatingInput">movie URL </label></div>

    <div class="form-floating"><input type="password" class="form-control" id="floatingPassword" placeholder="Password"><label for="floatingPassword">Password</label></div>


    <div class="input-group mb-3"><label class="input-group-text" for="inputGroupSelect01">Ratings</label><select class="form-select" id="inputGroupSelect01"><option selected>Choose...</option><option value="1">⭐</option><option value="2">⭐⭐</option><option value="3">⭐⭐⭐</option><option value="4">⭐⭐⭐⭐</option><option value="5">⭐⭐⭐⭐⭐</option>

      </select></div>

    <div class="form-floating"><textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"style="height: 100px"></textarea><label for="floatingTextarea2">Comments</label></div>

      <div class="mybtn"><button type="button" class="btn btn-light">Write</button><button type="button" class="btn btn-dark">Close</button>

  </div>



  </div>


  <div class="wrap"><div class="row row-cols-1 row-cols-md-4 g-4"><div class="col"><div class="card"><img src="https://yunhuei.files.wordpress.com/2022/12/avatar-wayofwater-en_a56a9e95.webp?w=600&zoom=2"class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Synopsis</h5><p class="card-text">Set more than a decade after the events of the first film, “Avatar: The Way of Water”
              begins to tell the story of the Sully family (Jake, Neytiri, and their kids), the trouble that follows them,
              the lengths they go to keep each other safe, the battles they fight to stay alive, and the tragedies they
              endure..</p><p>⭐⭐⭐</p><p class="mycomment"> This space is for comment </p></div></div></div><div class="col"><div class="card"><img src="https://yunhuei.files.wordpress.com/2014/04/the-best-offer-poster.jpg" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Synopsis</h5><p class="card-text">The Best Offer is the tale of the solitary, cultured Virgil Oldman (Geoffrey Rush), no
              longer young, whose reluctance to engage with others is matched only by the dogged obsessiveness with which
              he practices his profession of art expert and auctioneer. Asked to handle the valuation and sale of a
              mysterious woman, Claire Ibbeston’s (Sylvia Hoeks) priceless heirlooms, Virgil finds himself enveloped by a
              passion that will transform his grey existence forever..</p><p>⭐⭐⭐</p><p class="mycomment"> This space is for comment </p></div></div></div><div class="col"><div class="card"><img src="https://yunhuei.files.wordpress.com/2022/06/top-gun-maverick-movie-new-hd-poster-.webp?w=1272&zoom=2"class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Synopsis</h5><p class="card-text">Facing an uncertain future and confronting the ghosts of his past, Maverick is drawn into
              a confrontation with his own deepest fears. Culminating in a mission that demands the ultimate sacrifice
              from those who will be chosen to fly it.</p><p>⭐⭐⭐</p><p class="mycomment"> This space is for comment </p></div></div></div><div class="col"><div class="card"><img src="https://yunhuei.files.wordpress.com/2021/10/a7230c52-f8c1-11ea-abff-2457eb7eaea0.webp?w=960&zoom=2"class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Synopsis</h5><p class="card-text"> In No Time To Die, Bond has left active service and is enjoying a tranquil life in
              Jamaica. His peace is short-lived when his old friend Felix Leiter from the CIA turns up asking for help.
              The mission to rescue a kidnapped scientist turns out to be far more treacherous than expected, leading Bond
              onto the trail of a mysterious villain armed with dangerous new technology.</p><p>⭐⭐⭐</p><p class="mycomment"> This space is for comment </p></div></div></div></div></div></body>

</html>

오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.

Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.

Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!

댓글 알림