[Portfolio] ANDAR

jwww·2023년 2월 25일

portfolio

포트폴리오

목록 보기

3/6

🔎프로젝트 정보

프로젝트명: ANDAR 클론코딩
제작기간: 3일
사용 라이브러리: JQUERY, Swiper
분류: 적응헝 MOBILE

🚩포인트

반복 레이아웃 공통 클래스 사용
헤더 스타일 변경
2-1. 스크롤 시 변경되는 헤더
2-2. 클릭하면 변경되는 헤더
스크롤 올리고 내림에 따라 나타나는 메뉴
SVG 활용

1. 반복되는 레이아웃 공통 클래스 사용

안다르의 레이아웃은 전체적으로 반복되는 레이아웃으로 이뤄지고 계속 사용되는 요소가 있기 때문에 효율적인 코드 작성을 위해서 재사용되는 요소 & 레이아웃은 공통 클래스로 만들었습니다.

/* 제품 공통 클래스 */
.product-item .info-box .review {
    color: #8e1f29;
    padding-left: 0px;
    font-weight: 600;
    font-size: 13px;
    line-height: 13px;
}
.product-item .info-box .name {
    margin: 10px 0;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: -0.05em;
}
.product-item .info-box .price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}
.product-item .info-box .percent {
    color: #8E1F29;
    font-weight: 600;
}
.
.
.

2. 헤더 스타일 변경

2-1. 스크롤 시 헤더 스타일 변경

스크롤을 했을 때 헤더의 스타일이 변경되고 숨어있던 하위메뉴(.group-gnb)가 나타납니다.

scrollTop 값이 0 이상이면 (스크롤이 조금이라도 발생했다면) 헤더에서 on 클래스를 추가하고 scrollTop값이 0 이면 on 클래스를 제거하는 방식으로 스타일을 변경했습니다.

스크롤을 내린 상태로 새로고침 했을 때, 헤더의 스타일이 scrollTop 값이 0일 때의 스타일로 적용되므로 강제로 스크롤 이벤트를 만들어줬습니다.

$(window).scroll(function(){
    const usrScroll = $(this).scrollTop();

    if ( usrScroll > 0 ) {
        $('.header').addClass('on');
    } else {
        $('.header').removeClass('on');
    }
})
$(window).trigger('scroll');    //강제로 스크롤 이벤트

scrollTop() 은?

선택한 요소의 스크롤 위치를 반환하거나 설정하는 메서드.
요소의 상단에서 맨 위 콘텐츠까지의 거리를 측정한 값을 반환한다.

비슷하게 수평 스크롤바의 위치를 반환하는 .scrollLeft() 메서드도 있다.

2-2. 클릭하면 변경되는 헤더

오른쪽 버튼을 클릭하면 내부 내용이 바뀌면서 하위 메뉴들이 나옵니다.

가상클래스 on으로 헤더의 스타일을 변경하고
하위 메뉴들은 slideToggle()로 내리거나 올립니다.

이 때, 버튼의 대체 텍스트도 가상클래스 on의 여부에 따라 '닫기'나 '펼치기'로 내용을 바꿔줍니다.

$('#btnGnb').click(function(){
      const headerGnb = $('.header .group-gnb');

      $('.header .all-area').stop().slideToggle();
      headerGnb.toggleClass('on');

      if ( headerGnb.hasClass('on') ) {
          $('#btnGnb').attr('aria-label','닫기');
      } else {
          $('#btnGnb').attr('aria-label','펼치기');
      }
});

3. 스크롤을 올리고 내림에 따라 나타나는 메뉴

스크롤을 내릴 때 화면 하단에 퀵메뉴가 사라지고 스크롤을 올릴 때는 화면 하단 퀵메뉴가 나타납니다.

let lastScroll = 0;
$(window).scroll(function(){
    const usrScroll = $(this).scrollTop();

    if( usrScroll > lastScroll ) {
        $('.quick').addClass('hide');
    } else {
        $('.quick').removeClass('hide');
    }
    lastScroll = usrScroll;
});

✍ 코드리뷰

let lastScroll = 0;
: 변수 lastScroll은 지난 스크롤을 담는 변수로 현재의 스크롤을 담는 변수 usrScroll과 비교하기 위해 필요합니다.
스크롤이벤트가 발생할 때마다 값이 변해야하기 때문에 블록 바깥에서 let으로 변수를 선언합니다.

if ( usrScroll > lastScroll )
: 이 조건문은 현재의 스크롤양이 지난 스크롤양보다 많을 때, 즉 스크롤을 내릴 때 true를 반환하고 올릴 때 false를 반환합니다.

$('.quick').addClass('hide');
: 조건문이 true일 경우 hide 라는 클래스를 추가하고 제거하면서 요소를 보이지않거나 보이게합니다.

lastScroll = usrScroll;
: 모든 조건 비교가 끝난 후, 마지막에 lastScroll에 usrScroll 값을 저장하여 새롭게 스크롤 이벤트가 발생할 때 lastScroll 은 지난번 스크롤을 담게됩니다.

📌기존 사이트 개선방안

1. 메인비주얼 타이포 위치 고정

기존 ANDAR 사이트

기존 ANDAR 사이트에서는 메인비주얼 타이포의 위치를 padding: 20% 7.5%; 로 잡아줘서 메인비주얼 영역의 크기는 고정되었는데 타이포의 위치만 가변단위인 %로 지정해서 화면의 크기가 늘어났을 때는 위치가 이상한 곳에 잡히는 것을 확인할 수 있습니다.

이것을 고정 단위인 px로 변경하여 화면을 늘리거나 줄였을 때도 타이포의 위치가 고정되도록 했습니다.

수정 후

2. svg 활용

스크롤 시 헤더 스타일이 변경될 때, 헤더 안에 위치한 이미지들의 색상이 흰색에서 검은색으로 변합니다.

[기존 ANDAR 사이트]

기존 andar 사이트에서는 background-image로 svg를 넣어서 스크롤 하지 않았을 때의 이미지와 스크롤 했을 때의 이미지 두 개를 따로 넣어주었는데,
이럴 때는 이미지를 교체하는 것보다 svg의 속성값을 변경하면 편리하게 바꿀 수 있기 때문에 이미지를 따로 넣지 않고 코드 값을 변경해주었습니다.

HTML

<!-- GROUP-HEADER -->
 <div class="group-header">
     <h1 class="logo">
         <a href="">
            <svg width='80' height='21' viewBox='0 0 80 21' xmlns='http://www.w3.org/2000/svg'>
               <path fill-rule='evenodd' clip-rule='evenodd' d='M47.0869 5...' fill='#fff'/>
            <span class="blind">ANDAR</span>
         </a>
     </h1>
     ...
</div>

CSS

.header.on .group-header svg path { fill: #000; }

✍ 코드리뷰

svg path의 fill 속성 값을 변경해서 색을 바꿔 주었습니다.
<path> 태그는 일러스트레이터처럼 패스(선과 면)을 이용한 태그로 속성 중
d 속성은 패스데이터를 의미하며 복잡한 도형의 모양을 그리는데 이용합니다.
fill 속성은 svg 이미지의 색상을 제어할 수 있습니다.

svg란?

2차원 벡터 그래픽을 표현하기 위한 XML 기반 마크업 언어.

svg 특징

코드로 이루어진 XML 기반 2차원 그래픽

벡터기반이기 때문에 사이즈가 변경되어도 깨지지 않는다.

XML 문법으로 이루어져있기 때문에 CSS 수정과 Event Handle이 가능하다.

jwww

퍼블리셔 공부 블로그 입니다

이전 포스트

[Portfolio] 서울시청

다음 포스트

[Portfolio] ANDAR

포트폴리오

🔎프로젝트 정보

🚩포인트

1. 반복되는 레이아웃 공통 클래스 사용

2. 헤더 스타일 변경

2-1. 스크롤 시 헤더 스타일 변경

`scrollTop()` 은?

2-2. 클릭하면 변경되는 헤더

3. 스크롤을 올리고 내림에 따라 나타나는 메뉴

✍ 코드리뷰

📌기존 사이트 개선방안

1. 메인비주얼 타이포 위치 고정

2. svg 활용

✍ 코드리뷰

svg란?

svg 특징

[Portfolio] 서울시청

[Portfolio] Naver Career

0개의 댓글

[Portfolio] ANDAR

포트폴리오

🔎프로젝트 정보

🚩포인트

1. 반복되는 레이아웃 공통 클래스 사용

2. 헤더 스타일 변경

2-1. 스크롤 시 헤더 스타일 변경

scrollTop() 은?

2-2. 클릭하면 변경되는 헤더

3. 스크롤을 올리고 내림에 따라 나타나는 메뉴

✍ 코드리뷰

📌기존 사이트 개선방안

1. 메인비주얼 타이포 위치 고정

2. svg 활용

✍ 코드리뷰

svg란?

svg 특징

[Portfolio] 서울시청

[Portfolio] Naver Career

0개의 댓글

`scrollTop()` 은?