Ctrl + F 로 검색

1. $.ajax {} 안에 <?=변수?>와 같은 PHP 구문이 없는지 확인

ajax안에는 주석을 달아놔도 php 구문이 있으면 오류가 난다. 콘솔 에러창에도 뜬니 확인. json은 만들어질 때 주석이 들어가지 않아야 한다고 전제되어있다고 함. 이걸로 하루를 날려먹었다

2. ajax 통신 이용하기

처음에 data_key : data_value 관계를 이해 못했다. 아무것도 모르고 ajax를 써야한다면 json 문법에 대해 검색해보길 추천한다. 키값은 구분을 위한 이름일 뿐이라 마음대로 지으시고, 벨류값은 실제로 데이터가 전송되어 넘어갈 값이다

$.ajax ({ 
  type: 'post',
  dataType: 'json',
  url: '',
  contentType: "charset=UTF-8",
  async: false, 
  data: {
    data_key : data_value,
    data_key2 : data_value2,
  },
  success: function(data){
  console.log("데이터 전송이 성공적 되었을 때 작동하는 콜백(?)함수란다. 여기다 함수를 넣어서 동작시킬 수도 있다.")},
  error: function(request, status, error) {
    console.log('code: ' + request.status + "\n" + 'message: ' + request.responseText + "\n" + 'error: ' + error);
  },
});

3. echo json_encode($객체), JSON.parse()

console.log(data) 반환시 뜨는 [object Object] 란?

https://www.daleseo.com/js-json/

1) 페이지 추가 수정

푸터 깨짐 현상 고침

수정전

수정후

@media screen and (max-width: 768px){
/*푸터*/
 .common-footer .footer-logo img {
        max-width : 128px;
    }
    .common-footer .copyright {
        font-size: 13px;
        color: #9E9E9E;
    }
    .common-footer .footer-left, .common-footer .footer-right {
        font-size: 14px;
        line-height: 18px;
    }
    .common-footer .footer-text{ 
        max-width: 768px;
        margin-top: 3vw;
        flex-direction: column;
        justify-content: space-between;
    }
}

@media screen and (max-width: 430px) {
/*푸터*/
 .common-footer .footer-logo img {
        margin-top: 20px;
        max-width : 100px;
        padding-top: 1.5vw;
        }
        .common-footer .copyright {
            font-size: 10px;
            word-break: keep-all;
        }
        .common-footer .footer-logo span {
            line-height: 26px;
            display: block;
        }
        .common-footer .footer-left, .common-footer .footer-right {
            font-size: 12px;
            line-height: 16px;
        }
        .common-footer .footer-text{ 
            max-width: 768px;
            gap:2vw;
            flex-direction: column;
            justify-content: space-between;
            word-break:break-all;
        } 
        .common-footer .footer-text span{
            display: block;
        }
}

2) 레퍼런스 레이아웃 고침

양옆 마진이 넓어지면서 미디어 쿼리시 중앙 컨텐츠가 밀려나와 2줄만 있었던 레퍼런스 로고들. 한쪽 줄이 비어보이던 것을 다시 3줄로 정렬되게 크기 조정을 했다

@media screen and (max-width: 768px){
    /* 레퍼런스 섹션 */
    .main-reference-container .ref-logo {
        width: 24vw;
        height: 10.5vw;
        margin: 1vw;
    }
    .main-reference-container img {
        width: 19vw;
        height:5.5vw;
    }
    .main-reference-container .resize {
        height: 7.5vw;
    }
    .main-reference-container .w18 {
        width: 17vw;
    }
    .main-reference-container .h8 {
        height: 7vw;
    }
    .main-reference-container .h5 {
        height: 2.5vw;
    }
    .main-reference-container .h6 {
        height: 4vw;
    }
    .main-reference-container .wh18-8 {
        width: 16vw;
        height: 7vw;
    }
    .main-reference-container .w14 {
        width: 12.5vw;
    }
    .main-reference-container .ref-logo-wrap {
        margin-left: 1.2vw;
    }
}

@media screen and (max-width: 430px) {
 /* 레퍼런스 섹션 */
    .main-reference-container .reference > p {
        padding-bottom: 8px;
    }
    .main-reference-container .ref-logo-wrap {
        margin-left: 2vw;
    }
    .main-reference-container .ref-logo {
        width: 25vw;
        height: 13vw;
        margin: 1vw;
    }
    .main-reference-container img {
        width: 22vw;
    }
}

3) 취업컨설팅 바탕으로 2차 이력서 작성

합격을 하든 하지 않든 어쨌든 이력서 작성은 여러번 해보면 훈련이 된다. 내일까지 마저 작성해서 담당자님께 메일을 보낼 예정

어려운 점

해결 방법

소감

포기않고 발견할 때 마다 손대다 보면 결국은 퀄업이 되는 것 같다!

오늘 진행 사항

1) 오전 10시 멘토링

멘토링 내용 정리 :

회사에서 어떤 능력을 가진 신입을 뽑을까? 같은 거.

기본을 잘 알아야한다..... (회사에서 요구하는 직무를 수행할 가장 기본능력)

비전공자라면 전공과 관련된 회사, 소프트웨어 회사 같은 곳에 가면 빠르게 된다

내가 뭘 할 수 있다를 증명할 수 있어야 한다

직군을 빨리 정하는게 좋다

프론트엔트를 배웠는데 백엔드도 하면 계속 지원하면서 백엔드도 공부하면서 계속 지원해보는게 좋다.

면접은 여러번 보는 걸 추천한다. 여러 번 면접을 하다보면 본 실력이 나오기도 하고.

그 회사가 어떤지 아는게 중요하다

나도 회사를 알아야되니까 적극적으로 물어보는 게 좋다 (들어가기 전에 알아야 방지할 수 있다)

2) 네비바 작업 후 여백 작업 진행중

네비바와 컨텐츠 간격이 같도록 수정하였다!

여백이 넓어진 만큼 컨텐츠 영역이 엇나가서 그 부분을 작업하고 있다.

어려운 점

다른 사람의 코드를 고치는 것

해결 방법

때로는 먼저 해결한 사람의 코드를 참고하는 것도 좋은 방법

소감

1. 결국은 쉬운 유지보수를 위해 처음부터 구조를 잘 짜자
2. 다른 사람의 코드를 보거나 고치는 것도 연습이 필요한 듯.

오늘 진행 사항

1) 오전10시~ 오후1시 모임

2) 피드백 반영 개별 작업

2) 피드백 반영 개별 작업

어려운 점

해결 방법

소감

전체 틀을 맞추면 나머지는 세부 조정과 디테일 업의 영역인 듯

오늘 진행 사항

오늘은 오전 10시에 다 같이 모여서 짧게 이야기하고, 나와 ㅈㅁ님, ㅇㅈ님, ㅁㅎ님 이렇게 넷이서 모임에 남아 1~8조 홈페이지 하나씩 살펴보면서 소감을 이야기했다.

1조 - 구직자

https://sbk554.github.io/resoft-project-1team/

3분 밖에 없었던 팀인데 PC버전부터 미디어 쿼리까지 다 구현해낸 것이 정말 대단하다. 남은 시간에는 세부적인 조정만 조금씩 더 하시면 될 것 같다.

메인 페이지와 회사소개 페이지의 컨텐츠가 중앙 정렬이 됐으면 좋았을 것 같다

2조 - Project BD

https://gaeul11.github.io/Resoft_02/

PC 버전이 잘 만들어졌다. 화면의 여백 배치나 정렬이 깔끔하다.

전반적으로 미디어쿼리를 진행하면서 크고 작은 요소들 크기만 정리하면 완성되면 될 것 같다.

3조 - 보람3조

https://amykim11.github.io/Teampro_No.2/

정보마당 제외하고 PC에서 모바일 768px까지는 구현이 다 된 것 같다. 우리 팀을 제외하고 완성도가 가장 높은 팀이다.

미디어 쿼리 세부조정만 마저하면 잘 완성해낼 것 같다. 다들 작업 잘 하신 것 같다

4조 - 브래킷(bracket)

https://jwon11.github.io/bracket2/

밸런스가 좋은 팀. 기본적인 배치는 모두 완료하시고, 미디어 쿼리까지 화면 구조는 잘 잡아 놓으신 것 같다.

자연스러운 미디어 쿼리 구성과 부드러운 애니메이션을 조금씩 추가하면 더 완성도 높은 페이지가 될 것 같다.

5조 - toco(today-coding)

https://jang-gwang.github.io/toco-renewal/index.html

가장 완성도 높은 팀인 것 같다.

정보마당 페이지 미디어 쿼리시 카드 보더라인 조절, 버튼 크기 조절 등 세부적인 조정이 더 필요해보인다.

6조 - Atoz

https://daeguai-team6.github.io/project2/

밸런스가 괜찮은 팀. PC 화면 구현은 대부분 끝내신 듯 하다.

지금부터 미디어 쿼리 진행하시면 될 것 같다. 애니메이션도 세부적으로 다 넣으면 될 것 같고. 다만 조직도 부분에 화질 저하 때문에 이미지를 쓴 티가 많이나서 아쉽다.

7조 - 럭키세븐

https://kunsu0806.github.io/new_resoft/

구조배치는 다 하신 것 같은데 완성도가 떨어진다.

미디어 쿼리야 지금부터 작업하시면 될 것 같다. 가장 중요한 메인 화면에서 네비게이션 바 배치가 어긋난 점이 인상에 많이 남아서 아쉬움이 강하다.

8조 - E1I4

https://dofoong.github.io/Reproject2/

사이트 완성도가 가장 떨어진다. 중요한 메인 페이지의 슬릭 슬라이더가 적용이 안되고 있어 깔아놓은 배경이 다 튀어나왔다. 그리고 회사 소개 페이지에 들어가면 네비게이션 바가 사라져서 다른 페이지를 방문할 수도 없다. 미디어 쿼리는 나중에 하면 되지만 PC화면에서 기본이 덜 된 느낌. 배치라도 다 되어있었으면 하는 아쉬움.

어려운 점

다른 사람들이 만들어 놓은 작업을 프로의 시선으로 바라보는 연습이 필요할 것 같다

해결 방법

개발자 모드를 켜서 구조를 어떻게 짰는지, 스크립트 작성 어떻게 했는지, 어떤 속성 태그와 기능을 줬는지 등등을 살피려 했다.

소감

우리 프로젝트를 다른 팀들과 같이 링크를 두고 평가하고 피드백 주는 시선으로 봤을 때 고쳐야 할 부분들이나 추가하고 싶은 부분 등이 보여서 좋았다.

오늘 진행 사항

1) 10시 모임 진행

2) 보완사항 체크 후 수정

3) 이력서 준비

남은 1~2주간 피드백 반영 기간으로, 피드백을 기다리는 중이라 이력서 작성을 위주로 진행함

2) 보완 사항 체크 후 수정

1. 네비바 텍스트가 깨지는 현상

header #gon #main-nav {
    text-align: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: baseline;
    align-content: stretch;
    margin-right: 100px;

에서 margin-right:0; 로 변경해주면 완료

2. a링크 안에 있는 텍스트가 마우스 오버를 하면 파란 텍스트가 되는 디테일 추가

a링크는 최초로 한번 누르면 text-decoration: none;을 넣어도 퍼플색이 되므로 기존 컬러를 #000 값으로 쥐어주고 오버 시 푸른색을 지정해주었음

a {  text-decoration: none; color: #000}

.main-news-container .news-contents:hover .main-news-container .news-text{
    color: #184B9F;
}

3. 깃헙에 업로드하면서 덮어씌워져서 사라졌던 미디어쿼리 폰트 사이즈 변경 추가

 .main-title {
        font-size: 28px;
        line-height: 42px;
    }
    .sub-title {
        font-size: 14px;
        margin-bottom: 50px;
        line-height: 26px;
    }
    .sub-text {
        font-size: 20px;
        font-weight: 600;
        line-height: 35px;
    }

4. 사진 로딩 지연시 생기는 로딩창 추가

html

<hedaer>
   <div id="load">
                <img src="../img/toco-common/loading.gif" alt="loading">
            </div>
</header>

css

#load{
    width:100%;
    height:100%;
    top:0;left:0;
    position:fixed;
    display:block;
    opacity:1;
    background:#fff;
    z-index:998;
    text-align:center
}

#load>img{
    position:absolute;
    top:50%;left:50%;
    z-index:999
    }

script

$(window).load(function() {
    $('#load').hide();
  });

어려운 점

딱히 없음

해결 방법

-

소감

이력서 작성이 생각보다 어렵다... 나를 잘 포장하는 것보다 진솔한게 편한데, 아무튼 18일까지 끝낼 생각.

오늘 진행 사항

1) 오전 10시 회의

프로젝트 마감 날이라 팀원 전체적으로 적용해야할 네비바 수정, 푸터 수정, 미디어 쿼리 확인 등등을 했다

2) 보완점 개별 작업 시간

3) 시안 외 추가 구현 기능들 문서 작성

1) 공통 부분 통일 시키기

헤더와 푸터를 팀원 모두 같은 것으로 통일 시켰다 이상하게 나는 헤더 햄버거 부분이 빠져나와서 원인 아직도 찾는중이다

2) 보완점 개별 작업

팀원마다 보완점 작업중이다 미처 미디어 쿼리 작성을 못마친 분들은 팀원들의 도움을 받아 미디어 쿼리 작성을 진행했다

3) 추가 구현 기능 문서 작성

아무렇게나 작성하는 것 보다는 그래도 구색을 갖춘 문서를 내가 잘 쓸 수 있을 거라 판단이 되어 작성했다 :D

어려운 점

네비게이션 바를 합치는 과정에서 오른쪽 끝에 있어야할 햄버거 메뉴바가 아래로 내려와있다... 코드가 꼬인 것 같은데. 찾아보는 중이다

해결 방법

-

소감

벌써 프로젝트가 마감되어간다니 놀랍다. 시간을 보니 4개월이 지났던데... 벌써 이력서를 쓸 시기다. 끝까지 잘 할 수 있을까 걱정했는데 하루하루 해치워 나가다보니 생각보다 할만했던 것 같다

오늘 진행 사항

1) 오전 10시 멘토링

1. 이미지 최적화
2. css / js 압축
3. 코드리뷰

-> 상수, 숫자값은 변수처리하는게 좋다 (코드 최적화) 4. 네비바 각페이지 동일하게 적용, 리소프트 홈페이지 시안에서 기능을 더 구현한 것 문서로 정리해보라

2) 팀 회의

푸터 공유, 네비바 통일 작업, 홈페이지 작업문서(시안 외 추가된 기능 등) 오늘까지 써오기

3) 개별 작업

4) 체크아웃 회의

3) 개별 작업

1. 네비바 및 햄버거 작업은 시간이 조금 촉박하여 피드백 시간에 수정할 것 같음

2. 딜레이 애니메이션도 내일까지 작업해서 제출할듯

3. 스크립트 일시정지/재생 기능 추가

버튼을 하나 추가하자니 버튼 이미지 배치에 시간이 조금 걸렸으나 position 부모/자식 부여로 깔끔하게 해결했다.

html

<div class="slick-button-wrap">
                <img id="prev-arrow" src="./img/toco-img1/icon-left-arrow.svg" alt="">
                <div id="stopNplay">
                    <img id="stop-btn" src="./img/toco-img1/icon-pause.svg" alt="">
                    <img id="play-btn" src="./img/toco-img1/icon-play.svg" alt="">
                </div>
                <img id="next-arrow" src="./img/toco-img1/icon-right-arrow.svg" alt="">
            </div>

css

/* <-> 버튼 */
.main-header .slick-button-wrap {
    position: absolute;
    z-index: 1;
    top: 750px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}
.main-header .slick-button-wrap img{
    padding: 1rem;
    cursor: pointer;
}
/* 헤더 - 플레이버튼 클릭 */
.main-header .slick-button-wrap > div {
    position: relative;
    width: 50px;
    height: 53px;
}
.main-header #play-btn {
    position: absolute; 
    left: 0;
    top: 0;
    display: none;
}

js

  // 슬릭 멈추고 재생할 때 CSS랑 기능
    $("#stop-btn").click(function(){
        $('.slick-header-wrap').slick('slickPause');
        $(this).css("display","none");
        $("#play-btn").css("display","block");
        });
    $("#play-btn").click(function(){
        $('.slick-header-wrap').slick('slickPlay')
        $(this).css("display","none");
        $("#stop-btn").css("display","block");
    });

어려운 점

아무래도 JS 와 jQuery 이해도가 낮다보니 객체함수 쓰는 것이 어렵다

해결 방법

강의 시간에 배웠던 간단한 예제 코드를 최대한 응용해보고 있음.

 $("#stop-btn").click(function(){
        $("#play-btn").css("display","block");
        });

같은 것

소감

js, jQuery를 좀더 기깔나게 쓰고 싶다... ㅠㅂㅠㅎㅎ;

1) 오전10시 스크럼 회의

2) 남은 팀원끼리 추가 회의

3) 체크아웃 회의

1) 스크럼 회의

각자 진행 사항 보고.. 미디어 쿼리는 한분 빼고 대부분 완성한 상태다

2) 남은 팀원끼리 추가 회의

1. 아무래도 디자인을 안배우신 분들은 화면 배치를 규칙적이고 틀에 맞춰야 정리되어 보인다는 걸 잘 모르는 듯 하다. 팀원분 페이지 화면 조정을 조금 도와드렸고

2. 공통적으로 쓰는 푸터 미디어 쿼리를 추가로 작업했다.

/* 푸터 */
.common-footer{
    width:100%;
    height: 250px;
    background: #E9E9E9;    
    display: table;
}
.footer-wrap { 
    display: table-cell;
    vertical-align:middle;
}
.footer-logo {
    margin: 0 auto;
    max-width: 1440px;
}
.footer-text{ 
    margin: 0 auto;
    max-width: 1440px;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    gap: 2vw;
    color:#9E9E9E;
}      
.copyright{
    color:#9E9E9E;
    font-weight:600;
}      
.footer-left,.footer-right{
    line-height:1.5rem;
    flex:1;
}

/* 미디어 쿼리 1440 - PC ---------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1440px) {
   /* 푸터 */
    .footer-logo, .footer-text{
        margin-left: 3rem;
    }
}

/* 미디어 쿼리 1280 - PC ---------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1280px) {
    /* 푸터 */
    .footer-logo, .footer-text{
        margin-left: 3rem;
        margin-right: 3rem;
    }
}
/* 미디어 쿼리 768 - 태블릿 ---------------------------------------------------------------------------------------------*/
@media screen and (max-width: 768px) { /* 푸터 */
    .common-footer .footer-logo img {
        /* margin-top: ; */
        max-width : 128px;
    }
    .common-footer .copyright {
        font-size: 13px;
        color: #9E9E9E;
    }
    .common-footer .footer-left, .common-footer .footer-right {
        font-size: 14px;
        line-height: 18px;
    }
    .common-footer .footer-text{ 
        max-width: 768px;
        margin-top: 3vw;
        flex-direction: column;
        justify-content: space-between;
    } 
}

/* 미디어 쿼리 430 - 모바일---------------------------------------------------------------------------------------------*/
 /* 푸터 */
    .common-footer .footer-logo{
        margin-left: 2rem;
        margin-right: 2rem;
    }
    .common-footer .footer-logo img {
    /* margin-top: ; */
    max-width : 100px;
    padding-top: 2vw;
    }
    .common-footer .copyright {
        font-size: 10px;
        word-break: keep-all;
    }
    .common-footer .footer-logo span {
        line-height: 26px;
        display: block;
    }
    .common-footer .footer-left, .common-footer .footer-right {
        font-size: 12px;
        line-height: 16px;
    }
    .common-footer .footer-text{ 
        max-width: 768px;
        margin-top: 3vw;
        gap:2vw;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 2rem;
        margin-right: 2rem;
        word-break:break-all;
    } 
    .common-footer .footer-text span{
        display: block;
    }
}

3. 개별 페이지 미세조정 조금씩 건드렸다 그고 팀원분이랑 여백도 일정하게 맞췄다

다음 해야할 것

1) 네비바 미디어쿼리 시 햄버거만 보임 2) 네비바 화면 조절 3) 스크립트 일시정지버튼 기능 4) 딜레이 애니메이션 넣기

어려운 점

1. 슬릭 슬라이더에 일시정지를 넣어야 한다

해결 방법

1. 찾아보는 중.

소감

구조화를 잘 해놔서 뿌듯하다. 수정사항이 있을 때 손이 덜 간다.

오늘 진행 사항

1) 오전10시 멘토링

2) 멘토링 후 스크럼 회의

3) 3시간 가량 팀원 코드 수정 시도

4) 개별 작업

5) 체크아웃 회의

1) 멘토링

멘토님: 안쪽 내용물은 거의 다 되어서 네비바 화면 줄였을 때 텍스트를 햄버거 메뉴아이콘 안에 넣는것, 푸터 간격이나 내용 조정 등을 하면 될것 같다

다음 시간에는 자바스크립트 코드 리뷰를 하겠다

2) 스크럼 회의

나 : 미디어 쿼리 구조적인 수정과 추가는 다 완료했고 더 세부적인 것 조정하겠다

3) 팀원 코드 수정 시도

조직도 부분 담당하는 팀원의 코드 수정을 시도 3명이 붙잡았지만 결과물은 조금 애매.. 해당 팀원의 미디어쿼리를 기다려볼듯

4) 개별 작업

px, 혹은 rem으로 고정되었던 것들을 용도에 맞게 표기 단위를 바꿨다. 특히 px로 줬던 이미지들은 768px 모바일 화면 시점부터 모두 vw (뷰포트) 단위로 변경하여 화면이 줄어들어도 해당 비율을 유지하도록 변경.

이후 미디어 쿼리 작업이 엄청 수월해졌다. 조정한 것도 대부분 플렉스나 마진0오토, width:100% 로 오토를 최대한 활용했고 화면 비율마다 조금씩 조정하는 정도의 미디어 쿼리다

물론, 이렇게 편하게 수정하기 위해 처음부터 구조화를 잘 하려고 많이 신경썼다

/* 미디어 쿼리 1440 - PC ---------------------------------------------------*/
@media screen and (max-width: 1440px) {
    /* 메인 섹션 전체 */
    .all-margin {
        margin-left: 3vw;
        margin-right: 3vw;
    }
    /* 헤더 */
    .main-news-container, .project, .service, .reference  {
        max-width: 1440px;
    }
    .all-margin {
        margin-left: 3vw;
        margin-right: 3vw;
    }
    /* 뉴스 (새소식) */
    .main-news-container .news-wrap {
        max-width: 1440px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .main-news-container .news-contents {
        margin-right: 5vw;
    }
    .main-news-container .news-contents:last-child {
        display: none;
    }
    /* 프로젝트 */
    .main-project-container lottie-player {
        max-width: 600px;
    }
    /* 서비스 */
    .main-service-container .service {
        display: flex;
        flex-direction:row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    /* 서비스 섹션 - 왼쪽 */
    .main-service-container .service-left-wrap .media1440 {
        max-width: 490px;
    }
    /* 서비스 섹션 - 오른쪽 */
    .main-service-container .service-right-wrap{
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        align-content: flex-start;
    }
    .main-service-container .service-left-wrap .media1440 {
        margin-top: 20px;
    }
    .main-service-container .service-img-wrap2 {
        margin-left: 2.5rem;
    }
    /* 레퍼런스 섹션 */
    .main-reference-container .ref-logo-wrap {
        justify-content:flex-start; 
    }
    .main-reference-container #hidden {
        display: none;
    }
    /* 푸터 */
    .footer-logo, .footer-text{
        margin-left: 3rem;
    }
}


/* 미디어 쿼리 1280 - PC --------------------------------------------------------*/
@media screen and (max-width: 1280px) {
    /* 메인 전체 */
    .all-margin {
        margin-left: 3vw;
        margin-right: 3vw;
    }
    .main-news-container, .project, .service, .reference  {
        max-width: 1000px;
    }
    .main-title {
        font-size: 35px;
        line-height: 58px;
    }
    /* 헤더 */
    .main-header .header-wrap {
        max-width: 1000px;
    }
    .main-header .header-text-wrap, .main-header .slick-button-wrap {
        margin-left: 0rem;
    }
    .main-news-container, .project, .service, .reference  {
        max-width: 1000px;
        margin: 0 auto;
    }
    /* 뉴스 (새소식) */
    .main-news-container .news-wrap {
        justify-content:center;
    }
    .main-news-container .news-contents:last-child {
        display: block;
    }
    .main-news-container .news-contents:nth-child(2n) {
        margin-right: 0;
    }
    .main-news-container .news-contents {
        margin-bottom: 3vw;
    }
    /* 프로젝트 섹션 */
    .main-project-container {
        background-color: #F9F8FF;
    }
    .main-project-container .project-wrap {
        position: static;
        background-color: #F9F8FF;
    }
    .main-project-container .project-img2 {
        margin-top: 0;
    }
    /* 프로젝트 섹션 - 오른쪽 */
    .main-project-container .project-wrap {
        flex-direction: column-reverse;
    }
    .main-project-container .project-right-wrap {
        max-width: 1000px;
        width: 100%;
        flex-direction: row-reverse;
        justify-content: center;
    }
    .main-project-container .project-right-wrap .project-title-wrap {
        width: 100%;
        text-align: right;
        position: static;
        left: 0;
    }
    .main-project-container .media1440 {
        display: none;
    }
    .main-project-container .media1280 {
        display: block;
        margin-top: 0px;
    }

    /* 프로젝트 섹션 - 왼쪽 */
    .main-project-container .project-img1:first-child{
     margin-bottom: 50px;
    }  

    /* 서비스 섹션 */
    .main-service-container {
        background-color: #F2F6FC;
    }
    .main-service-container .service {
        justify-content:center;
    }
    .main-service-container .service-left-wrap {
        max-width: 1000px;
        width: 100%;
    }
    .main-service-container .service-left-wrap .media1280 {
        margin: 0 auto;
    }
    .main-service-container .media1440 {
        display: none;
    }
    .main-service-container .media1280 {
        display: block;
    }
      /* 레퍼런스 섹션 */
    .main-reference-container .ref-logo-wrap {
        justify-content:center;
    }
    .main-reference-container .ref-logo-wrap:last-child {
        justify-content:flex-start;
    }

    /* 푸터 */
    .footer-logo, .footer-text{
        margin-left: 3rem;
    }
}

/* 미디어 쿼리 768 - 태블릿 -----------------------------------------------------*/
@media screen and (max-width: 768px) {
    /* 메인 전체 */

    section {
        margin: 0 auto; 
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .all-margin {
        margin-left: 4vw;
        margin-right: 4vw;
    }
    .main-header .header-wrap {
        max-width: 700px;
    }
    .main-news-container, .project, .service, .reference  {
        max-width: 700px;
    }
    .main-title {
        font-size: 28px;
        line-height: 42px;
    }
    .sub-title {
        font-size: 14px;
        margin-bottom: 50px;
        line-height: 26px;
    }
    .sub-text {
        font-size: 20px;
        font-weight: 600;
        line-height: 35px;
    }

    /* 헤더 텍스트 */
    .main-header .head-box img{
        height: 700px;
    }
    .main-header .slick-header-wrap{
        height: 700px;  
    }
    .main-header .header-text-wrap {
        top:300px;
    }
    .main-header h1 {
        max-width: 400px;
        font-weight: 600;
        font-size: 2.2em;
        line-height: 3.2rem;
    }
    .main-header p {
        max-width: 530px;
        font-weight: 300;
        font-size: 1.1rem;
        line-height: 2rem;
        bottom: 250px;
    }
    /* 헤더 슬릭 버튼 */
    .main-header .slick-button-wrap {
        top: 580px;
    }
    /* 뉴스 (새소식) 섹션 */
    .main-news-container .news-contents {
        width: 40vw;
    }
    .main-news-container .news-img-wrap {
        width: 40vw;
        height: 26.8vw;
        border-radius: 12px;
    }
    .main-news-container .news-img {
        width: 40vw;
        height: 26.8vw;
        border-radius: 12px;
    }
    .main-news-container .news-text {
        font-size: 15px;
        font-weight: 500;
        margin-top: 1.5vw;
        margin-bottom: 2.4vw;
    }
    .main-news-container .news-date {
        font-size: 13px;
        color : #AAAAAA;
    }
    /* 프로젝트 섹션 */
    .main-project-container .media1280 {
        max-width: 85vw;
        max-height: 85vw;
    }
    .main-project-container .project-left-wrap {
        max-width: 80vw;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .main-project-container .project-img1{
        width: 80vw;
        height: 57vw;
        border-radius: 12px;
    }  
    /* 프로젝트 마우스 오버 */
    .main-project-container .moado, .ecoce {
        width: 80vw;
        height: 57vw;
        border-radius: 12px;
    }
    .main-project-container .text-show h3{
        font-size: 1.3em;
    }
    .main-project-container .text-show p{
        font-size: 1em;
    }
    /* 서비스 섹션 */
    .main-service-container .media1280 {
        max-width: 85vw;
        max-height: 85vw;
    }
    /* 서비스 섹션 - 오른쪽 */
    .main-service-container .service-img-wrap2 {
        margin-top: 10rem;
        margin-left: 4vw;
    }
    .main-service-container .service-card {
        width: 39vw;
        height: 49vw;
        margin-bottom:4vw;
        border-radius: 12px;
    }
    .main-service-container .service-card:last-child{
        margin-bottom: 0;

    } 
    .main-service-container .service-card h3 {
        font-size: 24px;
        font-weight: 500;
        line-height: 43px;
    }
    .main-service-container .service-card p {
        font-size: 14px;
        font-weight: 300;
    }
    .main-service-container .service-card .card-hide p {
        color: #fff;
        font-size: 18px;
        font-weight: 400;
        line-height: 30px;
    }
      /* 레퍼런스 섹션 */
    .main-reference-container .ref-logo {
        width: 27.5vw;
        height: 13vw;
        margin: 1vw;
    }
    .main-reference-container img {
        width: 22vw;
    }
    .main-reference-container .resize {
        height: 9vw;
    }
    .main-reference-container .w18 {
        width: 18vw;
    }
    .main-reference-container .h8 {
        height: 8vw;
    }
    .main-reference-container .wh18-8 {
        width: 18vw;
        height: 8vw;
    }
    .main-reference-container .w14 {
        width: 14vw;
    }
}

/* 미디어 쿼리 430 - 모바일-------------------------------------------------------*/
@media screen and (max-width: 430px) {
    /* 메인 전체 */
    section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .all-margin {
        margin-left: 5vw;
        margin-right: 5vw;
    }
    .main-news-container, .project, .service, .reference  {
        max-width: 420px; 
    }
    .sub-text {
        font-size: 16px;
        line-height: 27px;
        line-height: 31px;
    }
    /* 네비바 */
        header #gon {padding: 5px; }
    /* 헤더 텍스트 */
    .main-header .head-box img{
        height: 600px;
    }
    .main-header .slick-header-wrap{
        height: 600px; 
    }
    .main-header .header-text-wrap {
        top:270px;
    }
    .main-header h1 {
        max-width: 390px;
        font-weight: 600;
        font-size: 30px;
        line-height: 45px;
    }
    .main-header p {
        max-width: 370px;
        font-weight: 300;
        font-size: 13px;
        line-height: 24px;
    }
    /* 헤더 슬릭 버튼 */
    .main-header .slick-button-wrap {
        top: 500px; 
    }
    .main-header .slick-button-wrap #prev-arrow, #next-arrow{
        width: 32px;
    }
    .main-header .slick-button-wrap #stop-btn{
        width: 12px;
    }
    /* 뉴스 */
    .main-news-container .news-img-wrap {
        border-radius: 10px;
    }
    .main-news-container .news-img {
        border-radius: 10px;
    }
    /* 프로젝트 섹션 */
    .main-project-container .project-img1 {
        border-radius: 10px;
    }
    .main-project-container .moado, .ecoce {
        border-radius: 10x;
    }
    .main-project-container .project-img1:first-child{
        margin-bottom: 30px;
       } 
    .main-project-container .text-show h3{
        font-size: 14.5px;
    }
    .main-project-container .text-show p{
        font-size: 12px;
        line-height: 17px;
    }

    /* 서비스 섹션 */
    .main-service-container .service-card {
        border-radius: 10px;
    }
    .main-service-container .service-card h3 {
        font-size: 18px;
        line-height: 43px;
    }
    .main-service-container .service-card p {
        font-size: 13px;
    }
    .main-service-container .service-card .card-hide p {
        font-size: 14px;
        line-height: 28px;
    }
    /* 레퍼런스 섹션 */
    .main-reference-container .ref-logo {
        width: 27.5vw;
        height: 13vw;
        margin: 1vw;
    }
    .main-reference-container img {
        width: 22vw;
    }
}

어려운 점

1. 개별 작업 진행 당시 하나의 난제가 있었다. 지금에서야 이렇게 간단한 걸 생각못했나 싶지만, 아무래도 초보 개발자 입장에선 그랬다. 아래 이미지에서 콘텐츠 영역에 전부 margin-right와 margin-bottom을 준 상태다. 근데 justify-content: center을 주었을 때 컨텐츠가 마진을 포함해서 중앙에 오겠지?

여기서 문제. 이 콘텐츠는 div 부모태그에 아래 같은 자식들이고 저 주황영역만 지우고 싶은데, 동시 적용은 되어야한다.

하지만 그 당시 이걸 어떻게 해결해야되지, 하면서 html 구조 자체를 변경하는 등 시도해봄 부모를 두개 만들었더니 flex로 잡아놓은 레이아웃이 다 엇갈려서 어떻게 해야되나 싶었음.

해결 하려고 프로그래밍 모르는 친구들에게 '퀴즈 하나 낼게' 말하고 그림을 그려서 이럴 때 어떻게 해결하면 좋을까? 하고 물으려했던 참이었다. 그제서야 강의에서 짧게 스쳐지나가듯 썼던 코드가 딱 떠오름

해결 방법

1. 바로 짝수 지정 선택자였다

 .main-news-container .news-contents:nth-child(2n) {
        margin-right: 0;
    }

즉 news-contents의 nth-child(2n) 짝수번째 자식들에게만 오른쪽-마진을 0을 주겠다는 것. 이렇게 해서 모든 문제 해결! 앞으로는 선택자를 더 친근하게 써먹을 수 있을 것 같다.

소감

미디어 쿼리는 거의 다해가서 한시름 놓은 듯 남은 건 네비바와 푸터 정도

오늘 진행 사항

1) 오전 10시 스크럼 회의 진행

2) 개별 진행

3) 체크아웃 회의

폰트 정보 통일, nav바 통일은 이번주 내로 진행 공통 환경 모여서 설정하는거 한시간쯤 더 진행

1440px : 제목 - 폰트크기 40px, 행간 58px / 부제목 폰트크기 26px, 행간 45px 1280px : 제목 - 폰트크기 35px, 행간 58px / 부제목 폰트크기 26px, 행간 45px 430x : 제목 - 폰트크기 28px / 부제목 폰트크기 14px

컨테이너 패딩 : 120px

나머지 line-height나 font-weigth는 시안과 동일

2) 개별 진행

미디어 쿼리 진행중... 1024는 안해도 된다셔서 뺄 예정

레퍼런스 부분은 이것을

/* .main-reference-container .ref-logo-wrap {
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.main-reference-container #hidden {
    visibility: hidden;
}
.main-reference-container .ref-logo{
    border: solid 1px #DBDBDB;
    background-color: #fff;
    width: 220px;
    height: 100px;
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
} 
.main-reference-container .ref-logo-wrap:last-child {
    margin: 0;
    border: 1px solid red;
} */

이것으로 변경

.main-reference-container .ref-logo-wrap {
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.main-reference-container .ref-logo {

    border: solid 1px #DBDBDB;
    background-color: #fff;
    width: 220px;
    height: 100px;
    margin: 8.5px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;;
}

/* 미디어 쿼리 1440 - PC */
@media (max-width: 1440px) {
    /* 메인 섹션 전체 */
    .all-margin {
        margin-left: 3vw;
        margin-right: 3vw;
    }
    /* 헤더 */
    .main-header .header-wrap {
        /* width: 1024px; */
    }

    .main-news-container, .project, .service, .reference  {
        max-width: 1440px;
        /* border:  solid 1px red; */
    }
    .all-margin {
        margin-left: 3vw;
        margin-right: 3vw;
    }
    .main-header .header-text-wrap, .main-header .slick-button-wrap {
        margin-left: 3vw;
    }
    /* 뉴스 (새소식) */

    .main-news-container .news-wrap {
        max-width: 1440px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        align-content: center;
        /* border: 1px solid red; */
    }
    .main-news-container .news-contents {
        width: 300px;
        margin-right: 5rem;
    }
    .main-news-container .news-contents:last-child {
        display: none;
    }
    .main-news-container .news-img-wrap {
        width: 300px;
        height: 200px;
        border-radius: 20px;
        position:relative;
        overflow: hidden;
    } 
    /* 프로젝트 */

    .main-project-container lottie-player {
        max-width: 600px;
    }

    /* 서비스 */
    .main-service-container .service {
        /* max-width: 1000px; */
        display: flex;
        flex-direction:row;
        flex-wrap: wrap;
        justify-content: space-between;
        /* border: solid 1px red; */
    }
    /* 서비스 섹션 - 왼쪽 */
    .main-service-container .service-left-wrap  {
        /* width: 50%; */
        /* height: 100%; */
        /* width: 1000px; */
        /* border: solid 1px orange; */
    }
    .main-service-container .service-img1 {
        /* width: 400px; */
        /* height: 680px; */

    }
    .main-service-container .service-left-wrap lottie-player {
        /* margin-left: -1rem; */
        max-width: 490px;
        /* border: solid 1px red; */
    }
    /* 서비스 섹션 - 오른쪽 */

    .main-service-container .service-right-wrap{
        /* width: 50%; */
        height: 100%;
        display: flex;
        flex-direction: row;
        /* flex-wrap: wrap; */
        justify-content: center;
        align-items: flex-start;
        align-content: flex-start;
        /* border: solid 1px orange; */
    }

    .main-service-container .service-left-wrap lottie-player {
        margin-top: 20px;
    }
    .main-service-container .service-img-wrap2 {
        margin-left: 2.5rem;
    }
    /* 레퍼런스 섹션 */

    .main-reference-container .ref-logo-wrap {
        justify-content:flex-start; 
    }
    .main-reference-container #hidden {
        display: none;
    }


    /* 푸터 */
    .footer-logo, .footer-text{
        margin-left: 3rem;
    }
}


/* 미디어 쿼리 1280 - PC */
@media (max-width: 1280px) {
    /* 메인 전체 */

    /* 헤더 */
    .main-header .header-wrap {
        max-width: 1000px;
    }
    .main-header .header-text-wrap, .main-header .slick-button-wrap {
        margin-left: 0rem;
    }
    .main-news-container, .project, .service, .reference  {
        max-width: 1000px;
        margin: 0 auto;
    }
    /* 뉴스 (새소식) */

    .main-news-container .news-wrap {
        max-width: 1000px;
        justify-content:center;
    }
    .main-news-container .news-contents:last-child {
        display: block;
    }
    /* 프로젝트 섹션 */

    .main-project-container {
        background-color: #F9F8FF;
    }
    .main-project-container .project-wrap {
        position: static;
    }
    /* 프로젝트 섹션 - 오른쪽 */
    .main-project-container .project-right-wrap {
        max-width: 1000px;
        /* border: 1px solid red; */
    }
    .main-project-container .project-title-wrap {
        position: static;
        /* border: 1px solid blue; */
    }
    .main-project-container .project-wrap {
        display: flex;
        flex-direction: column-reverse;
    }
    .main-project-container .project-img2 {
        /* border: 1px solid blue; */
    }

    .main-project-container .media1440 {
        display: none;
    }
    .main-project-container .media1280 {
        display: block;
    }

    /* 프로젝트 섹션 - 왼쪽 */
    .main-project-container .project-left-wrap {
        /* border: 1px solid red; */
    }
    .main-project-container .project-img1:first-child{
     margin-bottom: 50px;
    }  

    /* 서비스 섹션 */
    .main-service-container {
        background-color: #F2F6FC;
    }
    .main-service-container .service {
        max-width: 1000px;
        justify-content:center;
        /* border: 1px solid red; */
    }
    .main-service-container .service-title-wrap {

        /* border: 1px solid blue; */
    }
    .main-service-container .service-img1 {
        /* border: 1px solid blue; */

    }
    .main-service-container .service-left-wrap lottie-player {
        margin: 0 auto;
        /* border: 1px solid blue; */
    }
    .main-service-container .media1440 {
        display: none;
    }
    .main-service-container .media1280 {
        display: block;
    }
      /* 레퍼런스 섹션 */
      .main-reference-container {
        width: 100%;
        height: 100%;
    }
    .main-reference-container .ref-logo-wrap {

        /* border: 1px solid orange; */
    }
    /* 푸터 */
    .footer-logo, .footer-text{
        margin-left: 3rem;
    }
}

/* 미디어 쿼리 1024 - 태블릿  */
/* @media (max-width: 1024px) {

    .main-title {
        font-size: 35px;
    }
    .news-contents .news-wrap {

    }
} */

/* 미디어 쿼리 768 - 태블릿 */
@media (max-width: 768px) {

    .main-header .header-wrap {
        max-width: 600px;
        margin-left: 3rem;
        margin-right: 3rem;
    }
    .main-news-container, .project, .service, .reference  {
        max-width: 600px;
        margin-left: 3rem;
        margin-right: 3rem;
    }
    /* 헤더 */
    /* 헤더 텍스트 */
    .main-header .head-box img{
        height: 700px;
    }
    .main-header .slick-header-wrap{
        height: 700px;  
    }
    .main-header .header-text-wrap {
        top:300px;
    }
    .main-header h1 {
        max-width: 400px;
        font-weight: 600;
        font-size: 2.2em;
        line-height: 3.2rem;
    }
    .main-header p {
        max-width: 530px;
        font-weight: 300;
        font-size: 1.1rem;
        line-height: 2rem;
        bottom: 250px;
    }
    /* 헤더 슬릭 버튼 */
    .main-header .slick-button-wrap {
        top: 580px;
    }
}

/* 미디어 쿼리 430 - 모바일*/
@media (max-width: 430px) {

    .main-title {
        font-size: 28px;
        padding-bottom: 1rem;
    }

    .sub-title {
        font-size: 14px;
    }
}

어려운 점

1. 분명 position:static으로 옵션을 기본으로 만들어 줬는데도 효과를 받고있는 것 마냥 컨텐츠가 겹쳐서 보여진다.

아예 포지션을 해제하는 속성키는 position : inherit; 인 것 같은데 이것도 적용이 안됨.

해결 방법

1. 그래.. 이것이 안 될리가 없다.. 구조가 한번 reverse된 구조라 글과 이미지 정렬을 위해선 다른 곳에도 reverse를 줘야하고.. position:static을 줬는데도 안됐던 건 이 flex 구조를 건드리지 않아서 그렇게 보였던 것 같다. 그리고 flex와 positon 설정해야하는 곳을 제대로 집어보지 않아서 그랬던 듯. 아래 코드를 통해서 완전히 해결됐다.

  /* 프로젝트 섹션 - 오른쪽 */
    .main-project-container .project-wrap {
        flex-direction: column-reverse;
    }
    .main-project-container .project-right-wrap {
        width: 100%;
        flex-direction: row-reverse;
        justify-content: center;
    }
    .main-project-container .project-right-wrap .project-title-wrap {
        width: 100%;
        text-align: right;
        position: static;
        left: 0;
    }
    .main-project-container .media1440 {
        display: none;
    }
    .main-project-container .media1280 {
        display: block;
        margin-top: 0px;
    }

소감

이틀 안으로 내 파트는 마무리를 할 수 있을 것 같다 + 끼워 맞추기식 코드를 작성하지 않아도 코드의 기능을 그대로 살려서 문제를 해결하는 것이 목표다

오늘 진행 사항

1) 오전 10시 스크럼 회의

2) 개별 작업 진행

3) 체크아웃 회의 후 종료

2) 개별 작업 진행

현재 1280px쪽 미디어 쿼리 진행중 여백, 패딩, 구조 조정중

/* 미디어 쿼리 1280 - PC */
@media (max-width: 1280px) {
    /* 메인 전체 */
    section {
        margin: 0 auto; 
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .main-title, .sub-title{
        text-align: center;
    }

    /* 헤더 */
    .main-header .header-wrap {
        width: 768px;
    }
    .main-header .header-text-wrap, .main-header .slick-button-wrap {
        margin-left: 0rem;
    }
    .main-news-container, .project, .service, .reference  {
        max-width: 768px;
    }

    .main-news-container {

    }
    .main-news-container .news-wrap {
        margin: 0 auto;
        width: 768px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        align-content: center;
    }
    .main-news-container .news-contents {
        width: 300px;
    }
    .main-news-container .news-img-wrap {
        width: 300px;
        height: 200px;
        border-radius: 20px;
        position:relative;
        overflow: hidden;
    }
    .main-news-container .news-img {
        width: 300px;
        height: 200px;
        border-radius: 20px;
        position:relative;
        background: url('./img/toco-common/sample-img.png') no-repeat center / cover;
        transition: transform 0.25s ease-in-out;
        opacity:1;
    }   

}

/* 미디어 쿼리 1024 - 태블릿  */
@media (max-width: 1024px) {

}

/* 미디어 쿼리 768 - 태블릿 */
@media (max-width: 768px) {

    .main-header .header-wrap {
        max-width: 600px;
        margin-left: 3rem;
        margin-right: 3rem;
    }
    .main-news-container, .project, .service, .reference  {
        max-width: 600px;
        margin-left: 3rem;
        margin-right: 3rem;
    }
    /* 헤더 */
    /* 헤더 텍스트 */
    .main-header .head-box img{
        height: 700px;
    }
    .main-header .slick-header-wrap{
        height: 700px;  
    }
    .main-header .header-text-wrap {
        top:300px;
    }
    .main-header h1 {
        max-width: 400px;
        font-weight: 600;
        font-size: 2.2em;
        line-height: 3.2rem;
    }
    .main-header p {
        max-width: 530px;
        font-weight: 300;
        font-size: 1.1rem;
        line-height: 2rem;
        bottom: 250px;
    }
    /* 헤더 슬릭 버튼 */
    .main-header .slick-button-wrap {
        top: 580px;
    }
}

/* 미디어 쿼리 430 - 모바일*/
@media (max-width: 430px) {

}

어려운 점

-

해결 방법

-

소감

음... 레퍼런스 div 구조를 잘못했나 싶다가도 이 방법이 지금까진 최선인 것 같다. 일단 진행하자. 하다보면 구조 짜임새 능력도 좋아지겠지.

오늘 진행 사항

1) 오전 10시 멘토링

뭔가 멘토링 내용 정리 담당이 된 듯

220804멘토링 이번주에 마무리되면 다음주에 코드리뷰도 하고

URL과 함께 리소프트에 제출할 때

1) 5조만의 특징, 구현 포인트 추가작업한 것들 등.. 아까우니까 문서(내용)를 준비해둬도 좋을 듯 왜 그렇게 구현을 했는지.... 2) 테스트 진행한 내용도 문서 만들면 좋을듯

2) 조 모임 간단히 후 개별 작업 진행

3) 개발일지 작성

까먹지 않으려고 작업 진행 어느 정도 되면 바로 쓸 생각

4) 4시 40분 모여 폼제출 후 해산할 듯

2) 개별 작업 진행

미디어 쿼리를 계속 진행중. 1280px 기준으로 세부적인 페이지 수정중에 있다.

1. 화면이 작아지면서 flex했던 레퍼런스 로고가 튀어나가는 현상을 고쳐야 한다

-> 해결 방법

1) html 구조에서 div class="logo-wrap"으로 클래스 지정 2) 미디어 쿼리에 logo-wrap:last-child로 마지막에 튀어나온 로고 부분에 한번더 flex 3) 그러면 맨 마지막 부분은 카드가 하나 없으므로 margin: 0 auto를 넣었을때 배열이 망가지는 현상이 발생 4) 맨 마지막에 실제로는 사용하지 않는 카드 공간을 하나 더 생성 5) visibility:hidden을 사용하여, 보이진 않지만 실제로 공간은 차지하는 속성 부여 6) 깔끔히 해결!

  <!-- 레퍼런스 -->
    <section class="main-reference-container">
    <div class="reference">
        <h1 class="main-title">레퍼런스</h1>
        <p class="sub-title">REFERENCE</p>
        <div class="ref-logo-wrap">
            <div class="logo-wrap">
                <div class="ref-logo"><img src="./img/toco-img1/logo-DG-KIRA.png" alt="KIRA대구광역시건축사회"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-DCU.svg" alt="DCU대구가톨릭대학교"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-KMOU.svg" alt="KMOU국립한국해양대학교"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-DGtech-Highschool.png" alt="TECH대구공업고등학교"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-dalseo.svg" alt="대구광역시 달서구"></div>
            </div>
            <div class="logo-wrap">
                <div class="ref-logo"><img src="./img/toco-img1/logo-colorfulDG.svg" alt="컬러풀 대구"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-songpa.svg" alt="송파구"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-DCCI.png" alt="DCCI대구상공회의소"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo_DG-ICT.png" alt="대경ICT산업협회"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-DIP.png" alt="DIP대구디지털산업진흥원"></div>
            </div>
            <div class="logo-wrap">
                <div class="ref-logo"><img src="./img/toco-img1/logo-maeil-newsletter.svg" alt="매일신문"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo_people-power.svg" alt="국민의힘"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-CAK.svg" alt="CAK대한건설협회"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo_KR-Master-Chef.png" alt="MasterChef한국조리기능장협회"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo_Rotary.png" alt="국제로타리"></div>
            </div>
            <div class="logo-wrap">
                <div class="ref-logo"><img src="./img/toco-img1/logo-KNU.svg" alt="경북대학교"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-Lions-clubs.svg" alt="라이온즈 클럽 인터네셔널"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-JCI.svg" alt="JCI한국청년회의소"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-Kibwa.png" alt="IT여성기업인협회"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-suseong.svg" alt="행복수성"></div>
            </div> 
            <div class="logo-wrap">
                <div class="ref-logo"><img src="./img/toco-img1/logo-MBC.png" alt="대구MBC"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-KECA.png" alt="KECA한국전기공사협회"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-KMU.svg" alt="계명대학교"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-eupjong.svg" alt="eupjong중소기업융합중앙회"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-TBN.svg" alt="TBN대구교통방송"></div>
            </div>
            <div class="logo-wrap">
                <div class="ref-logo"><img src="./img/toco-img1/logo-DG-SportsCouncil.png" alt="sports대구광역시체육회"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-Bareumi.png" alt="바르미 (주)즐거운세상"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-MMU.svg" alt="MMU국립목포해양대학교"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-DG-Credit.png" alt="대구신용보증재단"></div>
                <div class="ref-logo" id="hidden"><img src="./img/toco-img1/logo-DG-Credit.png" alt=""></div>
            </div>
        </div>
    </div>
    </section>

    .main-reference-container {
        width: 100%;
        height: 100%;
        background-color: #F9F9F9;
    }
    .main-reference-container .ref-logo-wrap {
        margin: 0 auto;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        border: 1px solid blue;
    }
    .main-reference-container .logo-wrap:last-child {
        margin: 0 auto;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between ;
    }
    .main-reference-container #hidden {
        visibility: hidden;
    }
    .main-reference-container .ref-logo{
        width: 220px;
        height: 100px;
        margin-top: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        border: 1px solid red;
    } 

2. 그 밖에 사이즈 조절

화면에 맞춰 새 소식 뉴스 카드 하나 사라지게 만듬

서비스 부분 json 이미지 작아짐

화면 줄일때 양쪽 여백.... 등등 패딩이나 여백 고친게 많다

어려운 점

해결 방법

막힌 점, 해결 방법은 진행사항에 써놓음

소감

레퍼런스 부분. html에서 class:last-child에서 flex를 한번 더 주는 것까진 했는데, 마지막 줄만 회사 로고 하나가 부족해서 정렬이 이상하게 됐다. 처음에는 margin: 80%, 79.5%, 79%.... 주면서도 배열이 잘 맞지 않아서 아... 이상한데, 하다가 이걸 손으로 직접 맞추고 있는 것 자체가 어라 이게 아닌데 싶었다. 그렇게 떠오른게 강의시간에 배웠던 display: none; 과 visibility: hidden이다. 이 둘의 차이는 전자는 해당 내용물이 숨겨지면서 공간도 차지하지 않지만, 후자는 내용물은 숨겨지지만 공간은 차지하는 거다. 설마 이게 이렇게 쓰일 줄은 몰랐다. 너무 많은 정보를 머릿속에 넣는 것 같아서 어질하긴 했지만 알아두면 다 써먹는 구나.. 싶다.

오늘 진행 사항

1) 오전 10시 모임

2) 개별 작업 진행

3) 오후 4:40 모임 후 해산

2) 개별 작업

슬릭슬라이더 버튼 연결 후 미디어 쿼리 진행중

<||> 버튼에 슬릭 슬라이더 버튼 기능을 연결하는 것은 바로 해결 누르면 왼쪽 오른쪽 잘 간다

 $('.slick-header-wrap').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 3000,
        pauseOnHover:true,
        arrows: true,
        infinite:true,
        speed: 500,
        prevArrow: $('#prev-arrow'), // 이 부분이
        nextArrow: $('#next-arrow') // 버튼 연결 부분
    });

2. 어제 헤더 이미지를 가로 화면 전체로 차지하게 변경하면서 텍스트가 헤더를 따라 왼쪽에 쏠리는 현상이 있었다. 화면이 좁아짐에 따라 중앙정렬을 항상 해주게 변경해야 된다.

포지션으론 위치가 안잡혀서 어떻게 할까 싶었는데 html에 컴포넌트화를 한번 더 하면서 해결했다. 텍스트와 버튼을 한꺼번에 묶고 헤더이미지와 분리. 그리고 헤더 전체를 감싸는 부모 div를 하나 더 만들어서 포지션으로 자식 위치 조정 후, 감싸는 부분 부모에 마진 0 auto를 주어 해결했다.

/* 헤더 */
.main-header {
    /* width: 100%; */
    /* height: 900px; */
   position: relative;
}
.main-header .header-wrap{
    /* position: absolute; */
    margin: 0 auto;
    /* border: 2px solid red; */
    max-width: 1440px;
    /* z-index: 1; */
    /* height: 900px;  */
    /* position: relative; */
    /* position: absolute; */
    /* z-index: 1; */
}
.main-header .head-box img{
    width: 100%;
    height: 900px;
    object-fit: cover;
    filter: brightness(55%);
    z-index: -1;
}
.main-header .slick-header-wrap{
    position: static;
    z-index: 1;
    width: 100%;
    height: 900px;  
}
.main-header .header-wrap h1, .main-header .header-wrap p{
    color: rgb(240, 240, 240);

}
.main-header .header-text-wrap {
    position: absolute;
    top:460px;
}
.main-header h1 {
    max-width: 450px;
    font-weight: 700;
    font-size: 2.8rem;
    line-height: 4rem;
}
.main-header p {
    max-width: 680px;
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 2rem;
    bottom: 250px;
    margin-top: 2rem;
}
/* <-> 버튼 */
.main-header .slick-button-wrap {
    position: absolute;
    z-index: 1;
    top: 750px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}
.main-header .slick-button-wrap img{
    padding: 1rem;
    /* border: 1px solid red; */
    cursor: pointer;
}

3. 미디어 쿼리는 사이즈별로 계속 작업중이다 미디어 쿼리 작업을 너무 들쭉날쭉 하는 것 같은 느낌... 1280 사이즈부터 차례대로 건드려봐야겠다. 필요없는 중복코드도 잘 줄여나가야 한다.

/* 미디어 쿼리 1440 */
@media (max-width: 1440px) {
    /* 메인 섹션 전체 */

    /* 헤더 */
    .main-header .header-wrap {
        /* width: 1024px; */

    }
    .main-news-container, .project, .service, .reference  {
        max-width: 1440px;
        /* border:  solid 1px red; */
        margin-left: 3rem;
        margin-right: 3rem;
    }
    /* 뉴스 (새소식) */
    .main-news-container {

    }
    .main-header .header-text-wrap, .main-header .slick-button-wrap {
        margin-left: 3rem;
    }
    .main-news-container .news-wrap {
        /* margin: 0 auto; */
        max-width: 1440px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        align-content: center;
    }
    .main-news-container .news-contents {
        width: 300px;
        margin-right: 5rem;
    }
    .main-news-container .news-contents:last-child {
        display: none;
    }
    .main-news-container .news-img-wrap {
        width: 300px;
        height: 200px;
        border-radius: 20px;
        position:relative;
        overflow: hidden;
    }
    .main-news-container .news-img {
        width: 300px;
        height: 200px;
        border-radius: 20px;
        position:relative;
        background: url('./img/toco-common/sample-img.png') no-repeat center / cover;
        transition: transform 0.25s ease-in-out;
        opacity:1;
    }   
    .main-news-container .news-contents:last-child {
    /* display: none; */
    }

    /* 서비스 */
    .main-service-container .service-left-wrap lottie-player {
        max-width: 600px;
        margin-top: 130px;

    }
    /* 푸터 */
    .footer-logo, .footer-text{
        margin-left: 3rem;
    }
}


/* 미디어 쿼리 1280 */
@media (max-width: 1280px) {
    /* 메인 전체 */
    section {
        margin: 0 auto; 
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .main-title, .sub-title{
        text-align: center;
    }

    /* 헤더 */
    .main-header .header-wrap {
        width: 768px;
    }
    .main-news-container, .project, .service, .reference  {
        max-width: 768px;
    }

    .main-news-container {

    }
    .main-news-container .news-wrap {
        margin: 0 auto;
        width: 768px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        align-content: center;
    }
    .main-news-container .news-contents {
        width: 300px;
    }
    .main-news-container .news-img-wrap {
        width: 300px;
        height: 200px;
        border-radius: 20px;
        position:relative;
        overflow: hidden;
    }
    .main-news-container .news-img {
        width: 300px;
        height: 200px;
        border-radius: 20px;
        position:relative;
        background: url('./img/toco-common/sample-img.png') no-repeat center / cover;
        transition: transform 0.25s ease-in-out;
        opacity:1;
    }   

}

/* 미디어 쿼리 768 */
@media (max-width: 768px) {

    .main-header .header-wrap {
        max-width: 600px;
        margin-left: 3rem;
        margin-right: 3rem;
    }
    .main-news-container, .project, .service, .reference  {
        max-width: 600px;
        margin-left: 3rem;
        margin-right: 3rem;
    }
    /* 헤더 */
    /* 헤더 텍스트 */
    .main-header .head-box img{
        height: 700px;
    }
    .main-header .slick-header-wrap{
        height: 700px;  
    }
    .main-header .header-text-wrap {
        top:300px;
    }
    .main-header h1 {
        max-width: 400px;
        font-weight: 600;
        font-size: 2.2em;
        line-height: 3.2rem;
    }
    .main-header p {
        max-width: 530px;
        font-weight: 300;
        font-size: 1.1rem;
        line-height: 2rem;
        bottom: 250px;
    }
    /* 헤더 슬릭 버튼 */
    .main-header .slick-button-wrap {
        top: 580px;
    }
}

/* 미디어 쿼리 430 */
@media (max-width: 430px) {

}

어려운 점

아직은 없음 세부조정이 번거로운 정도. 많이 손대지 않고 미디어 쿼리가 잘 되게 신경쓰는 중이다

해결 방법

역시 구조화를 잘해야 해결된다

소감

기존에 해놓은 컴포넌트화 작업이 있어서 미디어쿼리 작성이 생각보다 복잡하진 않으나, 작업 방식이 들쭉날쭉이어서 과정을 임의로 정해놓으면 속도가 빨라질 것 같다.

오늘 진행 사항

1) 오전10시 멘토링

2) 조모임

3) 개별 작업

1) 멘토링

슬릭 슬라이더 라이브러리의 버튼은 이미지 양옆에 존재하는데, 그걸 버튼 이미지 위치에 옮겨서 실제로 버튼이 동작하게 만드는 방법을 멘토링에서 물었다.

1. 다른 라이브러리 찾아보기

2. 슬릭 슬라이더는 오픈소스니까 함수 찾아서 자체적으로 함수 만들어보기

3. 블로그 참고 https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=2z00&logNo=221181847251

3) 개별 작업

헤더 화면에 있는 글자를 이미지 바깥으로 빼고, 글자가 어느 화면 크기에서도 반응할 수 있는 상태를 만들고 싶은데 포지션을 지정햇을 경우 글자가 아예 못박혀버리는 상태 때문에 그걸 해결하는 중이다

요것만 끝나면 미디어 쿼리 작업할 수 있을 것 같은데,,, 결국은 미디어 쿼리 작업할때도 손을 많이 안대도 알아서 반응하도록 만드는 중이라 시간이 걸리는 것 같다

/* 헤더 */
.main-header {
    /* width: 100%; */
    /* height: 900px; */
   position: relative;
}
.main-header .header-wrap{
    /* position: absolute; */
    margin: 0 auto;
    /* border: 2px solid red; */
    width: 1440px;
    /* z-index: 1; */
    /* height: 900px;  */
    /* position: relative; */
    /* position: absolute; */
    /* z-index: 1; */
}
.main-header .head-box img{
    width: 100%;
    height: 900px;
    object-fit: cover;
    filter: brightness(55%);
    z-index: -1;
}
.main-header .slick-header-wrap{
    position: static;
    z-index: 1;
    width: 100%;
    height: 900px;  
}
.main-header .header-wrap h1, .main-header .header-wrap p{
    color: rgb(240, 240, 240);

}
.main-header h1 {
    width: 450px;
    font-weight: 700;
    font-size: 2.8rem;
    line-height: 4rem;
    border: 2px solid blue;
}
.main-header p {
    width: 700px;
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 2rem;
    bottom: 250px;
    border: 2px solid blue;
}
/* <-> 버튼 */
.main-header .slick-button-wrap {
    position: absolute;
    z-index: 1;
    top: 750px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    border: 2px solid red;
}
.main-header .slick-button-wrap img{
    padding: 1rem;
    /* border: 1px solid red; */
    cursor: pointer;
}

어려운 점

포지션 설정을 했을 때 위치조정이 고정이 되어버림

해결 방법

1. 이 방법이나

2. 이 방법을 써보려고 한다

소감

position의 부모 자식이 여럿 쓰이면 구조가 복잡해져서 구조화를 잘하라는 말이 실감이 됐다.

1) 10시 스크럼 회의

2) 개별 작업 진행

3) 4:40 폼 제출

2) 개별 작업 진행

오늘은 스크럼 회의도 일찍 끝나고 특별한게 별로 없다

슬릭 슬라이더로 넘어가는 이미지 헤더 만들고 미디어쿼리 진행중

body {
    font-family: 'Noto Sans KR', sans-serif;
}
a {  text-decoration: none; }
/* 메인 전체 섹션 */
section {
    margin: 0 auto; 
    padding-top: 120px;
    padding-bottom: 120px;
}
.main-news-container, .project, .service, .reference  {
    max-width: 1440px;
    margin: 0 auto;
}
.main-title {
    font-size: 2rem;
    padding-bottom: 1rem;
}
.sub-title {
    color:#999999;
    font-weight: 500;
    margin-bottom: 3rem;
}
.sub-text {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.7rem;
}
/* 헤더 */
.main-header {
    margin: 0 auto;
    width: 1920px;
    height: 900px;
    background: url('./img/toco-img1/main-header1.png') no-repeat;

}

/* 새로운 소식 (뉴스) 섹션 */
.main-news-container {
    max-width: 1440px;
    height: 100%;
    margin-top: 5rem;
}
.main-news-container .news-wrap {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;
}
.main-news-container .news-contents {
    width: 300px;
    height: 316px;
}
.main-news-container .news-img-wrap {
    width: 300px;
    height: 200px;
    border-radius: 20px;
    position:relative;
    overflow: hidden;
}
.main-news-container .news-img {
    width: 300px;
    height: 200px;
    border-radius: 20px;
    position:relative;
    background: url('./img/toco-common/sample-img.png') no-repeat center / cover;
    transition: transform 0.25s ease-in-out;
    opacity:1;
}   
/* 새로운 소식 마우스 오버 */
.main-news-container .news-contents:hover .news-img {
    transform: scale(1.2);
    filter: brightness(50%); 
}
.main-news-container .news-contents:hover {
    cursor: pointer;
}
.main-news-container .news-text {
    /* border: solid 1px blue; */
    font-weight: 600;
    line-height:1.2rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.main-news-container .news-date {
    color : #AAAAAA;
    font-weight: 200;
}
/* 프로젝트 섹션 */
.main-project-container {
    width: 100%;

    height: 100%; 
    background-color: #F9F9F9;
}
.main-project-container .project {
    background-color: #F9F9F9;
}
.main-project-container .main-title {
    text-align: right;
}
.main-project-container .sub-title {
    text-align: right;
}
.main-project-container .sub-text {
    text-align: right;
}
.main-project-container .project-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center; 
}
.main-project-container .project-left-wrap,.project-right-wrap {
    flex: 1;
}
/* 프로젝트 섹션 - 왼쪽 */
.main-project-container .project-left-wrap {
    width: 534px; /*임시*/
    height: 840px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: flex-start;    
}
.main-project-container .project-img1{
    width: 534px;
    height: 393px;
    border-radius: 20px;
    overflow: hidden;
    opacity:1;
    position: relative;
    /* border: 1px solid red; */
}  
.main-project-container .text-show {
    position: absolute;
    bottom: 1.7rem;
    left: 1.7rem;
    color: white;
    line-height: 1.3rem;
    opacity: 0;
    /* display: none; */
    /* transition: opacity 0.25s ease; */
}
.main-project-container .text-show h3 {
    font-size: 1.3rem;
    line-height: 1.8rem;
}
 /* 프로젝트 마우스 오버 */
.main-project-container .moado, .ecoce {
    width: 534px;
    height: 393px;
    border-radius: 20px;
    position: relative;
    transition: transform 0.25s ease-in-out;
}
.main-project-container .moado {
    object-position: 5rem 1rem;
    background-image: url('./img/toco-img1/main-moaDo-back.svg');
}

.main-project-container .project-img1:hover .ecoce{
    transition: 0.25s;
    transform: scale(1.2);
    filter: brightness(50%);
 }
 .main-project-container .project-img1:hover .text-show {
    color: white;
    display: block;
    opacity: 1;
    cursor:alias ;
 }
.main-project-container .moado:hover {
    transform: scale(1.2);
    filter: brightness(50%);
 }
 .main-project-container .moado:hover +.text-show {
    color: white;
    opacity: 1;
 }
/* 프로젝트 섹션 - 오른쪽 */
.main-project-container .project-right-wrap{
    width: 534px; /*임시*/
    height: 840px;
    flex: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-end;
    align-content: flex-end;
}
.main-project-container .project-img2 {
    width: 680px; /*sample*/
    height: 680px;
}
/* 서비스 섹션 */
.main-service-container {
    width: 100%;
    height: 100%;
}
.main-service-container .service {
    display: flex;
}
/* 서비스 섹션 - 왼쪽 */
.main-service-container .service-left-wrap  {
    width: 50%;
    height: 100%;
}
.main-service-container .sub-text{
    margin-bottom: 3.5rem;
}
.main-service-container .service-img1 {
    width: 680px;
    height: 680px;
}
/* 서비스 섹션 - 오른쪽 */
.main-service-container .service-right-wrap{
    width: 50%;
    height: 100%;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    align-content: flex-start;
}
.main-service-container .service-img-wrap2 {
    margin-top: 150px;
}
.main-service-container .service-card {
    /* position: relative; */
    width: 300px;
    height: 375px;
    text-align: center;
    margin-bottom: 3rem;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border: solid 1px #AAA;
}
.main-service-container .service-card:last-child{
    margin-bottom: 0rem;
} 
.main-service-container .service-card h1 {
    color: #fff;
    font-size: 2rem;
    font-weight: 500;
    line-height: 3.5rem;
}
.main-service-container .service-card p {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 300;
}
.main-service-container .service-card .card-hide p {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 3rem;
    /* background:  rgba(0,0,0,0.7); */
}
.main-service-container .card-show, .card-hide {
    /* display:none; */
    transition: transform 0.35s ease-in-out;
}
.main-service-container .card-hide {
    /* display:none; */
    opacity: 0;
    position: absolute;
    /* border: 1px solid yellow; */
    transform: translate(70px, 100px);
}
/* 서비스 섹션 - 카드 APP */
.main-service-container .APP {
    background: url('./img/toco-img1/main-card-APP.png');
    position: relative;
    display: flex;
    flex-direction: column;
    /* border: 1px solid red; */
}
/* 서비스 섹션 - 카드 AI */
.main-service-container .AI {
    background: url('./img/toco-img1/main-card-AI.png');
    position: relative;
}    
/* 서비스 섹션 - 카드 WEB */
.main-service-container .WEB {
    background: url('./img/toco-img1/main-card-WEB.png');
    position: relative;
    display: flex;
    flex-direction: column;
}
/* 서비스 섹션 - 카드 XR */
.main-service-container .XR {
    background: url('./img/toco-img1/main-card-XR.png');
    position: relative;
}

/* 서비스 섹션 - 마우스 오버 간단 동작 */

/*-----------------------
서비스 섹션 - 카드 APP: 마우스 오버
.main-service-container .APP:hover .card-show{
   transform: translate(-70px, -100px);
   transition: 0.35s;
   opacity: 0;
}
.main-service-container .APP:hover .card-hide{
    transform: translate(0, 0);
    transition: 0.35s;
    opacity: 1;
}
서비스 섹션 - 카드 AI: 마우스 오버
.main-service-container .AI:hover {
    transition: 0.35s;
}
.main-service-container .AI:hover .card-show{
   transform: translate(-70px, -100px);
   transition: 0.35s;
   opacity: 0;
}
.main-service-container .AI:hover .card-hide{
    transform: translate(0, 0);
    transition: 0.35s;
    opacity: 1;
}

서비스 섹션 - 카드 WEB: 마우스 오버
.main-service-container .WEB:hover .card-show{
   transform: translate(-70px, -100px);
   transition: 0.35s;
   opacity: 0;
}
.main-service-container .WEB:hover .card-hide{
    transform: translate(0, 0);
    transition: 0.35s;
    opacity: 1;
}
서비스 섹션 - 카드 XR: 마우스 오버
.main-service-container .XR:hover .card-show{
   transform: translate(-70px, -100px);
   transition: 0.35s;
   opacity: 0;
}
.main-service-container .XR:hover .card-hide{
    transform: translate(0, 0);
    transition: 0.35s;
    opacity: 1;
}
----------- */

/* 레퍼런스 섹션 */
.main-reference-container {
    width: 100%;
    height: 100%;
    background-color: #F9F9F9;
}
.main-reference-container .ref-logo-wrap {
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.main-reference-container .ref-logo{
    border: solid 1px #DBDBDB;
    background-color: #fff;
    width: 220px;
    height: 100px;
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}   
/* 푸터 */
.common-footer{
    width:100%;
    height: 250px;
    background: #E9E9E9;    
    display: table;
}
.footer-wrap { 
    display: table-cell;
    vertical-align:middle;
}
.footer-logo {
    margin: 0 auto;
    max-width: 1440px;
}
.footer-text{ 
    margin: 0 auto;
    max-width: 1440px;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
} 
.footer-text p{    
    color:#9e9e9e;
}      
.footer .copyright{
    color:#9E9E9E;
    font-weight:600;
}      
.footer-left,.footer-right{
    line-height:1.5rem;
    flex:1;
}

/* 미디어 쿼리 1280 */

어려운 점

엄슴

해결 방법

-

소감

요즘 생활패턴이 어긋나서 운동 끊고 작업 집중 시간을 만들어야겠다

오늘 진행 상황

1) 10시 스크럼 회의

개별 작업 진행상황 이야기하고, 오늘 목표치 공유하기

2) 남은 사람 1시간쯤 모임 유지한 채 개별 작업 진행...

오늘도 ㅇㅈ님 ㅈㅁ님 나 ㅁㅎ님 넷이서 남아 모임 유지한채로 서로 작업하며 얘기좀 나누다가 오늘은 다들 점심드시면서 일찍 해산 했다

점심 먹고 다시 개별 작업 진행

3) 4:40분 체크아웃 회의

금욜이라 그런지 다들 폼 제출확인만 하고 금방 해산

2) 개별 작업 진행

구조 파악하고 오늘 뭔가 집중이 안되서 천천히 진행중

1. flex로 2,2 떨어지게 만들기

2. 중앙 정렬 후 json 이미지 교체하기.

3. 블럭 단위 나눠놓은 것으로 배치 재정렬하기. 큰 컴포넌트 단위로 json이미지 / 앱카드 부분 따로 떨어지도록 나누기

4. flex 그룹 재설정하기... html에 div 그룹화를 바꿀 수 없고, 어떤 방식으로 배치하면 좋을까?

어려운 점

아직 딱히 없음

해결 방법

: none;

소감

어제 만든 스크립트가 잘 작동해서 여전히 뿌듯하다. 전체적으로 보면 어디서부터 건드리지 하다가도 할 것을 잘게 쪼개어서 이렇게 정리해보니 훨씬 할 만해보이고 명확해서 좋다.

오늘 진행 상황

1) 10시 멘토링 진행

작업 진행 상황 설명, 모르는/막히는 부분 질문 등... 공유

2) 개별 작업 + 모임 진행 2~3시간

나가실 분들은 나가고 나, ㅁㅎ님, ㅇㅈ님, ㅈㅁ님이 남아서 모임을 2~3시간 정도 더 진행함.

3) 개별 작업 계속 진행

4) 4:40분 체크아웃 회의

폼 제출 같이 하면서 오늘 개별로 작업했던거 더 언급해주실 분은 해주시거나 진행 상황 말해주시거나... 자유롭게 더 이야기하는 시간

1) 멘토링 진행

• 멘토님이 알려주신 사이트

script로 마우스오버 / 마우스아웃 이벤트 처리 jquery css 함수 사용법

• 아래는 ㅈㅁ님이 찾아와주신 정리글

제이쿼리 선택자 완벽정리

2) 개별 작업 모임 진행

문제의 그 카드 애니메이션. 마우스 오버를 했는데 왼쪽 위, 아래로 텍스트가 전환되는 효과. 어제는 어떻게든 css까지는 그럴듯하게 만들었으나... 문제1. 마우스 올리면 입력 커서가 생기고 문제2.마우스가 떨어졌을 때 애니메이션 효과 없이 땋 하고 떨어지는 등 깔끔하지 못함.

글로는 도저히 설명이 안될 것 같아 GIF 프로그램을 이용했다.

이렇게 html이 동일하게 주어져 있는 상황에서

<section class="main-service-container">
    <div class="service">
        <div class="service-left-wrap">
            <h1 class="main-title">서비스</h1>
            <p class="sub-title">SERVICE</p>
            <p class="sub-text">다양한 기술플랫폼을 제공하여 가능성을 열어주고<br>의미있는 성공으로 인도하는 서비스를 제공합니다.</p>
            <div class="service-img1">
                <!-- code -->
                <lottie-player src="./img/toco-img1/json-talking.json" background="transparent" speed="1" style="width: 680px; height: 680px;" loop autoplay></lottie-player>
            </div>
        </div>
        <div class="service-right-wrap">
            <div class="service-img-wrap1">
                <div class="APP service-card">
                    <div class="card-show"><h1>앱(APP) 개발</h1><p>ANDROID/IOS</p></div>
                    <div class="card-hide"><p>Android 앱 개발</p><p>ios 앱 개발</p><p>플랫폼 기획 및 설계</p></div>
                </div>
                <div class="AI service-card">
                    <div class="card-show "><h1>AI 기반 기술개발</h1><p>AI BIGDATA</p></div>
                    <div class="card-hide"><p>AI 대화형 챗봇</p><p>자동 객체인식 검출기</p><p>딥러닝 학습 모델</p></div>
                </div>
            </div>
            <div class="service-img-wrap2">
                <div class="WEB service-card">
                    <div class="card-show "><h1>웹(WEB) 구축</h1><p>RESPONSIVE WEB</p></div>
                    <div class="card-hide"><p>반응형 홈페이지 구축</p><p>데이터베이스 구축</p><p>빅데이터 구축</p></div>
                </div>
                <div class="XR service-card">
                    <div class="card-show "><h1>XR 콘텐츠 구현</h1><p>META</p></div>
                    <div class="card-hide"><p>실감형 플랫폼 구축</p><p>가상현실 콘텐츠 제작</p><p>게임콘텐츠 제작</p></div>
                </div>
            </div>
        </div>
    </div>
    </section>

1. CSS : hover 로 만든 애니메이션

        /*서비스 섹션 - 카드 APP: 마우스 오버*/
        .main-service-container .APP:hover .card-show{
           transform: translate(-70px, -100px);
           transition: 0.35s;
           opacity: 0;
        }
        .main-service-container .APP:hover .card-hide{
            transform: translate(0, 0);
            transition: 0.35s;
            opacity: 1;
        }
       /* 서비스 섹션 - 카드 AI: 마우스 오버*/
        .main-service-container .AI:hover {
            transition: 0.35s;
        }
        .main-service-container .AI:hover .card-show{
           transform: translate(-70px, -100px);
           transition: 0.35s;
           opacity: 0;
        }
        .main-service-container .AI:hover .card-hide{
            transform: translate(0, 0);
            transition: 0.35s;
            opacity: 1;
        }

        /*서비스 섹션 - 카드 WEB: 마우스 오버*/
        .main-service-container .WEB:hover .card-show{
           transform: translate(-70px, -100px);
           transition: 0.35s;
           opacity: 0;
        }
        .main-service-container .WEB:hover .card-hide{
            transform: translate(0, 0);
            transition: 0.35s;
            opacity: 1;
        }
        /*서비스 섹션 - 카드 XR: 마우스 오버*/
        .main-service-container .XR:hover .card-show{
           transform: translate(-70px, -100px);
           transition: 0.35s;
           opacity: 0;
        }
        .main-service-container .XR:hover .card-hide{
            transform: translate(0, 0);
            transition: 0.35s;
            opacity: 1;
        }

2. script로 만든 애니메이션

script로 mouseover과 mouseout을 구분해놓은 채 효과를 입력해놓은 것이 훨씬 부드럽게 구현되는 것을 볼 수 있다.

이 스크립트를 작성하는 걸 감사하게도 남은 팀원끼리 모여서 도와주셨다. 물론 처음엔 상단 네이게이션 바에 대해 서로 얘기하느라 시간을 가졌던거지만.

 $(document).ready(function(){
            $(".APP").on({
                "mouseover":function(){
                    $(".APP>.card-show").css({'transform':'translate(-70px, -100px)', 'opacity':'0', 'transition':'0.35s', 'pointer-events':'none'});
                    $(".APP>.card-hide").css({'transform':'translate(0, 0)', 'opacity':'1', 'transition':'0.35s', 'pointer-events':'none'})
                },
                "mouseout":function(){
                    $(".APP>.card-show").css({'transform':'translate(0,0)', 'opacity':'1', 'transition':'0.35s', 'pointer-events':'none'});
                    $(".APP>.card-hide").css({'transform':'translate(70px, 100px)', 'opacity':'0', 'transition':'0.35s', 'pointer-events':'none'})
                }
            });

            $(".AI").on({
                "mouseover":function(){
                    $(".AI>.card-show").css({'transform':'translate(-70px, -100px)', 'opacity':'0', 'transition':'0.35s','pointer-events' : 'none'});
                    $(".AI>.card-hide").css({'transform':'translate(0, 0)', 'opacity':'1', 'transition':'0.35s', 'cursor':'default','pointer-events' : 'none'})
                },
                "mouseout":function(){
                    $(".AI>.card-show").css({'transform':'translate(0,0)', 'opacity':'1', 'transition':'0.35s', 'pointer-events' : 'none'});
                    $(".AI>.card-hide").css({'transform':'translate(70px, 100px)', 'opacity':'0', 'transition':'0.35s', 'pointer-events' : 'none'})
                }
            });

            $(".WEB").on({
                "mouseover":function(){
                    $(".WEB>.card-show").css({'transform':'translate(-70px, -100px)', 'opacity':'0', 'transition':'0.35s', 'pointer-events' : 'none'});
                    $(".WEB>.card-hide").css({'transform':'translate(0, 0)', 'opacity':'1', 'transition':'0.35s','pointer-events' : 'none'})
                },
                "mouseout":function(){
                    $(".WEB>.card-show").css({'transform':'translate(0,0)', 'opacity':'1', 'transition':'0.35s', 'pointer-events' : 'none'});
                    $(".WEB>.card-hide").css({'transform':'translate(70px, 100px)', 'opacity':'0', 'transition':'0.35s','pointer-events' : 'none'})
                }
            });

            $(".XR").on({
                "mouseover":function(){
                    $(".XR>.card-show").css({'transform':'translate(-70px, -100px)', 'opacity':'0', 'transition':'0.35s','pointer-events' : 'none'});
                    $(".XR>.card-hide").css({'transform':'translate(0, 0)', 'opacity':'1', 'transition':'0.35s','pointer-events' : 'none'})
                },
                "mouseout":function(){
                    $(".XR>.card-show").css({'transform':'translate(0,0)', 'opacity':'1', 'transition':'0.35s','pointer-events' : 'none'});
                    $(".XR>.card-hide").css({'transform':'translate(70px, 100px)', 'opacity':'0', 'transition':'0.35s','pointer-events' : 'none'})
                }
            });
        });  

4) 4:40분 체크아웃 회의 및 프리토킹

4:40분은 늘 체크아웃 폼 제출하면서 서로 진행 사항 가볍게 말로 공유하거나 다음 일정이나 공지사항 등을 살펴보거나 하면서 얘기를 나눈다.

오늘은 제민님이 스크립트 코드를 더 간단히 입력할 수 있는 내용을 서치하다 찾으셔서(!!!!) 바로 공유 받았다.

그 말인 즉슨, 위에서 저렇게 길었던 스크립트 코드를, 객체 부모 자식 셀레턱의 관계 DOM을 이용한 구조로 간단하게 줄일 수 있었던 것이다. 중복된 코드를 줄일 수 있을 것 같은데 어떻게 줄여야할까 ~ 싶었던 것이 이렇게 부모 셀렉터에서 .children 설정으로 코드를 확줄였다... wow.

 $(document).ready(function(){
            $(".service-card").on({
                "mouseover":function(){
                    $(this).children("card-show").css({'transform':'translate(-70px, -100px)', 'opacity':'0', 'transition':'0.35s', 'pointer-events':'none'});
                    $(this).children("card-hide").css({'transform':'translate(0, 0)', 'opacity':'1', 'transition':'0.35s', 'pointer-events':'none'})
                },
                "mouseout":function(){
                    $(this).children("card-show").css({'transform':'translate(0,0)', 'opacity':'1', 'transition':'0.35s', 'pointer-events':'none'});
                    $(this).children("card-hide").css({'transform':'translate(70px, 100px)', 'opacity':'0', 'transition':'0.35s', 'pointer-events':'none'})
                }
            });
        });  

어려운 점

0. 어제 어려웠던, 애니메이션을 css말고 js나 jQuery로 구현할 수 없을까?

해결 방법

0. jQuery 내에 CSS 기능이 쓰이긴 하지만 어디까지나 디자인적인 부분으로, 구조를 짜서 jQuery 작성을 통해 해결.

 $(document).ready(function(){
            $(".service-card").on({
                "mouseover":function(){
                    $(this).children("card-show").css({'transform':'translate(-70px, -100px)', 'opacity':'0', 'transition':'0.35s', 'pointer-events':'none'});
                    $(this).children("card-hide").css({'transform':'translate(0, 0)', 'opacity':'1', 'transition':'0.35s', 'pointer-events':'none'})
                },
                "mouseout":function(){
                    $(this).children("card-show").css({'transform':'translate(0,0)', 'opacity':'1', 'transition':'0.35s', 'pointer-events':'none'});
                    $(this).children("card-hide").css({'transform':'translate(70px, 100px)', 'opacity':'0', 'transition':'0.35s', 'pointer-events':'none'})
                }
            });
        });  

내가 구조를 아래와 같이 짜놨기 때문에 service-card 의 관계와 card-show / card-hide 관계를 이용해도 반복적으로 쓸 수 있는 것이다

<div class="service-card">
    <div class="APP">
        <div class="card-show"></div>
        <div class="card-hdie"></div>
    </div>
</div>

<div class="service-card">
    <div class="AI">
        <div class="card-show"></div>
        <div class="card-hdie"></div>
    </div>
</div>

<div class="service-card">
    <div class="WEB">
        <div class="card-show"></div>
        <div class="card-hdie"></div>
    </div>
</div>

<div class="service-card">
    <div class="XR">
        <div class="card-show"></div>
        <div class="card-hdie"></div>
    </div>
</div>

소감

js나 jquery는 아무것도 모른 채로 쓰면 힘든데, 하나 작동을 하고 나서부터는 감도 잡히고 뭔가 할 만하단 생각이 들고... 편하다는 생각이 든다. 객체를 지정해 효과를 주니까 한 이벤트가 발생했을 때 원하는 객체에 개별로 이벤트를 줄 수 있는 것도 편한 것 같다.

1) 오전 10시에 스크럼 회의

각자 개발 진행 상황 공유, 당일 목표 공유, 어려운 점 공유 등... +스몰토크들

2) 오후 3시에 월말평가 진행

3) 오후 4:40분에 체크아웃 회의

4) 오후 7시 ~ 8시 / 9시 반~ 10시 반까지 팀원 A분이랑 1:1모임 활동

2) 오후 3시 월말평가

14/15점으로 마지막 문제는 명령어를 착각했었다. 대상을 오른쪽으로 가게 하려면 왼쪽에 마진을 줘야하는데...

아무래도 오픈북 시험이다보니 코드 직접 써가면서 다시 복습하게 된 것 같다. 긴가민가 했던 걸 다시 해보니 id>class>tag 우선수위도 재각인 했다 ㅎ_ㅎ;

4) 오후 7시 ~ 8시 / 9시 30분 ~ 10시 30분 1:1 모임 활동

이놈의 앱개발 마우스오버 이벤트가 생각보다 원하는 동작이 안되서 오늘까지 애먹고 있다가 조금의 빛을 봤다.

결국은 opacity:0; 과 opacity:1;에 애니메이션을 줘서 효과를 넣는 형식인데, display:none 으로 아예 화면에도 안잡히게 기능을 쓰려면 script 작성을 해야하는 것 같았다. JQuery를 이용해서도 써보려고 했으나 문법을 잘 모르겠어서 멘토링 시간에 물어볼까 싶다.

.service-card{
            position: relative;
        }
        .main-service-container .service-img2 {
            top:300px;
            width: 300px;
            height: 375px;
            margin-bottom: 3rem;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
            transition: transform 0.25s ease-in-out;
            border: solid 1px #999999;
            z-index: 5;
            /* border: 1px solid blue; */
        }

        .main-service-container .APP {
            background: url('./img/toco-img1/main-card-APP.png')no-repeat;
            background-size: 300px 375px;
            /* border: 1px solid red; */
            position: relative;

        }
        .main-service-container .service-right-wrap .card-title {
            color: #fff;
            font-size: 2rem;
            font-weight: 500;
            line-height: 3.5rem;
        }

        .main-service-container .service-right-wrap #card-hide {
            position: absolute; z-index: 1;
        }
        .main-service-container .service-right-wrap .card-sub {
            color: #fff;
            font-size: 1.2rem;
            font-weight: 300;
        }
        .main-service-container .service-right-wrap .card-sub-hide {
            color: #fff;
            font-size: 1.5rem;
            font-weight: 400;
            line-height: 3rem;
            /* background:  rgba(0,0,0,0.7); */
            opacity: 0;
            position: absolute;
            transform: translate(50%, 90%); 
        }

        .main-service-container .service-card :hover .card-sub-hide{
            transform: translate(0, 0); 
            transition:.3s;
            opacity: 1;
        }

        .main-service-container .service-card:hover .tran {
            transition:.3s;
            transform: translate(-20%, -100%);  
            opacity: 0;
        }

<!-- 서비스 섹션 -->
<section class="main-service-container">
  <div class="service-left-wrap">
  </div>
  <div class="service-right-wrap">
      <div class="service-img-wrap1">
          <div class="service-card">
              <div id="card-show" class="service-img2 "><h1 class="card-title tran">앱(APP) 개발</h1><p class="card-sub tran">ANDROID/IOS</p><div class="card-sub-hide"><p>Android 앱 개발</p><p>ios 앱 개발</p><p>플랫폼 기획 및 설계</p></div></div>
              <div id="card-hide" class="service-img2 APP" style="position: absolute;"></div>
          </div>

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

---

### 어려운 점

1. 마우스 오버 시 숨겨져 있던 글자가 애니메이션 효과를 받아 나오는 부분

### 해결 방법

1. 

transition:.3s; transform: translate(-20%, -100%);
opacity: 0;

로 카드 밖에 글자를 좌표설정 해두고 올라오는 효과로 만들었으나,
더 좋은 방법이 있지 않을까 생각중

### 소감

애니메이션 하나 넣는 것에 이틀을 쓸 줄은 몰랐다.
css가 아니라 script / jQuery로 주려니, 수업할 때 너무 빨리빨리 넘어갔던 부분이라 공부가 덜 됐구나 싶다. 페이지 만들면서 다시 복습을 해봐야겠다

1) 멘토링 진행

5조는 PC버전 진행률 70% 같다고 하심...!

2) 안풀리는 문제점 공유

3) 개별 작업 진행

4) 특강 이후 4:40분 미팅

3~4) 안풀리는 문제점 공유 및 작업 진행

나 같은 경우는 애니메이션을 적용하다가 진행이 안되어서 팀원들한테 도움을 요청했다. 했는데... 오늘 다같이 붙잡고 있어도 해결방안을 찾질 못했다

이 앱카드 부분이 시안에서는 텍스트가 밀리면서 넘어가는 느낌으로 전환이 되는데... 그게 어떻게 동작하는지 아직도 못찾았다.

1. flip box를 썼는데 플립은 뒷면으로 뒤집는다는 기능이어서 용도에 맞지 않는 듯함
2. https://imagehover.io/ 이미지 오버 사이트를 들어가서 클래스에 적용시켜보았으나, 내가 필요한 것은 왼쪽가로-위가 동직에 작동하는 애니메이션임. 얘는 왼쪽가로로 단일 변환만 된다..
3. wow.js는 그냥 클래스에다 애니메이션 적용시키게 해주는 플러그인이고...

완전 헤매는 중이다.

어려운 점

3~4)에 써놓은 내용이 그것

해결 방안

내일 해볼 것으로 생각해놓은 방안은

1) div를 두개 만들어놓고 nav 메뉴바 나타내듯이 하나는 애니메이션으로 사라지게 만들어본다. display: none;까지. hidden은 공간을 차지해서 안됨.

소감

오늘도 팀원들끼리 해결하면 된다고 자신있게 말했다가 멘토님 찬스를 날린 것이 좀 안타깝다......