2022-8-29 TIL

신중민·2022년 8월 29일

드디어 스파르타 코딩클럽 내일배움캠프 AI 3회차 수업이 시작되었다. O.T때부터 팀소개 웹페이지 만들기 프로젝트를 진행해서 설램보다는 두려움이 컸다. 다행이도 좋은 팀장, 팀원들을 만나 프로젝트를 완성시켜야 한다는 압박에 주말에도 게더에 나와 열심히 프로젝트를 준비했다.

먼저 팀소개 웹페이지는 메인페이지, 개인페이지 두파트로 나눠 HTML을 작성했다. 각 파트에 2명씩 코드를 작성후 좋은 부분을 취합하기로 했다.

메인페이지

<!DOCTYPE html>
<html lang="kr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://fonts.googleapis.com/css2?family=Poor+Story&display=swap" rel="stylesheet" />
    <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>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
    <title>팀 소개하기</title>
    <style>
      body {
        font-family: "Poor Story", cursive;
        font-size: 20px;
      }
      .bg {
        width: 100%;
        height: 300px;

        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
          url("https://newsimg-hams.hankookilbo.com/2022/02/20/faa4bb4f-abf5-4dc9-a73f-476e325e053e.jpg");
        background-position: bottom;
        background-size: cover;
        background-repeat: no-repeat;

        color: burlywood;

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

      .t {
        width: 100%;
        height: 300px;
        display: flex;
        flex-direction: column;
        box-shadow: 0px 0px 3px 0px black;
        margin-top: 30px;
      }

      .team {
        width: 95%;
        max-width: 1000px;
        margin: 20px auto 20px auto;
        padding: 10px;
        align-items: center;
        justify-content: center;
        flex-direction: flex;
        border: 0, rgb(255, 255, 255);
      }

      .img-box {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        flex-direction: row;
        border: 10px, solid, black;
      }

      .img {
        border: 10px, solid, black;
        border-radius: 10px;
      }

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

      .namebox > .name {
        margin: 10px 150px 10px 130px;
        justify-content: space-around;
        border: 20px, solid, black;
        border-radius: 10px;
      }
    </style>
    <script>
      $(document).ready(function () {
        set_temp();
        show_comment();
      });

      function set_temp() {
        $.ajax({
          type: "GET",
          url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
          data: {},
          success: function (response) {
            $("#temp").text(response["temp"]);
          },
        });
      }
    </script>
  </head>

  <body>
    <div class="bg">
      <h1>팔팔하조</h1>
      <p>현재기온: <span id="temp"></span>°C</p>
    </div>
    <div class="img-box">
      <div class="img">
        <a href="https://www.naver.com" target="_blank">
          <img src="https://ca.slack-edge.com/T03NJDS4SF9-U03RYBKHLSW-d0e7b8dd63ec-512" style="height: 700; width: 370px" alt="사진 클릭!" />
        </a>
      </div>
      <div class="img">
        <a href="https://www.google.com" target="_blank">
          <img src="https://ca.slack-edge.com/T03NJDS4SF9-U03S7GE66AY-00e5157dbcbc-512" style="height: 700; width: 370px" alt="사진 클릭!" />
        </a>
      </div>
      <div class="img">
        <a href="https://www.daum.net" target="_blank">
          <img src="https://ca.slack-edge.com/T03NJDS4SF9-U03SJM2013K-7c71f259e3ab-512" style="height: 700; width: 370px" alt="사진 클릭!" />
        </a>
      </div>
      <div class="img">
        <a href="https://spartacodingclub.kr/" target="_blank">
          <img src="https://ca.slack-edge.com/T03NJDS4SF9-U03RDAH9NSV-0433d88ddd99-512" style="height: 700; width: 370px" alt="사진 클릭!" />
        </a>
      </div>
    </div>
    <div class="namebox">
      <div class="name">
        <button type="button" class="btn btn-outline-dark" style="font-size: 20px">천승현</button>
      </div>
      <div class="name">
        <button type="button" class="btn btn-outline-dark" style="font-size: 20px">이태겸</button>
      </div>
      <div class="name">
        <button type="button" class="btn btn-outline-dark" style="font-size: 20px">신중민</button>
      </div>
      <div class="name">
        <button type="button" class="btn btn-outline-dark" style="font-size: 20px">김민규</button>
      </div>
    </div>
    <div class="t">
      <div class="team-explanation">
        <p class="team">- 팀명 : 팔팔하조</p>
        <p class="team">- 우리만의 특징 : 건강을 생각하는 사람들의 모임</p>
        <p class="team">- 추구하는 궁극적 목표 : 운동을 하면서 체력을 유지하며 끈기있게 노력하여 4개월간의 캠프를 포기하지 말자!</p>
        <p class="team">- 우리만의 약속 : 포기하지 말자</p>
      </div>
    </div>
  </body>
</html>코드를 입력하세요

개인페이지

<!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 rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap" rel="stylesheet">

    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gaegu&display=swap" rel="stylesheet">

    <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>
    <style>
         * {
            font-family: 'Gaegu', sans-serif;
        }

        .mypic {
            width: 100%;
            height: 600px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://cdn.univ20.com/wp-content/uploads/2018/09/90ebd6898236551fca8422959fa2a5e0.png");
            background-position: center 50%;
            background-size: cover;

            color: white;

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

        .mypic > button {
            width: 300px;
            height: 50px;

            background-color: transparent;
            color: white;

            border-radius: 50px;
            border: 1px solid white;

            margin-top: 10px;
        }

        .mypic > button:hover {
            border: 2px solid white;
        }

        .mypost {
            max-width: 500px;
            width: 95%;
            margin: 500px auto 20px auto;
            box-shadow: 0px 0px 3px 0px black;
            padding: 20px;

            display : none;


        }

        .mypost > button {
            margin-top: 15px;
        }

        .mycards {
            width: 95%;
            max-width: 500px;
            float: right;
            margin-right: 250px;
        }

        .mycards > .card {
            margin-top: 10px;
            margin-bottom: 10px;
            border: hidden 10px;
        }

        .bang {
            font-size: 30px
        }

        .cards {
            margin: 10px 10px 0px 0px;
            width: 430px
        }

        .hello {
            float: left;
            width: 300px;
            height: 300px;
            margin: 60px 0 0 350px
        }
        .btn{
            background-color: black;
            color:white;
        }
        .hi{
            margin-right : 65px
        }




    </style>
    <script>
        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
                data: {},
                success: function (response) {
                    $('#temp').text(response['temp'])
                }
            })
        })

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

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

        function q() {
            let txt = $('#input-q').val()
            let temp_html = `<li>${txt}</li>`
            $('#names').append(temp_html)
        }
    </script>
</head>


<body>
<div class="mypic">
    <h1>신중민</h1>
    <p>현재기온 : <span id="temp">00.0</span>도</p>
    <button onclick="open_box()">응원의 메세지를 남겨주세요🔥</button>
</div>

<div class="mycards">
    <div class="card">
        <div class="card-body">
            <p>이름</p>
            <footer class="blockquote-footer">신중민</footer>
            <p>1. [팀]과 [자신]에 대한 설명 및 MBTI </p>
            <footer class="blockquote-footer">INFJ</footer>
            <p>2. 객관적으로 살펴본 자신의 장점</p>
            <footer class="blockquote-footer">꼼꼼함</footer>
            <p>3. 협업을 하는 과정에서의 자신의 스타일</p>
            <footer class="blockquote-footer">팀원으로써 팀장과 팀원을 열심히 서포트</footer>
            <p>4. 우리 팀만의 특징과 추구하는 궁극적인 목표</p>
            <footer class="blockquote-footer">운동을 하면서 체력을 유지하며 끈기있게 노력하여 4개월간의 캠프를 포기하지 말자!</footer>
            <p>5. 우리 팀의 약속</p>
            <footer class="blockquote-footer">포기하지 말자!</footer>
            <p>6. 팀원들의 블로그 주소
            <a href="https://velog.io/@ysy03099">신중민의 블로그 </a>
            </p>

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

<div>
    <img class="hello"
         src="https://ca.slack-edge.com/T03NJDS4SF9-U03SJM2013K-7c71f259e3ab-512"></img>
</div>

<div class="mypost" id="post-box">
    <div class="form-floating mb-3">

        <div class="visit">
            <div class="bang"><p>응원하기</p></div>
        </div>

        <div class="question-box">
            <input class = "hi" id="input-q" type="text" placeholder="방명록 작성하기"/>

            <button onclick="q()" type="button" class="btn">작성 완료</button>
            <button onclick="close_box()" type="button" class="btn">닫기</button>

            <div class="cards" id="comment-list">
                <div class="card">
                    <div class="card-body">
                        <blockquote class="blockquote mb-0">
                            <ul id="names">

                            </ul>
                        </blockquote>
                    </div>
                </div>
            </div>
        </div>

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

</html>코드를 입력하세요

위에 2개의 페이지로 구성을 완료했고 내일은 백엔드 작업을 통해 데이터 작업을 완료할 예정이다. 아직 갈길이 멀다.

신중민

이전 포스트

2022-8-29

다음 포스트

2022-8-30 TIL

1개의 댓글

이서연

2022년 8월 30일

좋은 팀원분들을 만나셨군요! 그만큼 중민님도 좋은 팀원일 거예요 ㅎㅎ 주말에도 나오셨다니 크 열정 아주 따봉 드립니닷 첫 날 고생 많으셨고, 앞으로 우리 잘 지내보아요~~~!

답글 달기