Vue.js를 이용해 인물 카드를 만들고, 클릭 시 상세 정보 창이 나타나도록 구현하는 방법 기록1. 인물 카드 컴포넌트 (Manager.vue) 1-1 HTML 구조 설정 {{ $t("[5].manager.leadership") }} {{ $t(item.name) }} {{ $t(item.content) }} {{ $t("[5].manager.readmore") }} 위의 템플릿에서는 v-for 디렉티브를 사용해 cardData 배열을 순회하며 각 인물 카드를 생성합니다. 각 카드에는 ..

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

화면 크기에 따라 슬라이드 세 개를 나열된 형태에서 탭 창으로 전환하는 반응형 UI를 구현하는 과정 기록1. HTML 구조 설정 NEW PRODUCT EVENT HAITAI MALL ..

slick 라이브러리를 사용하여 다중 슬라이드를 만드는 방법과 슬라이드를 float로 정렬하는 방법 기록1. Slick 라이브러리 사용하여 다중 슬라이드 만들기먼저. Slick을 사용하여 세 개의 슬라이드를 구현합니다. HTML구조 NEW PRODUCT EVENT HAITAI MALL ..

오늘은 반응형 네비게이션 메뉴를 만드는 프로젝트를 진행했다.먼저 HTML로 기본 구조를 잡았다. 그런 다음 CSS로 스타일링을 해서 다양한 화면 크기에서도 잘 보이도록 했다. 마지막으로 JavaScript를 사용해 메뉴가 부드럽게 열리고 닫히도록 애니메이션 효과를 추가했다. 1. HTML 기본 구조 설정 메뉴열기 ..