1) 학습한 내용

오늘의 할 일

이번에 준비할 프레젠테이션은 홈페이지 제작을 통해서 구현시켰던 점을 중점적으로 다룰 것으로 보였다.

나는 보충할 내용을 몇 가지 넣자면 두 가지이다.
1. 서브메뉴
2. 3페이지 추가 설명(display: flex, 사이킷런 부분을 보충 설명)

서브메뉴

서브메뉴는 이미 다른 팀원인 오종인이란 분이 구현했었지만 이번에 들어왔던 최종 피드백에는 서브메뉴를 클릭 시, 사라지게 하는 것을 요청받았다.

해결 방법은 아래의 코드대로 작성했었다.

$(document).ready(function(){
    $('.menubar').click(function(){
        const nav_menu = document.getElementsByClassName('nav_menu')
        if($(nav_menu).hasClass('close')){
            $(nav_menu).addClass('more').removeClass('close');
        }else if($(nav_menu).hasClass('more')){
            setTimeout(function() { $(nav_menu).addClass('close').removeClass('more');}, 500);
        }
    });
    
    $('header #nav_gnb nav > ul ul a').click(function() {
         $('.nav_menu').addClass('close');
         setTimeout(function() { $('.nav_menu').addClass('close').removeClass('more');}, 500);
    });
});

서브메뉴를 담당한 곳에는 제이쿼리를 사용하고 있었고 나는 제이쿼리를 변형시켰다. 그리고, css에 있는 클래스 close를 손봤다.

.close{
    opacity: 0; 
    animation-duration: 5s;
}

사실, 그냥 사라지게 해도 무방했지만 좀 더 부드럽게 사라지게 하기 위해서 애니메이션 지속 시간을 5초로 맞춰놨었다.

3페이지 보충 설명

에코스, 모아두

에코스

에코스는 아래와 같이 구현했었다.

<section id="ecoce">
            <div class="ecoce-back">
            <div class="ecoce-wrap">
            <div class="ecoce-title">
              <p class="main_title">에코스</p>
              <p class="sub_title">ECO-Clean Earth</p>
            </div>
          <div class="ecoce">
              <div class="ecoce-left">
                  <div class="ecoce-left-bottom">
                      <img src="./img/에코스 (2).png" alt="">
                  </div>
              </div>
              <div class="ecoce-right">
                  <p class="ex_text">국내 최초<br>탄소중립 실천인증 플랫폼</p>
                  <img src="./img/그룹 76.png" alt="">
                  <p class="sub-logo">ECO-Clean Earth</p>
                  <div class="ecoce-store">
                      <div class="app-store">
                          <a href="https://play.google.com/store/apps/details?id=com.resoft.ecoce">
                              <img src="./img/그룹 100.png" alt="">
                              <span>Play Store에서 다운로드</span>
                          </a>
                      </div>
                      <div class="app-store">
                          <a href="https://apps.apple.com/kr/app/%EC%97%90%EC%BD%94%EC%8A%A4-%ED%83%84%EC%86%8C%EB%B0%9C%EC%9E%90%EA%B5%AD-%EA%B3%84%EC%82%B0-%ED%83%84%EC%86%8C%EC%A0%80%EA%B0%90%ED%99%9C%EB%8F%99-%EC%B1%8C%EB%A6%B0%EC%A7%80%EC%B0%B8%EC%97%AC/id1613634019">
                              <img src="./img/그룹 102.png" alt="">
                              <span>App Store에서 다운로드</span>
                          </a>
                      </div>
                  </div>
              </div>
            </div>
            </div>
          </div>
        </section>

HTML

.ecoce {
	height: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
} /*에코스의 부분을 지정*/

.ecoce-wrap {
	margin: 0 auto;
	max-width: 1440px;
} /*에코스의 전체적인 넓이*/

.ecoce-left {
	width: 50%;
	margin: 0;
	box-sizing: border-box;
}/* 에코스 왼쪽 부분*/

.ecoce-title {
	margin: 0 auto;
	margin-bottom: 54px;
	padding-top: 100px;
}/*에코스의 타이틀 위치*/

.ecoce-left-bottom {
	background: url('../img/에코스\ \(1\).png') no-repeat;
	background-size: 100%;
}/*에코스 왼쪽 아래쪽을 담당*/

.ecoce-left-bottom img {
	width: 100%;
	padding: 8% 0 0 35%;
}/*에코스 왼쪽 아래쪽 이미지 위의 이미지*/

.ecoce-right {
	width: 50%;
	margin: 0;
	box-sizing: border-box;
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	flex-direction: column;
	padding-bottom: 6%;
}/*에코스의 오른쪽 부분*/

CSS

모아두

        <section id="moado" class="moado">
        <div class="moado-back">
          <div class="moado-wrap">
            <div class="moado-title">
              <p class="main_title">모아두</p>
              <p class="sub_title">moaDo</p>
            </div>
            <div class="moado-body">
                <div class="moado-left">
                    <div class="moado-left-bottom">
                        <img src="./img/모아두 (2).png" alt="">
                    </div>
                </div>
                <img class="moado-middle" src="./img/main-visual.png" alt="">
                <div class="moado-right">
                    <p>내 손안의 모바일 회원수첩</p>
                    <img class="moado-logo" src="./img/패스 649.png" alt="">
                    <div class="site-button">
                        <a href="#">
                            <span>사이트 바로가기</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
      </div>
        </section>

HTML

.moado-back {
	width: 100%;
	height: auto;
	background: linear-gradient(
			180deg,
			rgba(255, 255, 255, 1),
			rgba(255, 0, 0, 0) 100%
		),
		linear-gradient(30deg, #339be14c, rgba(0, 255, 0, 0) 30.71%),
		linear-gradient(300deg, #e4cde8, rgba(0, 0, 255, 0) 70.71%);
}
.moado-wrap {
	margin: 0 auto;
	max-width: 1440px;
}
.moado-title {
	padding-top: 100px;
	margin-bottom: 54px;
}
.moado-body {
	max-width: 1440px;
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	position: relative;
}
.moado-left {
	width: 50%;
	margin: 0;
	box-sizing: border-box;
}
.moado-left-bottom img {
	width: 115%;
	padding: 0% 0 22% 0;
}
.moado-middle {
	width: 44%;
	height: 67%;
	position: absolute;
	left: 31%;
	bottom: 0%;
}
.moado-right {
	width: 50%;
	margin: 0;
	box-sizing: border-box;
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	flex-direction: column;
	padding-bottom: 10%;
}
.moado-right p:nth-child(1) {
	font-size: 30px;
	font-family: Noto Sans KR;
	font-weight: bold;
	line-height: 44px;
	text-align: right;
	margin-bottom: 18%;
}
.moado-logo {
	width: 62%;
	margin-bottom: 18%;
}
.moado-right .site-button {
	display: flex;
	justify-content: center;
	align-items: center;
}
.moado-right .site-button a {
	width: 153px;
	height: 57px;
	border-radius: 69px;
	background-color: #1e1e1e;
	text-decoration: none;
	color: #fff;
}
.moado-right .site-button span {
	display: inline-block;
	width: 153px;
	height: 57px;
	font-size: 14px;
	font-weight: normal;
	font-family: Noto Sans KR, Medium;
	line-height: 57px;
	text-align: center;
}

CSS

ETC, 슬릭 슬라이드

사이킷런은 이전 팀 프로젝트인 클론 코딩에서 사용했던 슬릭 슬라이드를 재활용해서 그걸 팀 프로젝트에 맞게 수정하고 개조를 했었다.

2) 학습내용 중 어려웠던 점

이번 시간은 팀 프로젝트에 할 발표를 준비하기에 별 다른 어려움은 없었다.

3) 해결방법

이번 시간은 팀 프로젝트 발표 준비라 별 다른 어려움은 없다.

4) 학습소감

팀 프로젝트가 막을 내렸다. 이제 이력서를 작성하고 나는 취업을 준비해야 한다. 그리고, 어제는 링크드인을 통해서 인맥을 만들어 나가는 것이 중요하다는 강사의 특강이 있었는데, 가만히 생각해 보면, 미야자키 히데타카라는 프롬 소프트웨어의 사장도 비디오 게임 코딩과는 상관없는 오라클의 계정 관리 일을 하다가 그의 친구의 추천으로 프롬소프트웨어의 들어갔던 일화를 떠올렸다. 이 때는 링크드인이 없었던 때였었고 이 당시, 그는 나이가 30이 다 되어갈 무렵이라 이직을 받아줄 회사가 많지 않았던 때였다. 그나마, 친구의 추천과 도움으로 프롬 소프트웨어에 들어갔었다. 이걸 통해서 단순히, 코딩을 잘하는 것이 아니라 인맥을 잘 관리하는 것이 중요하다는 것을 떠올렸다.