스포츠웨어 브랜드인 안다르를 클론코딩해봤습니다.

적응형 모바일 형식으로 코딩을 했으며

모바일 레이아웃 구조화와 반복되는 제품 영역으로 인해 동일한 class명을 부여해

간결한 레이아웃 구조화에 중점을 두고 코딩을 하였습니다.

scss, mixin, scrolltop, 아코디언 메뉴, swiper플러그인을 사용하였으며

mixin을 이용해 줄 넘침 방짐을 구현해봤습니다

Main Point

• _mixin.scss
• scrollTop
• 아코디언 메뉴
• Swiper 플러그인

1. _mixin.scss

mixin을 사용하면 그룹단위의 스타일을 변수처럼 적용할 수 있다.

즉 여러개의 스타일을 설정해두었다가 한번에 적용하는 것이 가능하다.

@mixin elip($line,$lh:null) {
    // 공통
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: $lh+px;

    @if($line > 1){
        display: -webkit-box;
        -webkit-line-clamp: $line;
        -webkit-box-orient: vertical;
        max-height: $line*$lh+px;
    }
    @else{
        white-space: nowrap;
    }
}

$line은 줄 갯수, $lh는 줄 간격이다.

공통 스타일을 지정하고 줄 갯수가 1개를 넘었을 때 조건을 지정해봤다.