06.12. 최종 프로젝트 / 프론트 작업 (html, css)

디자인 래퍼런스

◙ 국가에서 사용하는 사이트 같은 느낌을 주고 싶었다.

◙  한국적인 미를 살리기 위해 폰트를 고심하여 골랐다.

◙  최대한 심플하고 깔끔하게

 

 

와이어프레임을 보며 작업

 

와이어프레임과 찾은 레퍼런스들을 활용하여 html, css 틀 작업을 진행했다.

대부분의 html들을 작업했다.

 

 

---

+ 미세 팁 : 

* { outline: 1px solid red } : 초반에 박스 위치 잡을 때 또는 박스가 보이지 않을 때 유용하다.

1. 작업목록

• index.html : 메인
• home.html : 우리 프로젝트를 실행했을 때 처음 만나는 페이지
• login.html
• signup-store.html : 사업자 회원가입 (한복점)
• signup.html : 일반 회원가입
• profile.html
• profile-edit.html : 프로필 수정
• store.html
• store-detail.html
• event.html
• event-detail.html

2. 수정사항 정리

• 스크롤 시 네비바 여백 40px > 25px로 변경
• 배경색 #fff 로고색 #000 서치아이콘 #000 네비바 아래 라인 rgba(0,0,0,0.5)
• top 으로 가는 버튼
• 뒤로가기 버튼 만들기 (이전 페이지로 돌아가기) 참고 >

3. 모르는 부분 검색

• 버튼 태그에서 a태그와 같은 효과를 내는 방법 : 링크 이동 방법
  <button onclick = "location.href = '#' ">
• 화살표 함수와 일반 함수의 차이 참고 >