My Private Dev Diary

My Private Dev Diary

  • My Diary (85)
    • Project Diary (84)
      • HTML + CSS +JS (Haitai WepS.. (3)
      • Vue (Roblox WebSite) (14)
      • React + Firebase (Snack Sho.. (24)
      • React + MariaDB (PicShare W.. (17)
      • Next.js + Prisma + MariaDB .. (26)
  • 홈
  • 태그
  • 방명록
RSS 피드
로그인
로그아웃 글쓰기 관리

My Private Dev Diary

컨텐츠 검색

태그

최근글

댓글

공지사항

아카이브

Project Diary/Vue (Roblox WebSite)(14)

  • Sticky 속성을 활용한 스크롤 애니메이션 구현하기

    Sticky 속성을 활용한 스크롤 애니메이션 구현 방법 기록  개인적으로 sticky 속성을 처음 사용해봤는데, 꽤 흥미로웠고 적용하는 과정에서 많은 것을 배웠습니다. 1. HTML 구조 설정 먼저, position: sticky를 적용할 HTML 구조를 설정해보겠습니다. {{ $t(item.title) }} {{ $t(item.content) }}  v-for 디렉티브를 사용하여 infoData 배열의 데이터를 순회하며 각각의 섹션을 생성합니다. 각 섹션에는 텍스트와 이미지를 담고 있으며, 이미지는 sticky 속성을 통해 스크롤 시 고정됩니다. 2. 데이터 설정 다음으로,..

  • 타일 이미지 구현하기

    data구조와 css를 이용한 타일 이미지 구현 방법 기록1. HTML 구조 설정먼저, 타일 이미지를 담을 HTML 구조를 설정합니다.  {{ $t("[4].tileview.h2-1") }} {{ $t("[4].tileview.h2-2") }}  v-for 디렉티브를 사용하여 colContainer 배열의 데이터를 순회하며 타일 이미지를 생성합니다. imgContainer는 열을 나타내며, 각 열 안에 여러 개의 imgBox1이 포함됩니다. imgBox2 안에는 실제 이미지..

이전
1 2 3
다음
티스토리
© 2018 TISTORY. All rights reserved.

티스토리툴바