230515 미니프로젝트 (팀소개페이지) 첫날 HTML 뼈대 만들기

<style>
      * {
        font-family: "Gowun Dodum", sans-serif;
      }

      .mytitle {
        width: 100%;
        height: 100px;
        color: #1f4e5f;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        
        margin-top: 30px;
        margin-left: 20px;
        border-bottom: 2px solid #1f4e5f;
      }
      
      .empty-box {
        width: 100%; /* 원하는 가로 크기 */
        height: 200px; /* 원하는 세로 크기 */
        border-bottom: 2px solid #1f4e5f;
        margin: 20px 20px 20px 20px;
      }

      .mypost {
        width: 95%;
        max-width: 500px;
        margin: 20px auto 0px auto;
        padding: 20px;
        box-shadow: 0px 0px 3px 0px gray;
        display: none;
        color: rgb(15, 43, 77);
      }
      
      .mycards {
        margin: 20px auto 0px auto;
        width: 95%;
        max-width:2000px;
      }

      .mybtn > button {

        display: flex;
        width: 100px;
        height: 30px;

        background-color: transparent;
        color: #1f4e5f;

        border-radius: 10px;
        border: 1px solid #1f4e5f;

        margin-left: auto;
      }

      .form-floating {
        margin-top: 20px;
      }

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

        margin-top: 20px;
      }

</style>

<script>

      function open_box() {
        $("#post-box").show();
      }

      function close_box() {
        $("#post-box").hide();
      }

</script>

ss="form-control"
          placeholder="Leave a name here"
        ></textarea>
        <label for="floatingTextarea2">블로그</label>
      </div>
      <div class="mybtns">
        <button onclick="posting()" type="button" class="btn btn-primary">
          등록하기
        </button>
        <button
          onclick="close_box()"
          type="button"
          class="btn btn-outline-primary"
        >
          닫기
        </button>
      </div>
    </div>
    <div class="mycards">
      <div class="row row-cols-1 row-cols-md-5 g-5" id="cards-box">
        <div class="col">
          <div class="card h-100">
            <a href="#" class="btn_open" onClick="javascript:popOpen();">
              <img
                src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMzA0MTFfNzgg%2FMDAxNjgxMTg3NjQzNDgy.P2Ttr9KcWbmjjVFSARY9hHrqg1vsK2TWUgbrdBczzF4g.GswHWWmT8jMbub11p6OSWgPsHySmk4rumKeMXLQGWL0g.JPEG.seahcorp%2F20230405_182430.jpg&type=sc960_832"
                class="card-img-top"
              />
            </a>
            <div class="card-body">
              <p class="card-text">이름</p>
              <p class="card-text">mbti</p>
              <p class="card-text">설명</p>
              <p class="card-text">장점</p>
              <p class="card-text">협업스타일</p>
              <p class="card-text">블로그주소</p>
            </div>
            <div>
              <button 
                type="button" 
                class="btn btn-outline-secondary"
              >
                자세히
              </button>
              <button 
              type="button" 
              class="btn btn-outline-secondary"
              >
                삭제
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mybtn">
        <button onclick="open_box()">기록하기</button>s
    </div>
  </body>