ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 미니프로젝트 - Web.Jom.BIE
      미니프로젝트 2025. 2. 20. 14:28

      사전캠프가 끝나고 시작된 첫 미니 프로젝트

       

      2025.02.17 ~ 2025.02.21일까지 진행될 프로젝트다.

      S.A(Starting Assignments) 작성

      • S.A란?
        - 프로젝트의 시작점 역할, 전체적인 흐름을 만들기 위한 용 (많이 사용하는 용어는 아닌 듯 하다)
        - 프로젝트 명, 프로젝트 개요, 개발 일정, 역할 분담, 사용하는 기술, 와이어 프레임 등으로 구성하여 작성
      •   * 와이어 프레임: 프로젝트의 기본 구조를 시각적으로 보여주는 다이어그램, 핵심 기능만 단순하게 표현한 것

         ★ 팀명 정하기

                  -  Minecraft라는 건축, 공장 등등 다양한 커셉을 가지고 플레이하느 게임이다.

                  - 그 중 '휘용' 유투버 서버이름이 '곡좀빌'이 떠올랐다.  ->'  곡갱이 좀 빌리게요'의 약자

                  - 팀원들에게 제안했고, 약간의 수정을 거치게 되어서 탄생하게된 새로운이름

                                                                  Web.JOM.BIE : 웹.좀.비(ㄹ할게요!)

       

      ★ 팀원들의 아이디어를 모아 정리한 상세하게 PPT로 제작한 화면 구성.

       

      초안(손작업)

       

      Main 웹페이지 화면

       

      팀원들의 상세한 정보 표시

      https://firebase.google.com/?hl=ko

       

      Firebase | Google's Mobile and Web App Development Platform

      개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요.

      firebase.google.com

       

      ★  역활 분담

           메인 html을 제작

           프로필 html을 제작

       

         메인 CSS 제

         프로필 CSS제작

       

        ● 내 담당

           버튼 상호작용(스크립트) 구성 

           프로필 카드 슬라이드 애니메이션 제작

       

           SQL은 파이어베이스 연결

           git 허브 관리

       

       결과물 

         

       

      ★  구현 방향:

                   마우스가 버튼 위에 있다면 좀비 이미지가 위아래 진동하며 마치 반응해주는 애니메이션을한다.

       

      ★   구현 순서:

                 1. 이미지와 버튼이 한 공간에 존재한다.

                 2. 애니메이션 구성.

                       

                    why?!

                            무엇으로 누군가를 강조하는 애니메이션이 있으면 하는것이 어떤가? 아이디어를 제시했다.

       

                     @keyfram,  transform,  animaition은 사전 캠프에서도 보지 못했던 기능이다.

       

                     animaition

                           전환?

                             전 후 상태를 부드럽게 변화시키는 효과를 제공하는 기능이다.

                            시작과 종료 상태만 고려하면 되기때문에 간단하게 사용할 수있다.

                       

                         애니메이션?

                              - 여러 CSS 스타일 속성으로 요소의 크기, 색상,모양등을 제어해 애니메이션 효과를 부여하는 기능입니다.

                              - 자바스크립트를 사용하지 않고 간단하게 요소애 동적 효과를 부여 할수 있기 때문에,

                                   보다 좋은 성능으로 애니메이션을 구현 할수 있다.

       

                     @keyfram ?

                     

                                애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써

                                CSS 애니메이션 과정의 중간 절차를 제어할 수 있는 기능 중 하다. 

                                

                                       

                      transform?

                                  특정 CSS 속성의 값을 점진적으로 바꿀 수 있는 CSS 모듈

                                  타이밍 함수 , 시간등 여러 속성을 통해 바뀌는 방식을 조절한다.

       

      https://developer.mozilla.org/ko/docs/Web/CSS/@keyframes

       

      @keyframes - CSS: Cascading Style Sheets | MDN

      @keyframes @규칙은 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다. 이를 통해 브라우저가 tran

      developer.mozilla.org

                           

      ★CSS >적용 위치 header의 style태그에 적용 할것!

       .button-container {
            position: relative;
            display: inline-block;
        }
        .zombie {
            position: absolute;
            top: -60px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 80px;
            background: url('...') no-repeat center/cover;
            animation: idle 1s infinite alternate;
        }
        .button {
            width: 150px;
            height: 50px;
            background-color: red;
            border: none;
            color: white;
            font-size: 18px;
            cursor: pointer;
            position: relative;
        }
        
        @keyframes idle {
            0% { transform: translateX(-50%) translateY(0); }
            100% { transform: translateX(-50%) translateY(-5px); }
        }
        
        @keyframes knock {
            0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
            50% { transform: translateX(-50%) translateY(5px) rotate(-5deg); }
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-3px); }
            50% { transform: translateX(3px); }
            75% { transform: translateX(-2px); }
        }
        
        .button-container:hover .zombie {
            animation: knock 0.2s infinite alternate;
        }
        
        .button:active {
            animation: shake 0.2s ease-in-out;
        }

       

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zombie Button</title>
    
</head>
<body>
    <div class="button-container">
        <div class="zombie"></div>
        <button class="button">Click Me</button>
    </div>
</body>
</html>

       

      팀원들 코드에 작업하기위해 별도로 만들었다.

       

       

      ★  어려웠다면 ?

           

           모든지 처음 쓰는 것은 어렵다.

            

                GPT에게 제안한 것은 애니메이션 기초중에 기초코드를 달라고 했다.

                이리저리 만져 보고 MSDN에가서 예제를 사용해보고 구글링하면서 시도 끝에 제작을 하게 되었다.

      '미니프로젝트' 카테고리의 다른 글

      미니프로젝트 - Web.Jom.BIE  (0) 2025.02.21
      미니프로젝트 - Web.Jom.BIE  (0) 2025.02.21

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바