✔️안다르 클론코딩

제작기간 : 23.02.25 ~ 23.02.27 (3일)
사용 : HTML, CSS
분류 : 클론코딩, mobile

파일 구조

• index.html
• assets/css/common.css
• assets/css/font.css
• assets/css/layout.css
• assets/css/main.css
• assets/css/reset.css
• assets/fonts/폰트파일
• assets/images/이미지파일
• assets/js/main.js

1. SVG

• Scalable Vector Graphics
• 이미지 파일이 아닌 코드로 된 이미지(아무리 확대해도 깨지지 않음)
• 특정 이벤트에서 색을 바꿀 수 있음
• <path> : 경로를 정의함. 선, 곡선 등 다양한 형태를 그릴 수 있음. fill 속성으로 이미지 색깔을 채움

2. web font

🔷web font

방문자의 로컬 컴퓨터의 폰트 설치 여부와 상관없이 온라인의 특정 서버에 위치한 폰트파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트

🔷@font-face

@font-face { /* 웹 브라우저에게 내려받을 폰트의 이름과 경로를 알려줌 */
    font-family: 'Gilory'; /* 사용할 폰트명 */
    src: url('../fonts/Gilroy-Regular.woff2') format('woff2'); /* 저장 위치, 확장자 */
    font-weight: 400; /* 두께 */
}

WOFF

WOFF : Web Open Font Format. 웹용 글자 포맷으로, 최신 웹 브라우저 대부분에서 지원함. 확장자는 .woff
WOFF2 : WOFF보다 30% ~ 50% 정도 더 압축되어 훨씬 가벼움. WOFF처럼 최신 웹 브라우저 대부분에서 지원함. 따라서 가장 좋은 폰트 포맷. 확장자는 .woff2

사이트의 폰트 내려받기

개발자모드 켜기 -> Network 클릭 -> font 클릭 -> 새로고침 -> 원하는 font 더블클릭

3. 헤더 고정하기

• $(window).trigger()

  • 새로고침 했을 때 가끔 인식이 안 되는 경우가 있음! - 새로고침 했을 때, 스크롤 이벤트를 한 건 아니라서 이벤트가 실행이 안 되어서 그럼. 그래서, $(window).trigger('scroll')를 넣어줌. 이것은 페이지가 로드될 때 스크롤 이벤트를 한 번 실행한 효과를 줌.

    /* 최상단의 이벤트 슬라이드 높이가 40px이기 때문에 헤더는 그만큼 밑에 위치시켰음 */
    .header{ 
      position: absolute; 
      top: 40px; 
      width: 100%; 
      z-index: 10; 
    }
    ...
    /* 헤더가 고정됐을 때 */
    .header.fixed{ 
      position: fixed; 
      top: 0; 
    }

    $(window).scroll(function(){
      curr=$(this).scrollTop();
    
      if (curr > 0) { // 현재 스크롤바 위치가 0보다 크다면,
          $('.header').addClass('fixed'); // header를 고정해라
      } else { // 현재 스크롤바 위치가 0이라면,
          $('.header').removeClass('fixed'); // header를 고정하지 말아라
      };
    });
    $(window).trigger('scroll'); // 페이지가 로드될 때 스크롤 이벤트를 한 번 실행한 효과

4. 고정된 헤더의 메뉴 토글

📌html

<nav class="gnb">
    <div class="group-nav">
        <span class="all-text">전체메뉴</span>
        <ul class="nav-list">
            <li class="nav-item hot"><a href="">봄 신상</a></li>
            <li class="nav-item hot"><a href="">베스트</a></li>
            <li class="nav-item"><a href="">우먼즈</a></li>
            <li class="nav-item"><a href="">맨즈</a></li>
            <li class="nav-item hot"><a href="">릴레어</a></li>
            <li class="nav-item"><a href="">아울렛</a></li>
        </ul>
        <button class="btn-all"><span class="blind">전체메뉴 보기</span></button>
    </div>
    <div class="group-all">
        <ul class="nav-list">
            <li class="nav-item hot"><a href="">봄 신상</a></li>
            <li class="nav-item hot"><a href="">베스트</a></li>
            <li class="nav-item"><a href="">우먼즈</a></li>
            <li class="nav-item"><a href="">맨즈</a></li>
            <li class="nav-item hot"><a href="">릴레어 시리즈</a></li>
            <li class="nav-item"><a href="">아울렛</a></li>
            <li class="nav-item"><a href="">홈트용품&액세서리</a></li>
            <li class="nav-item"><a href="">서스테이너블</a></li>
            <li class="nav-item"><a href="">요기니 요가복</a></li>
        </ul>
    </div>
</nav>

📌css

/* 기본적으로 gnb는 안 보임 */
.gnb{ 
    visibility: hidden; 
    opacity: 0; 
    ...
}
/* 헤더가 고정되면 gnb가 보임 */
.header.fixed .gnb{ 
    visibility: visible; 
    opacity: 1; 
}
.gnb .group-nav .nav-list{ /* 보임 */
    display: flex; 
}
.gnb .group-nav .all-text{  /* 안 보임 */
    display: none; 
    ...
}
.gnb .group-all{ /* 안 보임 */
    display: none; 
    ...
}

/* open */
.gnb.open .group-nav .btn-all{ 
    transform: rotate(180deg); 
}
.gnb.open .group-nav .nav-list{  /* .open이 들어가면 .group-nav .nav-list는 숨겨짐 */
    visibility: hidden; 
}
.gnb.open .group-nav .all-text{ /* .open이 들어가면 .all-text는 보여짐 */
    display: block; 
}

📌js

$('.gnb .btn-all').click(function(){
    $('.gnb').toggleClass('open'); // gnb .all-text와 .group-nav .nav-list 토글
    $('.gnb .group-all').slideToggle(); // gnb .group-all 슬라이드 토글
});

5. 사용자 편의성을 높인 팝업 사이드 메뉴창

• .side-nav 팝업창에 들어갔을 때 뒷배경 스크롤 막기
  • body에 hidden 클래스 줘야 함. - overflow: hidden 주면 스크롤이 싹 사라짐.

• .side-nav 팝업창 뒷배경에 색 주는 방법 두 가지
  • body.hidden을 쓰고 before, after를 활용하거나 / 어두침침한 막을 태그로 만들어서 쓰던가(dimmed)
    가장 쉬운 건 dimmed! - header 아래에다 만들기

📌css

.hidden{
    overflow: hidden;
}
.dimmed{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
    background: rgba(0,0,0,.5);
    /* 기본적으로 dimmed는 보이지 않음 */
    visibility: hidden;
    opacity: 0;
}
body.hidden .dimmed{ /* dimmed는 body에 hidden 클래스가 들어갔을 때만 보임!*/
    visibility: visible;
    opacity: 1;
}

📌js

$('.btn-menu').click(function(){
    $('.side-nav').addClass('on');
    $('body').addClass('hidden'); // body 스크롤 불가
});
$('.side-nav .btn-close, .dimmed').click(function(){ 
    // 닫기 버튼을 누르거나 dimmed를 클릭하면 팝업창이 닫힘.
    $('.side-nav').removeClass('on');
    $('body').removeClass('hidden'); // body 스크롤 가능
});

6. 비슷한 레이아웃의 통일된 클래스

• .prd-list라는 알맹이 클래스를 만들어서 비슷한 레이아웃에 공통적으로 사용했음.

• 제품이 두 개씩 나오는 영역에는 .list1,
  제품이 수평으로 나오는 영역에는 .list2라는 클래스를 추가로 줘서
  다르게 꾸밀 수밖에 없는 부분에 대응했음.

• BEST 영역과 이달의 신상 영역은 레이아웃이 아예 똑같이 생겼기 때문에 .sc-prd 클래스로 한번에 꾸몄음.

7. 🔥안다르와 다르게 만든 부분

🔷헤더 SVG 색깔

• 헤더의 SVG가 스크롤바 위치 변화에 따라 색이 바뀌는데,
  안다르 사이트는 색이 다른 새로운 SVG 파일로 바뀌게 했음.
• 나는 새로운 파일을 추가하지 않고,
  SVG의 path 태그의 fill 속성값을 #fff에서 #000으로 바꿔서 색 변화를 줬음.

📌html

<header class="header">
    <div class="group-flex">
        <h1 class="logo">
            <a href="">
                <span class="blind">안다르 로고</span>
                <svg width='80' height='21' viewBox='0 0 80 21' xmlns='... 생략'>
                	<path ... 생략 fill='#fff'/> 
                	<!-- 기본으로 지정한 path의 fill 속성값이 #fff, 즉 svg는 흰색 -->
              	</svg>
            </a>
        </h1>
        <div class="util-area">
            <button class="btn btn-menu">
                <span class="blind">메뉴</span>
                <svg width='20' height='17' viewBox='0 0 20 17' xmlns='... 생략'>
                	<path ... 생략 fill='#fff'/>
              	</svg>
            </button>
            <button class="btn btn-search">
                <span class="blind">검색</span>
                <svg width='20' height='21' viewBox='0 0 20 21' xmlns='... 생략'>
                	<path ... 생략 fill='#fff'/>
              	</svg>
            </button>
        </div>
        <div class="util-area">
            <a href="" class="btn btn-cart">
                <span class="blind">장바구니</span>
                <span class="count">0</span>
                <svg width='20' height='21' viewBox='0 0 20 21' xmlns='... 생략'>
                	<path ... 생략 fill='#fff'/>
              	</svg>
            </a>
            <a href="" class="btn btn-mypage">
                <span class="blind">마이페이지</span>
                <svg width='20' height='21' viewBox='0 0 20 21' xmlns='... 생략'>
               		<path ... 생략 fill='#fff'/>
              </svg>
            </a>
        </div>
    </div>
</header>

📌css

/* 헤더가 고정됐을 때 */
.header.fixed{ 
    position: fixed; 
    top: 0; 
}
.header.fixed .group-flex svg path{ /* 동일하게 꾸미기 위해서 똑같은 클래스를 줌 */
	/* header 클래스가 fixed일 때, path의 fill 속성값을 #000로 지정, 즉 svg는 검정색 */
    fill: #000; 
}

🔷이미지 width

• 주요 이미지의 width를 100%로 줘서 화면 크기를 계속 키우더라도 width가 화면에 꽉 차도록 바꿨음.

🔷.gnb .group-nav .nav-list .nav-item 사이의 여백 주는 법

• 안다르 사이트가 사용한 display: inline-block은 요소 사이에 의도하지 않은 간격이 생김.
• 따라서 나는 .gnb .group-nav .nav-list에 display: flex를 줘서 요소 사이의 간격을 없애고 gap으로 여백을 주어서, 정확한 수치로 코딩을 했음

🔷창 높이 조절에 따른 주요제품소개 슬라이드 밑 여백 높이 주는 법

• 안다르 사이트는 창 높이를 조절한 후 새로고침 할 때마다 슬라이드 밑 여백 높이가 일정함.
• 나는 창 높이를 조절하면 항상 같은 여백이 남도록 바꿨음.
  슬라이드에 고정높이는 주면 안 됨. calc 써야하고 최소 높이도 줌

  .sc-intro .intro-slide{ 
    width: 100%;
    height: calc(100vh - 140px); 
    min-height: 430px;
  }

* 웹 표준 검사 통과

The W3C Markup Validation Service의 Nu Html Checker를 통해 index.html의 마크업이 웹 표준에 적합함을 확인했습니다.