개발일지

22.06.01

mat_hoyoung 2022. 6. 1.

생활코딩을 듣다가 항해 99x동북권 지역을 대상으로 무료로 스파르타 코딩 클럽에서 팀원들을 모집한다는 소식을 듣고 지원동기와 셀프 인터뷰 영상을 찍고 1주 차 강의를 듣게 되었다. 2주라는 남은 기간 동안 5주 차 강의를 들어야 해서 벅찰 수 있지만 충분히 가능하다. 남은 기간 힘들게 해야겠다. 

 

아랫부분은 1주 차 코딩 내용을 작성한 것으로 참고용으로 쓰려고 한다. 

<!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>찰리푸스 팬명록</title>
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
    <style>
        *{
            font-family: 'Nanum Pen Script', cursive;
        }
        .mytitle{


                     height: 250px;
                     width:100%;

                     background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjA0MjFfNTkg%2FMDAxNjUwNDc0NzE5NjAw.1IBC_xLx5CDTQKTsSpKwmu8zBhqLwTtPtDNhdNU3-g8g.D_uYkuFwJoJVPm18EauofWaPK3fHxyyOpFs1lhcVKowg.JPEG.cinim126%2F%25B4%25D9%25BF%25EE%25B7%25CE%25B5%25E5_%25281%2529.jpg&type=a340");
                     background-position: center;
                     background-size: auto;

                     color:white;

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

             max-width: 500px;
             width:95%;
             margin: 20px auto 0px auto;
             padding: 5px;
         }
         .mypost{

             max-width: 500px;
             width:95%;
             margin: 20px auto 0px 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: 10px;
         }
    </style>
</head>

<body>
    <div class="mytitle">
     <h1>찰리푸스 팬명록</h1>
 </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">닉네임</label>
     </div>

    <div class="form-floating">
         <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
         <label for="floatingTextarea">응원댓글</label>
     </div>

    <div class="mybtn">
         <button type="button" class="btn btn-dark">응원 남기기</button>
     </div>

      </div>
    </div>

    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>새로운 앨범 너무 멋져요!</p>
                <footer class="blockquote-footer">호빵맨 <cite title="Source Title"></cite></footer>
            </blockquote>
           </div>   </div>

    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>새로운 앨범 너무 멋져요!</p>
                <footer class="blockquote-footer">호빵맨 <cite title="Source Title"></cite></footer>
            </blockquote>
        </div>   </div>


    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>새로운 앨범 너무 멋져요!</p>
                <footer class="blockquote-footer">호빵맨 <cite title="Source Title"></cite></footer>
            </blockquote>
        </div>

</div>
    </div>
</body>

</html>

'개발일지' 카테고리의 다른 글

22.06.03  (0) 2022.06.03
22.06.02  (0) 2022.06.02
22.05.27  (0) 2022.05.27
22.05.24  (0) 2022.05.24
22.05.21 1일차.  (0) 2022.05.21

댓글