드디어 스파르타 코딩클럽 내일배움캠프 AI 3회 차가 시작되었다. O.T때 부터 프로젝트로 팀원 소개 웹페이지 재작을 시작한다고 해서 설램보다는 두려움이 더 컸다. 그래도 좋은 팀장, 팀원들을 만나 다행인 부분이다. 우리조는 프로젝트를 성공시켜야한다는 압박감에 주말에도 게더에 접속해서 모두 열심히 해준 결과 오늘 첫 수업인데도 불구하고 잘 해내고 있다는 생각이 들었다.

HTML로 틀을 만드는 작업을 먼저 시작했는데 메인페이지, 개인페이지 두 파트로 나눠서 각 2명씩 코드를 작성해보고 좋은 부분을 취합하기로 했다.

메인페이지

<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>