비엔시스템 코드 구축

Footer (PC/MO)

푸터는 화면을 구성하는 가장 마지막 요소로 헤더와 본문에서 원하는 정보를 찾지 못하였거나 사이트 구조 탐색 중에 길을 잃은 사용자들이 대면하게 되는 정보이다.

따라서 푸터에는 사용자가 서비스를 탐색할 수 있는 추가적인 수단, 문제를 해결하는 데 참고할 수 있는 유용한 링크가 제공되어야 한다.

주로 회사정보, 개인정보 정책, 소셜 미디어 정보 등이 포함된다.

Footer - Type1

Mobile (## 디자인 작업중 ##)

                
                  <footer class="footer" style="position: static; transform: translateY(0);">
                    <div class="footer__inner">
                      <div class="footer_content">
                        <div class="footer_logo">
                          <img src="../_img/common/logo.png" alt="" height="60">
                        </div>
                        <ul class="footer_navigation">
                          <li class="navigation"><a href="#">회사소개</a></li>
                          <li class="navigation navi-privacy"><a href="#">개인정보처리방침</a></li>
                          <li class="navigation"><a href="#">이용약관</a></li>
                          <li class="navigation"><a href="#">고객센터</a></li>
                        </ul>
                        <div class="footer_company_info">
                          <ul class="company_info">
                            <li><span class="company_info_title">상호명</span>비엔시스템</li>
                            <li><span class="company_info_title">대표자명</span>엄요한</li>
                          </ul>
                          <ul class="company_info">
                            <li><span class="company_info_title">주소</span>서울특별시 노원구 화랑로 419-7, 에스에스 빌딩 3층</li>
                            <li><span class="company_info_title">사업자등록번호</span>000-00-00000</li>
                          </ul>
                          <ul class="company_info">
                            <li><span class="company_info_title">대표전화</span>000-0000-0000</li>
                            <li><span class="company_info_title">E-MAIL</span>bnsystem@email.com</li>
                            <li><span class="company_info_title">FAX</span>000-0000-0000</li>
                          </ul>
                        </div>
                        <p class="copyright">&copy; COPYRIGHT ALL RIGHT RESERVED.</p>
                      </div>
                      <div class="footer_content">
                        <div class="footer_icons">
                          <a href="#" class="footer_icon icon-blog"></a>
                          <a href="#" class="footer_icon icon-kakao"></a>
                          <a href="#" class="footer_icon icon-facebook"></a>
                          <a href="#" class="footer_icon icon-instagram"></a>
                          <a href="#" class="footer_icon icon-youtube"></a>
                        </div>
                        <div class="footer_center">
                          <h5>고객센터</h5>
                          <p class="telNo">000-0000-0000</p>
                        </div>
                      </div>
                    </div>
                  </footer>
                
              

사용성 가이드라인

모든 페이지에 푸터를 일관된 위치에 제공해야 한다.
-푸터는 페이지의 마지막 요소이므로 본문 하단에 배치해야 한다. 본문의 높이가 뷰포트 높이보다 짧은 경우 푸터가 뷰포트 하단에 고정되어 있는지 확인한다.

footer CSS로 하단 고정
개인 정보 처리 방침을 반드시 표시한다.
-개인 정보 처리의 투명성 등을 알리기 위한 개인 정보 처리 방침은 반드시 웹사이트에 공개해야 하고, 변경된 경우 그 사항을 반영해야 한다. 또한 폰트 웨이트(Font weight)를 다른 정책링크보다 진하게 준다.
전자상거래가 포함된 경우 이용약관을 반드시 표시한다.
-인터넷쇼핑몰 등 전자상거래가 포함된 경우, 소비자가 안전하게 거래할 수 있도록 사업자의 신원, 거래 약관 등을 푸터에서 제공해야 한다.

공통 레이아웃

모든 푸터 섹션의 정보는 일관된 순서로 제공한다. 또한 화면너비가 줄어 병렬배치에서 수직배치로 변경되더라도 순서는 변하지 않도록한다.

A : 컨테이너 - 푸터가 제공되는 영역
B : 정책링크 - 웹 접근성, 개인 정보 처리 방침과 같은 각종 정책 링크가 제공됨. 폰트 사이즈 20px로 제작
C : 서비스 로고 - 기관/서비스 로고를 통해 디지털 서비스 운영 주체의 정체성을 전달하는 요소. 높이 40px로 제작
D : 회사정보 - 회사,대표자명 / 주소,사업자등록번호 / 문의방법 순으로 작성
F : SNS 링크 아이콘 - 아이콘을 클릭하면 회사가 운영하는 SNS 계정으로 이동할 수 있음. 아이콘은 40px로 제작
G : 고객센터 정보 - 고객센터 운영시간, 번호 등 고객센터 정보를 제공하는 부분

디테일

모든 푸터 섹션의 정보는 일관된 순서로 제공한다. 또한 화면너비가 줄어 병렬배치에서 수직배치로 변경되더라도 순서는 변하지 않도록한다.

A : - 영역별 간격은 20px로 지정함
B : - ‘회사정보’ 구역의 폰트 사이즈(font size)는 14px로 지정함. 내용 사이 간격은 4px로 지정함
C : - 구별 선의 높이는 8px로 지정함
D : - 푸터의 위아래 여백은 40px로 지정함

Footer (PC/MO)

Footer - Type1

사용성 가이드라인

footer CSS로 하단 고정

공통 레이아웃

디테일