🏃‍♂️ Andar

• 프로젝트 이름: Andar
• 사용한 언어: HTML, CSS, JavaScript, jQuery
• 웹사이트 유형 : Mobile (모바일)

스크롤바 숨기기 (크로스 브라우징)

CSS

.group-menu2 .gnb-list{
    display: flex;
    padding: 11px 0 11px 15px;
    background: #fff;
    gap: 10px;
    width: calc(100% - 50px);
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.group-menu2 .gnb-list::-webkit-scrollbar{
    display: none;
}

크로스 브라우징이란?

크로스 브라우징(cross-browser compatibility)은 웹 페이지 또는 웹 애플리케이션이 여러 웹 브라우저 (주로 Google Chrome, Microsoft Edge, Opera, FireFox, Safari)에서 일관된 방식으로 동작하도록 보장하는 것을 의미합니다.

1. 현재 overflow-x가 적용된 클래스 .gnb-list의 ::-webkit-scrollbar {display:none;}을 작성하여 Safari, Chrome과 같이 WebKit엔진을 쓰는 브라우저에서 스크롤바 숨기기

2. -ms-overflow-style: none;을 작성하여 Internet Explorer 및 Microsoft Edge 브라우저 상에서 스크롤바 숨기기

3. scrollbar-width: none;을 작성하여 Firefox 브라우저 상에서 스크롤바 숨기기

-webkit 이란?

WebKit은 오픈 소스 웹 브라우저 엔진으로, 주로 Safari, Google Chrome, Opera와 같은 웹 브라우저에 사용되고 있습니다. WebKit은 HTML, CSS 및 JavaScript를 해석하고 렌더링하여 웹 페이지를 표시하는 역할을 합니다.

Cafe24 대응 모듈 레이아웃

HTML

Style1

<ul class="prd-list style1">
	<li class="prd-item"> 
		<a href="" class="link"></a> 
		<div class="thumb-box"> 
			<em class="number">1</em> 
			<img src="./assets/images/tab-all.jpg" alt="[3 SET] 에어리핏 스탠다드핏 카라 티셔츠" class="img">
			<div class="icons"> 
				<img src="./assets/images/new.png" alt=""> 
			</div> 
		</div> 
		<div class="desc-box"> 
			<button class="review">리뷰 4,639</button> 
			<p class="name">[3 SET] 에어리핏 스탠다드핏 카라 티셔츠</p>
			<div class="price">
				<span class="percent">41%</span> 
				<span class="current">69,000원</span> 
				<del class="before">117,000원</del> 
			</div> 
			<div class="etc">
				<span class="banner">봄 페스티벌 한정 혜택 (~4/14)</span>
			</div> 
		</div> 
	</li>
</ul>

Style2

<ul class="prd-list style2">
	<li class="prd-item"> 
		<a href="" class="link"></a> 
		<div class="thumb-box"> 
			<img src="./assets/images/desc-item1.jpg" alt="[SET] 맨즈 슬랙스 & 폴로 티셔츠 (에어솔리드 & 에어리핏)" class="img">
			<div class="icons"> 
				<img src="./assets/images/new.png" alt=""> 
			</div> 
		</div> 
		<div class="desc-box"> 
			<button class="review">리뷰 221</button> 
			<p class="name">[SET] 맨즈 슬랙스 & 폴로 티셔츠 (에어솔리드 & 에어리핏)</p>
			<div class="price">
				<span class="percent">24%</span> 
				<span class="current">99,000원</span> 
				<del class="before">131,000원</del> 
			</div>
			<div class="etc">
				<span class="banner">M-3XL</span>
				<span class="banner">회원 할인가 94,000원(4/9~4/13)</span>
			</div>              
		</div>     
	</li>
</ul>

Cafe24에서 모듈이란?

모듈(Module)이란 ‘1개 또는 그 이상의 콘텐츠와 기능의 묶음’ 입니다. 즉, 모듈은 프로그램의 최소 단위이며, 각 모듈은 HTML 그리고 변수에 의한 조합으로 구동됩니다. 모듈은 하나의 독립된 완전한 프로그램으로 사용자가 입력한 module=“모듈아이디“ 이란 코드에 의해서 판단되며 구동됩니다.

1. Cafe24의 모듈 레이아웃 시스템을 참고하여 각 리스트 스타일(ul)들에 공통 클래스 .prd-list를 주고 자식들도 동일한 클래스 명을 주기

2. 먼저 style1을 기준으로 CSS로 레이아웃 잡기

3. style1과 style2의 레이아웃이 다르기 때문에 공통 클래스 .prd-list 에 각각의 스타일 명을 클래스로 추가(style1, style2, ...)

4. .prd-list.style2를 부모로 CSS를 사용하여 style2에 맞게 레이아웃 수정하기

.prd-list.style2 .prd-item{
    padding: 20px 0;
    display: flex;
}
.prd-list.style2 .prd-item+.prd-item{
    border-top: 1px solid #eee;
}
...

위와 같은 방법으로 비슷한 레이아웃을 손쉽게 수정할수 있고, 불필요한 코드를 줄일수 있다.

웹 폰트의 종류와 @font-face 사용법

웹 폰트의 종류

웹 폰트의 종류에는 여러 형식이 있으며, 각 형식은 특정 용도와 웹 환경에서의 최적화를 고려하여 디자인되었습니다. WOFF(웹 오픈 글꼴 형식)와 WOFF2(웹 오픈 글꼴 형식 2)는 웹 페이지에 최적화된 형식이며, TTF(트루타입 폰트)와 OTF(오픈타입 폰트) 등도 사용됩니다.

1. WOFF

WOFF는 웹 폰트의 표준 형식 중 하나로 웹 페이지에서 사용하기에 최적화된 웹 폰트 형식입니다.

2. WOFF2

WOFF2는 웹 WOFF2는 WOFF의 개선 버전으로, WOFF를 최대 20% 압축한 폰트입니다. 최신 웹 폰트 표준 중 하나로, 더 빠르게 로드되는 장점이 있습니다.

3. TTF

Microsoft와 Apple이 함께 개발한 글꼴 형식으로, 모든 글자에 대한 모양과 크기 정보를 포함합니다. 웹에서는 주로 사용되지 않고, 주로 웹 폰트 형식으로 변환하여 사용합니다.

4. OTF

Adobe와 Microsoft가 공동으로 개발한 글꼴 형식으로, TTF와 유사하지만 더 많은 고급 기능을 제공합니다. TTF와 마찬가지로 웹에서는 주로 사용되지 않고, 주로 웹 폰트 형식으로 변환하여 사용합니다.

@font-face 사용법

CSS

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Regular.woff2') format('woff2');
    font-weight: normal;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Medium.woff2') format('woff2');
    font-weight: 500
    ;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-SemiBold.woff2') format('woff2');
    font-weight: 600;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Bold.woff2') format('woff2');
    font-weight: 700;
    ;
}

1. font-family를 사용하여 폰트의 이름을 지정 (동일한 폰트로 다양한 굵기를 표현할때 폰트의 이름을 같게 한다.)

2. 상대 경로(../)를 사용하여 폰트 파일의 경로를 지정하고 각 폰트의 format('...') 명시하기

3. font-weight로 각 폰트의 굵기 설정 (보통 400기준 = regular)

슬라이드 메뉴 만들기

HTML

<nav class="gnb">
	<div class="menu-top">
    	<ul class="gnb-list">
        	<li class="gnb-item">
            	<a href="" class="focus"><span class="orange">24시간 타임세일</span></a>
            </li>
          	<li class="gnb-item">
            	...
            </li>
		</ul>
        <button class="btn-all"><span class="blind">전체메뉴</span></button>
        <h2>전체메뉴</h2>
  </div>
  <div class="menu-all">
	<ul class="all-list">
		<li class="all-item">
			<a href="" class="focus">
				<span class="orange">24시간 타임세일</span>
            </a>
          	</li>
      	<li class="all-item">
        	...
      	</li>
    </ul>
  </div>
</nav>

CSS

.group-menu2 .menu-top .btn-all{
    position: absolute;
    top: 10px;right: 10px;
    content: '';
    background-image: url(../images/arrow-open.png);
    background-repeat: no-repeat;
    display: block;
    width: 28px;
    height: 28px;
    background-size: 12px;
    background-position: center;
    transform: rotate(0);
    z-index: 1;
}
.group-menu2 .menu-top h2{
    position: absolute;
    top: 0;
    left: 0;
    font-size: 16px;
    line-height: 23px;
    color: #000;
    width: 100%;
    padding: 11px 16px;
    display: none;
}
.group-menu2 .menu-top.on h2{
    display: block;
}
.group-menu2 .menu-top.on .btn-all{
    transform: rotate(180deg);
}
.group-menu2 .menu-top.on .gnb-list{
    visibility: hidden;
}
.group-menu2 .menu-all{
    background: #fff;
    display: none;
}

jQuery

$('.group-menu2 .btn-all').click(function(){
    $('.header .menu-top').toggleClass('on');
    $('.menu-all').slideToggle();
})

1. 클래스 .btn-all 에 클릭 이벤트 생성 (화살표 버튼)

2. .menu-top에 클래스 on이 추가되었을때 자식 .gnb-list가 보이지 않게 만들기 (visibility: hidden;)

3. 클래스 on이 추가되었을때 h2 즉 두번째 메뉴 .menu-all의 제목이 display: block; 나오게 만들기

4. 클래스 on이 추가되었을때 화살표 버튼(.btn-all)을 180도 회전 시키기

5. .menu-top에 toggleClass('on')을 넣어 클릭할때마다 클래스 on을 토글 시키기

6. 마찬가지로 두번째 메뉴 .menu-all 에 함수 slideToggle();를 넣어 클릭할 때마다 슬라이드를 토글시키기 (slideToggle은 display: none; 상태에서도 작동함)