[개발일지 55일차] toco 프로젝트2 - 사이트 리뉴얼(6)

MSJ·2022년 7월 25일
0

PROJECT

목록 보기
15/34
post-thumbnail

2022-07-25

오늘 진행 사항

1) 팀원들 개발 진행률 및 상황 공유하기

2) 안풀리는 문제점들 공유

3) 개별 진행

4) 오후 4:40분 상황 교류 후 해산


1) 팀원들 진행 상황 공유

D님 E님을 제외하고는 대부분 진행이 앞서나가는 편! A, B, C님은 PC버전 레이아웃은 끝내서 미디어 쿼리를 진행할 단계이고, 나는 작업파일에 애니메이션만 넣으면 바로 미디어 쿼리 작업에 들어가도 될듯 하다. 아 그전에 nav 바도 건드려야하고.

2) 안풀리는 문제점들 공유

오늘은 다들 안풀리는 문제들은 없나보다. 생각보다 빠르게 모임이 진행되었고, 자잘한 것들 제외하고는 C님의 콘솔창 에러 not defind 된 것을 다같이 해결했다. js 파일에 함수 불러오기가 없어도 나는 slick slider 작동이 잘 됐는데, C님은 slick이 제대로 작동이 안되었다고 한다.

알고보니 CDN주소 링크를 불러올때, 제이쿼리를 먼저 부른 후 나머지 링크를 불러와야하는데 임포트 순서가 맞지 않아서 찾을 수가 없던거였다. 오늘의 깨달은 점은... JS는 정말 위에서 아래로 내려오는 순서가 중요하구나.

<!-- 슬릭슬라이더 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

된 것을

<script src="https://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

이렇게 제이쿼리를 최초로 불러올 수 있도록 한다

3) 개별 진행

이미지에 border-radius 들을 주고 있고, 세부 조정을 하려는데 살짝 답이 안보여서 멘토님께 물어볼 것들을 찾고있다... 아니 이미 찾았다. margin: -20px... 이런식으로 수동 조정하고 싶진 않아서 말이다 ㅇ.ㅠ ... margin: 0 auto;를 빼야하는 걸까... 고민고민.
이미지가 div박스 양옆에 딱 붙지 않는 건 아무리봐도 마진 제로 오토 때문인듯 싶은데....!

아무튼 이미지는 이렇게 마쳤다고 나머지는 각 섹션 별 카드에 애니메이션들을 넣어보고 있다.


어려운 점

레이아웃 틀을 잡아서 배치하는 것 까지는 잘 되지만 세부적인 조정을 할 때가 제법 힘이 든다.

  1. marign: 0 auto;가 깔려있는 상태일 때 마진, 패딩 말고 일때 적절히 조정할 수 있는 방법이 있는가

애니메이션에 대한 건 베이직한 스킬들이라 아직 궁금한 게 없는듯

해결 방법

도와줘요 내일의 멘토님

-> 하지만 오늘의 내가 찾았다
그냥 margin: 0 auto; 를 빼고 justify-content: space-between; 하나를 넣어주면 해결된다. 나머지 박스들도 0 auto 때문에 떨어졌던 간격들이 모두 깔끔하게 박스 크기 지정한대로 딱딱 붙게 됐다!

        .main-reference-container {
            width: 100%;
            height: 100%;
            margin-bottom: 5rem;
            /* border: solid 1px red; */
        }
        .main-reference-container .ref-logo-wrap {
            border: solid 1px red;
            margin: 0 auto;
            height: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;

소감

드디어 내일은 팀장 마지막 날이다. 멘토님께 보고만하고 다음 팀장으로 넘어가게 된다... 팀원들이 자꾸 연임할 생각이 없냐구 한다 ㅋㅋㅋ(다음 팀장이 자기일까봐?) 솔직히 말하자면 팀장을 더 이어서 해보고 싶지만 해본 결과 다른 분들도 팀장이 되는 경험은 매우 귀중할 것이라 생각한다. 정 힘들다, 안되겠다 싶으면 1:1 슥 찔러서 제가 하겠다 하고 일단은 넘겨줘야겠다

profile
제로부터 시작하는 프로그래밍&코딩

0개의 댓글