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 안에는 실제 이미지..