ANDAR Mobile 클론코딩

yunazzi·2023년 12월 16일
mobile적응형클론코딩포트폴리오
0
post-thumbnail

📌ANDAR Mobile

  • 사이트명 : 안다르 모바일
  • 작업기간 : 3일
  • 사용언어 : HTML5,CSS3,Jquery
  • 라이브러리 : Swiper
  • 분류 : 모바일 적응형 웹사이트
  • URL : https://yunazzi.github.io/andar/

Point ✅

✔️ Header (스크롤시 고정효과 및 내부 nav토글)
✔️ SVG사용 - 하나의 파일로 색변경 효과주기
✔️ GNB열림
✔️ 비주얼 슬라이더의 높이값을 calc()로 계산하여 상하단 여백보장
✔️ 겹치는 UI부분을 공통클래스로 컨트롤
✔️ A태그위 A태그 띄우기

🔖 HEADER

헤더

안다르 모바일 헤더는 스크롤을 내리면 헤더의 배경색이 변하면서 페이지 최상단에 고정되고, 다시 스크롤을 올리면 원래 자리로 돌아간다.

$(window).scroll(function(){
	curr = $(this).scrollTop(); // 현재 위치값을 불러옴

    if (curr > 0) {
      $('.header').addClass('fix')
    } else {
      $('.header').removeClass('fix')
    }
})

🔖 SVG사용 - 하나의 파일로 색변경 효과주기

위와 같이 스크롤시 색이 변하는 헤더를 만들때 SVG를 사용하면 효율적이다.

→ 파일 하나로 CSS를 이용해 색상을 다양하게 변경이 가능하다.
→ 벡터방식이라 해상도가 깨지지 않는다.




안다르 사이트에서는 파일형식은 SVG로 사용하였으나, 검정색/흰색 버전을 background에 담아 업로드했다. 그러나 나는 하나의 파일을 이용해 path-fill의 색상을 컨트롤했다.

☑️ SVG태그를 이용하여 파일업로드

<h1 class="logo">
                    <a href="">
                        <span class="blind">안다르</span>
                        <svg width='80' height='21' viewBox='0 0 80 21' fill='#fff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M47.0869 5.86882C47.8839 6.25103 48.5762 6.75112 49.1488 7.36194H49.1525V0.5H51.6935V20.1642H49.1525V18.2282C48.5837 18.8461 47.8952 19.3498 47.1056 19.732C46.0465 20.2428 44.8977 20.5 43.6815 20.5C42.1734 20.5 40.7738 20.1571 39.5165 19.482C38.2591 18.8068 37.2524 17.871 36.5227 16.7065C35.7967 15.5384 35.4263 14.2167 35.4263 12.7772C35.4263 11.3519 35.8042 10.0374 36.5527 8.86935C37.2936 7.70486 38.3077 6.77612 39.5688 6.10814C40.8262 5.44374 42.2071 5.10439 43.6777 5.10439C44.8752 5.10439 46.0203 5.36158 47.0869 5.86882ZM46.4918 8.09064C45.6386 7.60127 44.6844 7.35122 43.6553 7.35122C42.585 7.35122 41.6083 7.59055 40.7476 8.06921C39.8832 8.54787 39.1984 9.2087 38.7119 10.0374C38.2217 10.8697 37.9709 11.8163 37.9709 12.8558C37.9709 13.8595 38.2217 14.7811 38.7119 15.5956C39.1984 16.4064 39.8832 17.0637 40.7476 17.5388C41.6083 18.0138 42.6 18.2567 43.6852 18.2567C44.6994 18.2567 45.6386 18.0103 46.4844 17.528C47.3301 17.0422 48.0112 16.3778 48.5089 15.5563C49.0066 14.7347 49.2611 13.8167 49.2611 12.8308C49.2611 11.8592 49.0103 10.9412 48.5201 10.0981C48.0261 9.25871 47.3451 8.58359 46.4918 8.09064ZM13.725 7.37263C13.1823 6.76538 12.52 6.26886 11.7454 5.88665C10.6975 5.3687 9.52251 5.10437 8.25391 5.10437C6.78699 5.10437 5.40239 5.44372 4.14502 6.10812C2.88765 6.77967 1.87352 7.70841 1.12883 8.86933C0.3804 10.0374 0.00244141 11.3519 0.00244141 12.7772C0.00244141 14.2167 0.372916 15.5384 1.0989 16.7064C1.82862 17.8745 2.83526 18.8068 4.09263 19.4819C5.35 20.1571 6.74956 20.5 8.25766 20.5C9.50754 20.5 10.6751 20.2392 11.7229 19.7177C12.5013 19.3319 13.1711 18.8354 13.7287 18.2317V20.1642H16.2696V5.46515H13.7287V7.37263H13.725ZM13.0925 10.0981C13.5828 10.9376 13.8335 11.8591 13.8335 12.8272C13.8335 13.8131 13.579 14.7311 13.0813 15.5527C12.5836 16.3742 11.9025 17.0386 11.0531 17.5244C10.2111 18.0067 9.26804 18.2532 8.25766 18.2532C7.1874 18.2532 6.20321 18.0138 5.33128 17.5459C4.45936 17.0779 3.7708 16.4243 3.28432 15.6027C2.7941 14.7811 2.54337 13.8524 2.54337 12.8486C2.54337 11.8127 2.79784 10.8625 3.29555 10.0303C3.79325 9.20153 4.48181 8.53713 5.34625 8.06204C6.21069 7.58696 7.17991 7.34406 8.22772 7.34406C9.26056 7.34406 10.2148 7.5941 11.068 8.08347C11.9212 8.58356 12.6023 9.25868 13.0925 10.0981ZM29.921 5.97238C28.8657 5.39728 27.6121 5.10794 26.1976 5.10794C25.1722 5.10794 24.2142 5.30798 23.3535 5.70805C22.766 5.97595 22.1673 6.38674 21.7631 6.78324V5.46515H19.2222V20.1642H21.7631V11.877C21.7631 10.5553 22.2346 9.45515 23.0317 8.60857C23.8288 7.76199 24.8728 7.3512 26.2238 7.3512C27.0433 7.3512 27.7955 7.53695 28.4616 7.9013C29.1277 8.26565 29.6404 8.7836 30.0221 9.48372C30.4 10.1803 30.5946 11.0304 30.5946 12.0056V20.1678H33.1243V12.0056C33.1243 10.6625 32.9185 9.45514 32.3647 8.41925C31.7996 7.37263 30.98 6.55106 29.921 5.97238ZM67.717 7.37263C67.1744 6.76538 66.512 6.26886 65.7374 5.88665C64.6896 5.3687 63.5145 5.10437 62.2459 5.10437C60.7753 5.10437 59.3944 5.44372 58.137 6.10812C56.8759 6.7761 55.8618 7.70483 55.1171 8.86933C54.3687 10.0374 53.9907 11.3519 53.9907 12.7772C53.9907 14.2167 54.3612 15.5384 55.0872 16.7064C55.8169 17.8709 56.8235 18.8068 58.0809 19.4819C59.3383 20.1571 60.7378 20.5 62.2459 20.5C63.4958 20.5 64.6634 20.2392 65.7112 19.7177C66.4895 19.3319 67.1594 18.8354 67.717 18.2317V20.1642H70.2579V5.46515H67.717V7.37263ZM67.0845 10.0981C67.5785 10.9376 67.8255 11.8591 67.8255 12.8272C67.8255 13.8131 67.571 14.7311 67.0733 15.5527C66.5756 16.3742 65.8945 17.0386 65.0451 17.5244C64.2031 18.0067 63.2638 18.2532 62.2497 18.2532C61.1794 18.2532 60.1952 18.0138 59.3233 17.5459C58.4514 17.0779 57.7628 16.4243 57.2763 15.6027C56.7861 14.7811 56.5354 13.8524 56.5354 12.8486C56.5354 11.8127 56.7899 10.8625 57.2876 10.0303C57.7853 9.20153 58.4738 8.53713 59.3383 8.06204C60.2027 7.58696 61.1719 7.34406 62.2197 7.34406C63.2526 7.34406 64.2068 7.5941 65.06 8.08347C65.9133 8.58356 66.5943 9.25868 67.0845 10.0981ZM75.7504 5.46519V7.23693C76.6635 5.74381 78.1117 5.16156 79.9978 5.15799V7.76203C78.6169 7.76203 77.483 8.15495 76.7945 8.8908C76.0984 9.63379 75.7504 10.734 75.7504 12.1414V20.1642H73.2095V5.46519H75.7504Z' fill='#fff'/></svg>
                    </a>
                </h1>


☑️ ScrollTop값이 헤더 상단부분보다 커질경우,추가 클래스명을 부여하여 class가 있을때와 없을때 fill값이 조정되게끔 처리했다.(js에서 css부분을 한번 더 만지지않아도 됨)

.header.fix{top: 0;}
.header.fix .group-header{background: #fff;}
.header.fix .group-header path{fill: #000;}
.header.fix .gnb{display: block;}

🔖 Header 내부 NAV 토글

→ header영역에 카테고리메뉴는 토글버튼으로 구성했다.
→ 스크린 리더 사용자를 위해 일반 사용자들은 보이지않는 클래스명을 부여하여 버튼의 상호작용이 무엇인지 적어두었다. (aria-label사용도 가능)

메뉴토글, css변경은 slideToggle(), toggleClass() 메서드로 구성

$(window).trigger('scroll');

  $('.gnb .group-nav .btn-toggle').click(function(){
    $(".gnb .group-nav").toggleClass('on')
    // slideUp+slideDown합친게 slideToggle
    $(".gnb .group-all").slideToggle()
  })

🔖 GNB, SEARCH버튼 클릭시 각 영역 보여주기

//상단 btn버튼 상호작용

// - 카테고리버튼
  $('.btn-category').click(function(){
    $('.side-nav').toggleClass('on')
    $('.dimmed').toggleClass('on')
    disableBodyScroll();
  })
  $('.side-nav .close').click(function(){
    $('.side-nav').removeClass('on')
    $('.dimmed').removeClass('on')
    enableBodyScroll();
  })

// - 서치버튼
  $('.btn-search').click(function(){
    $('.side-search').toggleClass('on')
    disableBodyScroll();
  })
  $('.search-close').click(function(){
    $('.side-search').removeClass('on')
    enableBodyScroll();
  })

→ 메뉴영역이 열릴때는 'dimmed'클래스를 사용하여 바깥영역을 어둡게 처리하였고, 메뉴가 열렸을때 페이지가 스크롤되지 않도록 함수명을 지정하여 css를 추가하여 처리했다.

① 바깥영역 어둡게 처리하기

.dimmed{ display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; background: rgba(0,0,0,.5); }
.dimmed.on{ display: block; }

② 메뉴가 열렸을때 페이지가 스크롤 되지않도록 처리하기

  //body 스크롤 차단
  function disableBodyScroll(){
    $('body').css({'overflow':'hidden','height':'100%'})
  }
  //body 스크롤 허용
  function enableBodyScroll(){
    $('body').css({'overflow':'auto','height':'auto'})
  }

③ input에 값이 없으면 알럿창호출과 input에 포커싱되게 처리하기

$('.side-search .search-go').click(function(){
  if($('#search-text').val().length==0){alert('검색어를 입력해주세요');$('#search-text').focus(); return false;}
})

🔖 Visual영역 - height:calc()

height값이 바뀌어도 상단 배너와 아래영역 100px 되는 부분을 보장하기 위해 calc()를 사용했다. 그리고 img태그일 경우 object-fit:cover를 이용하면, background-size:cover와 같은 느낌으로 가로세로 비율이 안맞아도 이미지를 강제로 늘리지 않고 맞춰 잘라준다.

.sc-visual .main-slide{
min-width: 320px; 
min-height: 400px; 
height: calc(100vh - 140px); 
object-fit: cover; 
position: relative;
}
.sc-visual .swiper img{
width: 100%; 
height: 100%; 
object-fit: cover;
}

🔖 공통 클래스

✔️ 레이아웃이 공통되는 부분은 같은 클래스명을 부여하여 효율적인 css작성
✔️ 차이점이 있는 부분은 추가로 클래스명을 부여하여 컨트롤하여 구성했다.

공통 레이아웃은 sc-info클래스, 배경부분이 달라서 각각 membership, info 클래스로 조정함

<section class="sc-info membership">
  <a href="">
	<img src="https://m.andar.co.kr/web/andar/banner/member/231117_2/mo_member_bn.jpg" alt="" class="bg">
    <h2 class="title">안다르 멤버십</h2>
    <p>
      5,000원 쿠폰 지급, 상시 5% 할인 <br>
      등급별 혜택을 놓치지마세요.
    </p>
    <span class="btn-more">자세히 보기</span>
  </a>
</section>
<section class="sc-info info">
  <a href="">
	<img src="https://m.andar.co.kr/web/andar/banner/store/20210628/banner-mo.jpg" alt="" class="bg">
    <h2 class="title">안다르 오프라인 스토어 안내</h2>
    <p>
      전국 백화점과 아울렛에서 안다르 제품을 경험하세요. <br>
      안다르만의 스토어 멤버십을 통해 <br>
      특별한 혜택도 함께 누려보세요.
    </p>
    <span class="btn-more">자세히 보기</span>
  </a>
</section>

🔖 상품영역 리뷰링크 개별처리

→ 각 아이템의 전체영역은 해당상품의 링크로 이동
→ 리뷰영역은 해당상품의 리뷰목록의 링크로 이동

a태그안에 a태그를 사용하는것은 문법상오류!

① 아이템 정보영역이 시작되는 최상단에 전체 영역 링크를 따로 빼 준다.

<ul class="product-list type1">
  <li class="product-item">
    <a href="" class="link"></a>
    <div class="thumb-box">
      <span class="rank">1</span>
      <img src="https://cafe24img.poxo.com/andar01/web/product/medium/202311/676d5ec75d114425266d7016ac89bdda.jpg" alt class="prd-img">
      <div class="icon">
        <img src="https://m.andar.co.kr/web/upload/image_custom_3716654997768594.png" alt="신상품 및 기모">
      </div>
    </div>
    <div class="desc-wrap">
      <button class="review">리뷰 809</button>
      <p class="title">[1+1] NEW 기모 유로센스 레깅스</p>
      <div class="price">
      	<em class="sale">50%</em>
        <span class="curr">59,000원</span>
        <span class="ori">118,000원</span>
      </div>
      <div class="add-box"></div>
    </div>
  </li>
 </ul>

② 전체 링크 영역의 위치와 크기를 잡아준다.

position:absolute로 위치를 잡아주고, top: 0; right: 0; bottom: 0; left: 0;으로 모든 네 가장자리 끝에 맞춰 위치시켜 영역이 꽉채워지도록 조절한다.

.product-list .link{
position: absolute; 
top: 0; right: 0; bottom: 0; left: 0;
}

🔖 BEST영역 - Tab Menu

① HTML - 탭 메뉴 구성

→ 탭메뉴 버튼의 data-cate속성과 탭 컨텐츠의 id값을 맞춰준다.

<ul class="best-list">
	<li class="best-item active"><a href="" data-cate="#cate1">전체</a></li>
    <li class="best-item"><a href="" data-cate="#cate2">우먼즈</a></li>
    <li class="best-item"><a href="" data-cate="#cate3">맨즈</a></li>
    <li class="best-item"><a href="" data-cate="#cate4">주니어</a></li>
    <li class="best-item"><a href="" data-cate="#cate5">홈트용품</a></li>
</ul> 
                
<div class="tabcon active" id="cate1">
.
.
</div>
<div class="tabcon" id="cate2">
.
.
</div>

② CSS -'active' 클래스 추가시 제어할 부분

/*메뉴버튼 active시  배경색, 텍스트색상 변경*/
.sc-best .best-item.active{
font-weight: 700; 
color: #FFFFFF; 
background: #B75622; 
border-radius: 60px;
}

/*탭 컨텐츠 display 속성제어*/
.sc-best .tabcon{display: none;}
.sc-best .tabcon.active{display: block;}

③ Script - 탭 버튼 클릭시

$('.best-item').click(function(e){
  e.preventDefault();
  tabCon = $(this).children().data('cate');

  $(this).addClass('active').siblings().removeClass('active');
  $(tabCon).addClass('active').siblings().removeClass('active');
})

🔖 Quick Menu

→ 스크롤을 아래로 내릴때 사라지고 위로 스크롤시 나타나도록 작업

① 퀵메뉴 나타나기/사라지기

  $(window).scroll(function(){
    curr = $(this).scrollTop(); // 현재 스크롤값

    if(curr == 0){ // 현재 스크롤 값이 0이면
      $('.quick-menu').removeClass('on')
    }else{ //현재 스크롤값이 0이 아니라면
      if(curr > lastScroll){ // 현재스크롤값이 직전스크롤값보다 클경우
        $('.quick-menu').removeClass('on')
      }else{ // 현재스크롤값이 직전스크롤값보다 작을경우
        $('.quick-menu').addClass('on')
      }
    }
    lastScroll = curr; //조건문 실행이후 변수에 현재스크롤값 저장
  })

② 맨위로 이동하기

$('.btn-gotop').click(function(){
  window.scrollTo({top:0,behavior:"smooth"})
})

참고사이트
https://m.blog.naver.com/pjh445/220973838216
https://rgy0409.tistory.com/3029#google_vignette
https://www.codingfactory.net/10295
https://hianna.tistory.com/813

profile
yunazzi
뚝딱뚝딱 열심히 공부 중 이예요!
이전 포스트

alert/prompt/confirm의 차이

다음 포스트

Sign-cms PC클론코딩

0개의 댓글