-
- 로그인후 이용해주세요.
팁과노하우
모바일 하단 퀵 아이콘 버튼을 어플같은 느낌으로 수정
하단 rb.layout_ft/footer.php 를 수정하시면됩니다.
기존것은 아이콘만 있어서 검정배경에 약간 어플같은 느낌이 없습니다.
이것을 어플같이 하단에 글자가 나오게 수정한것입니다.
<style>
.tail_fixed_gnb {
display: flex;
justify-content: space-around;
align-items: center;
background-color: #ff4078 !important; /* Dark gray background */
padding: 10px 0;
}
.footer-button {
display: flex;
flex-direction: column;
align-items: center;
color: white;
text-align: center;
width: 60px; /* Width can be adjusted as needed */
}
.footer-button button {
// color: #444444; /* Set background color for the icon */
}
.footer-button svg {
margin-left:-5px;
width: 32px; /* Increase icon size for better visibility */
height: 32px;
margin-bottom: 5px; /* Space between icon and text */
display: block;
}
.footer-button span {
margin-top:5px;
font-size: 12px;
color: #fff; /* White color for text */
text-align: center;
padding-left:10px;
}
</style>
<div class="tail_fixed_gnb mobile main_rb_bg">
<div class="footer-button">
<button type="button" onclick="location.href='<?php echo G5_SHOP_URL ?>/cart.php';" title="장바구니">
<!-- SVG Icon -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_526_6)">
<path d="M7.5 19C7.89782 19 8.27936 19.158 8.56066 19.4393C8.84196 19.7206 9 20.1022 9 20.5C9 20.8978 8.84196 21.2794 8.56066 21.5607C8.27936 21.842 7.89782 22 7.5 22C7.10218 22 6.72064 21.842 6.43934 21.5607C6.15804 21.2794 6 20.8978 6 20.5C6 20.1022 6.15804 19.7206 6.43934 19.4393C6.72064 19.158 7.10218 19 7.5 19ZM17.5 19C17.8978 19 18.2794 19.158 18.5607 19.4393C18.842 19.7206 19 20.1022 19 20.5C19 20.8978 18.842 21.2794 18.5607 21.5607C18.2794 21.842 17.8978 22 17.5 22C17.1022 22 16.7206 21.842 16.4393 21.5607C16.158 21.2794 16 20.8978 16 20.5C16 20.1022 16.158 19.7206 16.4393 19.4393C16.7206 19.158 17.1022 19 17.5 19ZM3 2C4.726 2 6.023 3.283 6.145 5H19.802C20.095 4.99996 20.3844 5.06429 20.6498 5.18844C20.9152 5.31259 21.15 5.49354 21.3378 5.71848C21.5255 5.94342 21.6615 6.20686 21.7362 6.49017C21.8109 6.77348 21.8224 7.06974 21.77 7.358L20.133 16.358C20.0492 16.8188 19.8062 17.2356 19.4466 17.5357C19.0869 17.8357 18.6334 18.0001 18.165 18H6.931C6.42514 18 5.93807 17.8083 5.56789 17.4636C5.1977 17.1188 4.97192 16.6466 4.936 16.142L4.136 4.929C4.09 4.31 3.564 4 3 4C2.73478 4 2.48043 3.89464 2.29289 3.70711C2.10536 3.51957 2 3.26522 2 3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_526_6">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
</button>
<span>장바구니</span>
</div>
<div class="footer-button">
<button type="button" onclick="location.href='<?php echo G5_SHOP_URL ?>/orderinquiry.php';" title="주문조회">
<!-- SVG Icon -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_655_31)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 3.586C6.37499 3.2109 6.88361 3.00011 7.414 3H16.586C17.1164 3.00011 17.625 3.2109 18 3.586L20.414 6C20.7891 6.37499 20.9999 6.88361 21 7.414V19C21 19.7956 20.6839 20.5587 20.1213 21.1213C19.5587 21.6839 18.7956 22 18 22H6C5.20435 22 4.44129 21.6839 3.87868 21.1213C3.31607 20.5587 3 19.7956 3 19V7.414C3.00011 6.88361 3.2109 6.37499 3.586 6L6 3.586ZM16.586 5H7.414L5.414 7H18.586L16.586 5ZM10 12C10 11.7348 9.89464 11.4804 9.70711 11.2929C9.51957 11.1054 9.26522 11 9 11C8.73478 11 8.48043 11.1054 8.29289 11.2929C8.10536 11.4804 8 11.7348 8 12C8 13.0609 8.42143 14.0783 9.17157 14.8284C9.92172 15.5786 10.9391 16 12 16C13.0609 16 14.0783 15.5786 14.8284 14.8284C15.5786 14.0783 16 13.0609 16 12C16 11.7348 15.8946 11.4804 15.7071 11.2929C15.5196 11.1054 15.2652 11 15 11C14.7348 11 14.4804 11.1054 14.2929 11.2929C14.1054 11.4804 14 11.7348 14 12C14 12.5304 13.7893 13.0391 13.4142 13.4142C13.0391 13.7893 12.5304 14 12 14C11.4696 14 10.9609 13.7893 10.5858 13.4142C10.2107 13.0391 10 12.5304 10 12Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_655_31">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
</button>
<span>주문조회</span>
</div>
<div class="footer-button">
<button type="button" onclick="location.href='<?php echo G5_SHOP_URL ?>';" title="홈">
<!-- SVG Icon -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" title="홈">
<g clip-path="url(#clip0_526_18)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.772 2.68799C11.1231 2.41488 11.5552 2.2666 12 2.2666C12.4448 2.2666 12.8769 2.41488 13.228 2.68799L21.612 9.20799C22.365 9.79499 21.949 11 20.997 11H20V19C20 19.5304 19.7893 20.0391 19.4142 20.4142C19.0391 20.7893 18.5304 21 18 21H5.99998C5.46955 21 4.96084 20.7893 4.58577 20.4142C4.2107 20.0391 3.99998 19.5304 3.99998 19V11H3.00298C2.04998 11 1.63598 9.79399 2.38798 9.20899L10.772 2.68799Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_526_18">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
</button>
<span>홈</span>
</div>
<div class="footer-button">
<button type="button" onclick="location.href='<?php echo G5_SHOP_URL ?>/wishlist.php';" title="위시리스트">
<!-- SVG Icon -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="white"/>
</svg>
</button>
<span>즐겨찾기</span>
</div>
<div class="footer-button">
<button type="button" onclick="location.href='<?php echo G5_SHOP_URL ?>/couponzone.php';" title="쿠폰존">
<!-- SVG Icon -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.537 2.16395C10.9407 2.12722 11.3477 2.1727 11.7334 2.29765C12.1191 2.4226 12.4755 2.62443 12.781 2.89095L12.931 3.03095L20.753 10.854C21.2913 11.3924 21.6048 12.1153 21.6298 12.8763C21.6549 13.6372 21.3897 14.3793 20.888 14.952L20.753 15.096L15.096 20.753C14.5576 21.2913 13.8346 21.6047 13.0736 21.6298C12.3127 21.6549 11.5707 21.3897 10.998 20.888L10.854 20.753L3.02998 12.93C2.74346 12.6434 2.51795 12.3019 2.36705 11.9258C2.21615 11.5498 2.14299 11.147 2.15198 10.742L2.16299 10.537L2.63498 5.35195C2.69558 4.68374 2.97844 4.05512 3.43834 3.56658C3.89824 3.07803 4.50864 2.75776 5.17198 2.65695L5.35098 2.63595L10.537 2.16395ZM8.02399 8.02495C7.83823 8.21071 7.69088 8.43123 7.59035 8.67393C7.48982 8.91663 7.43808 9.17676 7.43808 9.43945C7.43808 9.70215 7.48982 9.96227 7.59035 10.205C7.69088 10.4477 7.83823 10.6682 8.02399 10.854C8.20974 11.0397 8.43026 11.1871 8.67296 11.2876C8.91566 11.3881 9.17579 11.4399 9.43849 11.4399C9.70118 11.4399 9.96131 11.3881 10.204 11.2876C10.4467 11.1871 10.6672 11.0397 10.853 10.854C11.2281 10.4788 11.4389 9.96999 11.4389 9.43945C11.4389 8.90891 11.2281 8.4001 10.853 8.02495C10.4778 7.6498 9.96903 7.43905 9.43849 7.43905C8.90795 7.43905 8.39913 7.6498 8.02399 8.02495Z" fill="white"/>
</svg>
</button>
<span>xxxxxxx</span>
</div>
</div>
- 이전글데이터 이전 후 모바일 이미지 늘어 나는 현상 해결2024.11.05
- 다음글햄버거 좌측 사이드 아이콘을 서브페이지에서 < 백버튼으로 나오게하기2024.11.02
댓글목록
