YUN

πŸ‘ˆ Back to the Project

DAVICH

View Code Demo

κΈ°μ—…ν˜• μ‚¬μ΄νŠΈ λ‹€λΉ„μΉ˜ 개발
메인 화면을 λ™μ˜μƒ 배경으둜 ν•˜μ—¬ μ‚¬μš©μžμ˜ 이λͺ©μ„ μž‘μ„ 수 μžˆλŠ” λ°˜μ‘ν˜• ν™ˆνŽ˜μ΄μ§€μž…λ‹ˆλ‹€.

  • 기여도

    개인 100%

  • κΈ°κ°„

    2022.10

  • 기술 μŠ€νƒ

    HTML CSS Javascript jQuery Figma

Overview

AOS ν”ŒλŸ¬κ·ΈμΈ, Slick 라이브러리λ₯Ό μ‚¬μš©ν•˜μ—¬ 슀크둀 νš¨κ³Όμ™€ μŠ¬λΌμ΄λ”λ₯Ό μ μš©ν•˜μ˜€μŠ΅λ‹ˆλ‹€.
hover 효과둜 λ²„νŠΌ ν΄λ¦­μ‹œ λ™μ μœΌλ‘œ 보이도둝 κ΅¬ν˜„ν•˜μ˜€μŠ΅λ‹ˆλ‹€.
Web, Mobile, Tablet둜 λ‚˜λˆ„μ–΄ λ°˜μ‘ν˜•μ‚¬μ΄νŠΈλ‘œ κ°œλ°œν•˜μ˜€μŠ΅λ‹ˆλ‹€.

Wire Frame

PC

Mobile

μ›Ήμ—μ„œ λ³΄μ—¬μ§€λ˜ μž‘μ€ 이미지듀은 숨기고 큰 이미지λ₯Ό λ‚˜μ—΄ν•˜λŠ” ν˜•μ‹μœΌλ‘œ μ‹¬ν”Œν•˜κ²Œ κ΅¬μ„±ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

ν•˜λ‹¨ μΈμŠ€νƒ€κ·Έλž¨ μ˜μ—­μ€ Slick 라이브러리λ₯Ό μ‚¬μš©ν•˜μ—¬ λͺ¨λ°”μΌμ—μ„œλŠ” 1개둜 보이되 auto play κΈ°λŠ₯을 λ„£μ–΄ μžλ™μœΌλ‘œ λ„˜μ–΄κ°€κ³ , μ‚¬μš©μžκ°€ μŠ¬λΌμ΄λ“œλ₯Ό ν•  수 μžˆλ„λ‘ κ΅¬ν˜„ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

Tablet

AOS ν”ŒλŸ¬κ·ΈμΈμ„ μ‚¬μš©ν•˜μ—¬ μ‚¬μš©μžμ˜ μ‹œμ„ μ— λ§žμΆ”μ–΄ λ™μ μœΌλ‘œ 정보가 λ‚˜νƒ€λ‚˜λ„λ‘ ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

Products λ©”λ‰΄λŠ” μ΄λ―Έμ§€μ˜ 여백을 μ—†μ•  이미지λ₯Ό ν™”λ©΄ 가득 차도둝 λ³€κ²½ν•˜κ³ , hoverλ₯Ό 톡해 μŠ€νƒ€μΌ 효과λ₯Ό μ£Όμ—ˆμŠ΅λ‹ˆλ‹€.

Work

메인

μ„œλΈŒ 메뉴 - ABOUT - λŒ€ν‘œ 인사말