05.22. [리치메이커_project. 1] 프로젝트 S.A. / 간단한 로고와 html의 nav바, footer 작업

💰리.치.메.이.커.💰

 

Concept

---

돈 모으는 습관 만들기

지출 내역 회초리 시간

지출 내역을 공유하고 챌린지를 만들어 자산을 함께 모으며 소통하는 커뮤니티 사이트

 

Work

---

필수기능

• 회원가입, 로그인, 이메일 인증 (손성수)
• 챌린지 작성, 수정, 삭제 (태서경)
• 가계부 게시글 작성, 수정, 삭제 (김지수)
• 프로필 (우소라)
• 영수증 정보 불러오기..!! (성철민)

선택기능

• 댓글
• 비밀번호 찾기
• 소셜 계정으로 로그인
• AWS 배포!!! (선택 같은 필수!!!!!)

Team Rule

• 점심시간 : 팀원들이 배고플 때
• 저녁시간 : 18:00 - 19:00
• 아침 회의시간: 아침 9시
• 저녁 회의시간: 저녁 8시 반

 

와이어프레임

S.A. 비투코인

 

ERD

리치메이커

 

 

---

작업내역

간단하게 프로젝트 셋팅을 마치고,

팀에서 공통적으로 사용할 로고와 함께 nav바, footer 작업을 했다.

간단한 js와 toggle class를 활용하여 햄버거버튼도 구현하였다.

 

 

index.html

<nav>
    <ul>
        <li><a href="">나의 가계부</a></li>
        <li><a href="">리치메이커 챌린지</a></li>
        <li><a href="">마이페이지</a></li>
    </ul>
</nav>

index.css

nav.on {
    display: block;
}

.menu_btn.on i:nth-child(1), .menu_btn i:nth-child(2) {
    display: none;
}

header .menu_btn.on i:nth-child(2) {
    display: block;
    padding-bottom: 4px;
}

index.js

function hadnleBtn() {
    document.querySelector('nav').classList.toggle('on')
    document.querySelector('.menu_btn').classList.toggle('on')
}