Skip to content

Latest commit

Β 

History

History
64 lines (47 loc) Β· 3.63 KB

File metadata and controls

64 lines (47 loc) Β· 3.63 KB

πŸ•―οΈ ν”„λ‘œμ νŠΈ: λ”₯티크(Diptyque) λΈŒλžœλ“œ 클둠 μ½”λ”©

κ³ κΈ‰ ν–₯수 λΈŒλžœλ“œ 'λ”₯티크'의 μ›Ήμ‚¬μ΄νŠΈλ₯Ό λͺ¨ν‹°λΈŒλ‘œ ν•œ ν”„λ‘ νŠΈμ—”λ“œ 클둠 μ½”λ”© ν”„λ‘œμ νŠΈμž…λ‹ˆλ‹€. λΈŒλžœλ“œ 특유의 μ‹ λΉ„λ‘­κ³  κ³ κΈ‰μŠ€λŸ¬μš΄ 감성을 μ „λ‹¬ν•˜κΈ° μœ„ν•΄ 고해상도 이미지 ν™œμš©κ³Ό λΆ€λ“œλŸ¬μš΄ 측별(Floor) μ „ν™˜ μΈν„°λž™μ…˜ κ΅¬ν˜„μ— μ§‘μ€‘ν–ˆμŠ΅λ‹ˆλ‹€.

πŸ”— ν”„λ‘œμ νŠΈ 링크


πŸ›  κΈ°μˆ μŠ€νƒ

  • Language: HTML5, CSS3, JavaScript (Vanilla JS)
  • Animation:
    • GSAP (Smooth Scrolling & Transitions)
    • CSS3 Transitions & Keyframes
  • Tools: VS Code, Git

πŸš€ μ£Όμš”νŠΉμ§•

1. μŠ€ν† λ¦¬ν…”λ§ν˜• λ‘œλ”© μ‹œν€€μŠ€

  • νŽ˜μ΄μ§€ μ§„μž… μ‹œ λΈŒλžœλ“œ 아이덴티티λ₯Ό 담은 λ‘œλ”© μ• λ‹ˆλ©”μ΄μ…˜μ„ κ΅¬ν˜„ν•˜μ—¬ λ¦¬μ†ŒμŠ€ λ‘œλ”© λŒ€κΈ° μ‹œκ°„μ„ μ‚¬μš©μž κ²½ν—˜μœΌλ‘œ μŠΉν™”μ‹œμΌ°μŠ΅λ‹ˆλ‹€.
  • 이미지 ν”„λ¦¬λ‘œλ”©: 고해상도 λ¦¬μ†ŒμŠ€κ°€ λ§Žμ€ νŠΉμ„±μ„ κ³ λ €ν•˜μ—¬, 메인 비주얼이 μ€€λΉ„λœ ν›„ 화면이 열리도둝 μ œμ–΄ν–ˆμŠ΅λ‹ˆλ‹€.

2. 측별(Floor-based) λ ˆμ΄μ•„μ›ƒ μ „ν™˜

  • 1μΈ΅λΆ€ν„° 3μΈ΅κΉŒμ§€ κ΅¬μ„±λœ λ…νŠΉν•œ 수직 ꡬ쑰λ₯Ό κ΅¬ν˜„ν–ˆμŠ΅λ‹ˆλ‹€.
  • Z-index & Opacity μ œμ–΄: μ‚¬μš©μžμ˜ λ‚΄λΉ„κ²Œμ΄μ…˜ 클릭에 따라 각 측의 λ ˆμ΄μ–΄λ₯Ό λΆ€λ“œλŸ½κ²Œ μ „ν™˜ν•˜λ©° 곡간감을 λΆ€μ—¬ν–ˆμŠ΅λ‹ˆλ‹€.

3. μ œν’ˆ ν˜Έλ²„(Hover) μΈν„°λž™μ…˜

  • ν–₯수 μ œν’ˆ 라인업에 마우슀λ₯Ό 올리면 μ œν’ˆμ˜ 상세 μ΄λ―Έμ§€λ‚˜ ν˜Έλ²„ μ „μš© μ•„νŠΈμ›Œν¬λ‘œ κ΅μ²΄λ˜λŠ” 효과λ₯Ό μ μš©ν–ˆμŠ΅λ‹ˆλ‹€.
  • λ‹¨μˆœν•œ 이미지 ꡐ체가 μ•„λ‹Œ, νŽ˜μ΄λ“œ 효과λ₯Ό μ£Όμ–΄ λΈŒλžœλ“œμ˜ λΆ€λ“œλŸ¬μš΄ 이미지λ₯Ό μœ μ§€ν–ˆμŠ΅λ‹ˆλ‹€.

4. μ‹œκ°μ  λͺ°μž…감을 μœ„ν•œ λ°°κ²½ 효과

  • sky.jpg λ“± λ°°κ²½ μš”μ†Œμ— λ―Έμ„Έν•œ μ›€μ§μž„μ„ μ£Όμ–΄ 정적인 νŽ˜μ΄μ§€μ— 생동감을 λΆˆμ–΄λ„£μ—ˆμŠ΅λ‹ˆλ‹€.

πŸ” 문제 ν•΄κ²° 및 ν•™μŠ΅

1. 고해상도 μ΄λ―Έμ§€λ‘œ μΈν•œ λ Œλ”λ§ μ§€μ—° ν•΄κ²°

  • 문제: λ°°κ²½ 및 μ œν’ˆ 이미지가 κ³ ν™”μ§ˆμ΄λΌ νŽ˜μ΄μ§€ λ‘œλ“œ 직후 λ ˆμ΄μ•„μ›ƒμ΄ κΉ¨μ§€κ±°λ‚˜ 이미지가 λ’€λŠ¦κ²Œ λœ¨λŠ” ν˜„μƒ λ°œμƒ.
  • ν•΄κ²°: window.onload와 λ‘œλ”© μŠ€ν¬λ¦°μ„ μ—°λ™ν•˜μ—¬ λͺ¨λ“  λ¦¬μ†ŒμŠ€κ°€ λ‘œλ“œλœ μ‹œμ μ— 인트둜 μ• λ‹ˆλ©”μ΄μ…˜μ΄ μ‹œμž‘λ˜λ„λ‘ λ‘œμ§μ„ μ„€κ³„ν–ˆμŠ΅λ‹ˆλ‹€.

2. μ ˆλŒ€ μœ„μΉ˜(Absolute) μš”μ†Œλ“€μ˜ λ°˜μ‘ν˜• λŒ€μ‘

  • 문제: 이미지 기반의 κ³ μ • 배치(position: absolute)κ°€ λ§Žμ•„ ν™”λ©΄ 해상도가 λ°”λ€” λ•Œ μš”μ†Œλ“€μ΄ κ²ΉμΉ˜λŠ” 문제 λ°œμƒ.
  • ν•΄κ²°: px λ‹¨μœ„ λŒ€μ‹  vw, vh λ“± 뷰포트 μƒλŒ€ λ‹¨μœ„λ₯Ό λ„μž…ν•˜κ³ , μ£Όμš” μ€‘λ‹¨μ λ§ˆλ‹€ λ―Έλ””μ–΄ 쿼리λ₯Ό μ„ΈλΆ„ν™”ν•˜μ—¬ λ ˆμ΄μ•„μ›ƒ λ¬΄λ„ˆμ§μ„ λ°©μ§€ν–ˆμŠ΅λ‹ˆλ‹€.

3. λ³΅μž‘ν•œ 측별 μ „ν™˜ 둜직 μ΅œμ ν™”

  • ν•™μŠ΅: μ—¬λŸ¬ 개의 .floor 클래슀λ₯Ό κ΄€λ¦¬ν•˜λ©° μžλ°”μŠ€ν¬λ¦½νŠΈλ‘œ 클래슀λ₯Ό ν† κΈ€ν•  λ•Œ, μŠ€νƒ€μΌ μ‹œνŠΈμ™€ μ• λ‹ˆλ©”μ΄μ…˜ 라이브러리 κ°„μ˜ 간섭을 μ΅œμ†Œν™”ν•˜λŠ” μƒνƒœ 관리 방식을 μ΅ν˜”μŠ΅λ‹ˆλ‹€.

πŸ“‚ ν”„λ‘œμ νŠΈ ꡬ쑰

β”œβ”€β”€ 1floor/         # 1μΈ΅ κ΄€λ ¨ 이미지 및 λ¦¬μ†ŒμŠ€
β”œβ”€β”€ 2floor/         # 2μΈ΅ μ œν’ˆ 및 ν˜Έλ²„ 이미지
β”œβ”€β”€ 3floor/         # 3μΈ΅ 상세 정보 λ¦¬μ†ŒμŠ€
β”œβ”€β”€ Loding/         # λ‘œλ”© μ‹œν€€μŠ€ μ „μš© μžμ›
β”œβ”€β”€ intro/          # 인트둜 μŠ¬λΌμ΄λ“œ 이미지
β”œβ”€β”€ index.html      # 메인 λ ˆμ΄μ•„μ›ƒ
β”œβ”€β”€ index.js        # μΈν„°λž™μ…˜ 및 μΈ΅ μ œμ–΄ 둜직
β”œβ”€β”€ index.css       # 메인 μŠ€νƒ€μΌ 및 μ• λ‹ˆλ©”μ΄μ…˜
└── reset.css       # λΈŒλΌμš°μ € μŠ€νƒ€μΌ μ΄ˆκΈ°ν™”