TIL #2 미니 팀 프로젝트 2일차

 

 

2일차는 본격 개발에 들어갔다. 내가 맡은 파트는 Header 와 Footer 

HTML, CSS , JS 기본적인 것으로 활용해서 만드는 것이지만, 시간의 압박과 디자인에 감각이 없어서 레퍼런스가 없이 힘들었다,,

부트스트랩의 힘을 빌리긴 했지만 그것마저 적용하기 힘들고 소스만 약간 따와서 변경하였다.

 

처음 적용하려고 했던 헤더.. 하지만 svg활용 문제로 다음에 쓰기로 넘겼다..

 

두번째로 소스따온 헤더 이다.

위 헤더 소스를 따서, 아래와 같이 헤더를 변경 하였다.

부트스트랩 헤더 소스파일을 참고하여 변경한 내가 만든 헤더

헤더 색감이 전체적으로 영향을 줄 것 같아서 팀원들과 의논해서 파란 파스톤 계열로 정하였다. (나도 좋아하는 색감)

 

Header와 Footer를 담당하면서 제일 먼저 들었던 생각은, 개인프로젝트가 아니라서 이 코드를 어떻게 include 시키지 생각을 했고, 

예전 프로젝트때 JSP로 활용하면서는 해봤지만 html,js로는 해본 경험이 없어서 열심히 구글링을 했고, JavaScript를 사용해서 동적으로

헤더를 로드하는 방법으로 선택하였다.

 

//헤더 삽입 파트 
    <div id="header-placeholder"></div>
     <script>
        // header.html을 동적으로 로드하는 함수
        function loadHeader() {
            fetch('header.html')
                .then(response => response.text())
                .then(data => {
                    document.getElementById('header-placeholder').innerHTML = data;
                })
                .catch(error => console.error('Error loading header:', error));
        }

        // 페이지가 로드될 때 loadHeader 함수를 호출
        loadHeader();
     </script>

<index.html에 들어갈 코드>

 

팀원에 마우스 오버시, 팀원 추가한 멤버가 슬라이더로 뜬다.

/* 슬라이드가 나타나도록 */
li:hover .slide-content {
    display: block;
    animation: slide-in 0.3s ease-out forwards;
}

/* 슬라이드 효과주기 */
@keyframes slide-in {
    from {
        transform: translateX(-10px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

슬라이드 구현 css 코드

 

 

 

부트스트랩에서 따온 Footer의 디자인

 

내가 변경한 Footer의 디자인

 

팀의 궁극적인 목표가 Footer로 들어가기로 변경되면서 구조를 생각하다가, 위의 디자인으로 만들었고 

색감은 헤더와 같은 색으로 통일감을 주기위해서 선택하였다. 

궁극적인 목표가 취업하기라서 너무 단순하고 생각없어보이지만, 사실상 여기서 같이 하는 모든 사람과 개발자 취준생 모두의 목표이지 않을까 싶어서 제일 원하는 취업하기로 목표를 잡았다.

 

제일 작은 인원과 짧은 준비 기간을 보낸 삼대장 팀

처음 시작 주간부터 느리게 출발하고 가장 적은 인원으로 팀 프로젝트를 하였지만 열심히 준비한 장*우, 장*운 님께 감사의 인사를 전하고, 삼대장팀은 목표답게 빠르게 성장하여 취업을 하기를 바라는 마음으로 오늘의 TIL을 끝낸다~!

 

오늘의 공부시간 인증!