~ 초콜릿 공작소 ~ 프로젝트 완료 조은아
Index 1 2 3 4 5 6 컨셉 설정 시안 디자인 Html 코딩 내역 CSS 코딩 내역 Jquery 코딩 내역 최종 페이지 디자인 - Main, Sub1, Sub2, Sub3, Sub4, Sub5
1. 컨셉 설정 초콜릿이 우울증에 좋다는 말, 들어보셨나요? 살면서 우울에 빠질 일은 무궁무진하게 많습니다. 사람마다 우울감에 빠지는 척도도 다를테죠. 세상의 다양한 사람들에게, 다양한 일로 인해 찾아온 우울을, 다양한 초콜릿으로 달래주고 싶었습니다. 초콜릿에 대해 연구하고, 초콜릿을 응용한 식품을 만드는, 오로지 초콜릿을 위한 초콜릿 전문 사이트가 있으면 어떨까 하는 생각에서 시작한 프로젝트입니다. ‘초콜릿 공작소’에 어서오세요.
2. 시안 디자인
3. Html 코딩 내역 EditPlus 프로그램을 사용하여, 반응형 페이지를 제작하였다. header 부분을 <div id=“header”>가 아닌 <header>로 처리할 수 있는 HTML5 기준을 따르고 있다. 한 개의 메인 페이지와 4개의 서브페이지로 이루어져있으므로 각 메뉴를 클릭 시 해당 페이지로 이동 가능하도록 링크를 걸어 설정하였고, SNS아이콘도 클릭 시 이동할 수 있도록 설정하였다. 제작해둔 로고를 파비콘으로 만들어 인터넷 로딩 시 메인에 함께 뜰 수 있도록 설정하였다. 메인 메뉴 첫 부분에 iframe을 이용하여 동영상을 넣어 방문자의 시선을 끌 수 있는 장치를 마련하였다. 또한 table과 iframe을 이용하여 여러가지 메뉴를 골라볼 수 있는 상품 페이지를 마련하였다. 가장 하단에는 Footer를 넣어 방문자가 해당 회사 정보를 쉽게 알 수 있게끔 설정하였다. 문장 간 여백은 <p></p>태그와 <br/>태그를 이용하여 사이 간 공백을 넣어주고, 강조할 부분은 <strong>태그를 사용하여 진하게 만들고, <em>과 <address> 태그를 이용하여 기울기 효과를 주는 등의 html 소스를 사용하였다.
4. CSS 코딩 내역 1280px 이상 화면에선 header를 좌측 고정으로 두고, 1280px 이하 479px 이상 화면에서는 header가 위쪽으로 올라가게 되며, 479px 이하에서는 모바일 크기에 맞게 변하는 반응형 header 규정을 공통적으로 설정해두었다. 구글에서 폰트 소스를 빌려와 사용하여 주소를 기입해두었다. 반응형을 위해 width나 height 값에 px단위 대신 % 단위를 자주 사용하였다. 클릭 가능한 개체에 :hover 효과를 넣어 방문자가 마우스를 갖다대면 글자색이 변화하거나, opacity(투명도)값이 변화하는 효과를 주었다. 강조해야하는 글은 font-weight:bold;를 주어 진하게 만들거나, font-size를 이용하여 크게 만들었다. 화면이 지루해보이지 않도록 @keyframes 을 사용하여 애니메이션 효과를 추가하였다. 글자와 그림이 잘 배치되도록 float:left 배치나, margin과 padding 값을 적절히 사용해주었다. 페이지 크기 축소 시 배열상 나타나기 애매한 이미지는 display:none; 을 사용하여 제거해주었다.
5. jQuery 코딩 내역 jQuery 소스를 이용할 것이기 때문에 jQuery 사이트에서 jquery-1.9.1.min과 jquery-3.2.0.min를 받아 링크를 걸어두었다. PrefixFree jq 파일을 이용하여, Main 페이지의 article 부분에 마우스를 댈 때 span 태그의 텍스트가 없던 상태에서 서서히 축소되며 나타나는 효과를 적용하였다. sub1 페이지에서는 cycle 플러그인의 scrollRight 태그를 이용하여 이미지가 오른쪽으로 미끄러지는 jQuery 방식을 사용하였으며, sub3 페이지에서는 cycle 플러그인의 turnDown 태그를 이용하여 이미지가 아래로 넘겨지는 jQuery 방식을 사용하였다. sub2 페이지에서는 WOWSilder를 사용하여 직접 효과를 지정하여 이미지들이 블라인드 효과를 내며 넘어가고, 버튼 클릭 시 해당 번째의 이미지로 넘어갈 수 있는 jQuery를 사용하였다.
6. 최종 페이지 디자인 - Main 화면 width 값 축소 시 반응
6. 최종 페이지 디자인 – Sub1 모바일 크기에 맞춰 반응하는 페이지
6. 최종 페이지 디자인 – Sub2 Iframe 사용한 상품 선택 페이지
6. 최종 페이지 디자인 – Sub3 스크롤 시 나타나는 화면
6. 최종 페이지 디자인 – Sub4
Thank U