20220718

jungkwanlee·2022년 7월 18일

코딩일지

목록 보기

78/108

1) 학습한 내용

오전 10시(클론 코딩 미팅)

본래 구상대로면 1조가 해야 할 차례인데, 1조가 발표를 하지 않자 2조가 먼저 진행하게 되었다. 다른 프로젝트 BD의 멤버들은 안정적으로 발표를 이어나가다가 내 차례가 왔었다. 나는 내가 발표할 문장을 외웠으나 막상 내 차례가 오자 목소리가 떨렸다. 나는 짧고 말이 서툴더라도 최대한 내가 발표하기로 했었던 것들을 최대한 말을 했었고 나는 내 차례를 어떻게 해서든 발표를 망치지 않기 위해서 내가 맡을 카카오 지도 API에 적용시켰던 옵션들과 소스코드를 적용시키면서 발생했던 오류들을 말했었다. 그런데, 마지막에 Top 버튼을 진행할 오종인 분의 이름을 떠올리지 못하자 나는 다음 분이라는 말을 했었다. 이후, 오종인 팀원은 이후 말떨림 없이 진행시켰고 2팀은 프레젠테이션을 마쳤고 1조가 발표를 했었다.

이후, 다른 팀에서 진행되었던 클론 코딩의 과정과 발표를 보았고 HTML lint와 css lint를 통한 검사도 보았다. 린트의 역할은 게임 프로그래밍으로 치면 버그 체크와 같은 작업이다. 어느 해시 태그가 빠져있는지와 어디가 잘못 작성되었는지를 검사하는 역할을 한다.

카카오 지도 API

처음 내가 맡았던 카카오 지도 API는 페이지를 원본 홈페이지와 똑같은 HTML위치에 카카오 지도 API SDK링크와 소스 코드를 붙여넣었다가 소스코드 분리 작업 때, 자바스크립트 파일에 따로 분리해서 넣었다.

파일경로 수정전

파일경로 수정후

그리고, 여기에 지도마커가 나타나지 않았던 적이 있었는데, 이는 파일위치 경로에 문제가 있어서 제대로 나타나지 않았던 일이었고 이에 팀장에게 피드백을 넣어서 수정했다.

CSS 회전시키기

<body>
    <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="/img/tf2_soldier.png" alt="Avatar" style="width:300px;height:300px;">
          </div>
          <div class="flip-card-back">
            <h1>Jane Doe</h1> 
            <p>(Self)WW2 veteran/None</p> 
            <p>I am the soldier.</p>
          </div>
        </div>
      </div>
</body>

W3에 나온 것을 토대로 카드 플립을 적용시키면 다음과 같이 작성하면 된다.

<style>
        body{
            font-family: Arial, Helvetica, sans-serif;
        }

        .flip-card {
            background-color: transparent;
            width: 300px;
            height: 300px;
            perspective: 1000px;
          }
          
          .flip-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.6s;
            transform-style: preserve-3d;
          }
          .flip-card:hover .flip-card-inner {
            transform: rotateY(180deg);
          }
          .flip-card-front, .flip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
          }
          .flip-card-front {
            background-color: #bbb;
            color: black;
          }

        .flip-card-back{
            background-color: #2980b9;
            color: white;
            transform:rotateY(180deg);
        }
    </style>