<section id="visual">
<div class="swiper mainVisual">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/visual1.png" alt="">
<div class="visual-txt">
<h2>Happy<br>
Place for<br>
Everyone</h2>
<p>모두에게 행복한 장소가 되는 곳</p>
</div>
</div>
<div class="swiper-slide">
<img src="images/visual2.png" alt="">
<div class="visual-txt">
<h2>Healty</h2>
<p>건강한 맛과 행복한 서비스</p>
</div>
</div>
<div class="swiper-slide">
<img src="images/visual3.png" alt="">
<div class="visual-txt">
<h2>Lead<br>
K-Food<br>
Culture</h2>
<p>전세계를 감동시킬 우리의 맛과 멋</p>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</section>var swiper1 = new Swiper(".mainVisual", {
loop: true,
autoplay: {
delay: 3000
},
pagination: {
el: ".swiper-pagination",
},
});
visual 부분은 바닐라스크립트가 아닌 swiper 플러그인을 사용해 구현했다.
<div class="about-img">
</div>.main .about-img {
height: 160px;
background-position: 0 0;
background-size: cover;
background-image: url(../images/about_bg1.png);
background-attachment: fixed;
}
토마토 이미지는 background-image로 넣었고 fixed 해서 스크롤이 움직일 때 에도 고정되게 했다.
<div class="brand-article">
<div class="swiper brand-list">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/img1.png" alt="">
<div class="brand-txt">
<strong>뚜레쥬르
TOUS les JOURS</strong>
<p>뚜레쥬르는 프랑스어로 ‘매일매일’이라는 이름의 의미처럼<br>
날마다 건강한 재료로 매장에서 직접 구운 빵을 제공하는<br>
프리미엄 베이커리입니다.</p>
</div>
</div>
<div class="swiper-slide">
<img src="images/img2.png" alt="">
<div class="brand-txt">
<strong>빕스
VIPS</strong>
<p>빕스는 고급 스테이크하우스에서만 맛볼 수 있던 프리미엄<br>
스테이크와 계절마다 변하는 다채롭고 신선한 샐러드바로<br>
국내 외식 업계를 선도해 온 브랜드입니다.</p>
</div>
</div>
<div class="swiper-slide">
<img src="images/img3.png" alt="">
<div class="brand-txt">
<strong>더플레이스
THE PLACE</strong>
<p>이탈리안의 오랜 전통을 지키면서도 시대의 흐름에 따라<br>
세련됨과 위트를 더해 밀라노의 라이프스타일과<br>
취향을 담아내는 더플레이스입니다.</p>
</div>
</div>
<div class="swiper-slide">
<img src="images/img4.png" alt="">
<div class="brand-txt">
<strong>CJ 푸드월드
CJ FOODWORLD</strong>
<p>CJ푸드월드는 CJ의 다양한 외식 브랜드와<br>
색다른 즐길 거리가 어우러진 국내 최초<br>
복합외식문화공간입니다.</p>
</div>
</div>
<div class="swiper-slide">
<img src="images/img5.png" alt="">
<div class="brand-txt">
<strong>제일제면소
제일제면소</strong>
<p>제일제면소는 장인의 노하우로 만든 면에<br>
맛깔스러운 별미를 더한 국수 한 끼로<br>
몸과 마음을 채워주는 면 전문점입니다.</p>
</div>
</div>
<div class="swiper-slide">
<img src="images/img6.png" alt="">
<div class="brand-txt">
<strong>N서울타워
N SEOUL TOWER</strong>
<p>해발 480m 전망의 N서울타워는<br>
남산의 자연과 전망, 엔터테인먼트, 쇼핑 등 CJ그룹의<br>
역량이 조화롭게 어우러진 복합문화공간입니다.</p>
</div>
</div>
<div class="swiper-slide">
<img src="images/img7.png" alt="">
<div class="brand-txt">
<strong>엔그릴
n-GRILL</strong>
<p>N서울타워에서도 가장 높은 자리에 위치한 엔그릴은<br>
서울의 전경을 360도로 즐길 수 있는<br>
국내 유일의 레스토랑입니다.</p>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
아래 브랜드 소개 부분도 플러그인을 썼다.
해당 부분 css는 내일 수정할 예정이다.