웹솔루션개발 25년 노하우! 해피CGI의 모든것

정보섹션을 카드 형태로 보여주고, 좌우로 넘기며 탐색할 수 있는 인터랙티브한 캐러셀 UI 예제입니다.Flexbox와 CSS Transform을 활용해 가로로 스크롤 가능한 카드 캐러셀을 구현하며, 각 카드는 이미지와 정보를 담고 있습니다. 사용자는 마우스 드래그나 스크롤로 부드럽게 카드를 넘길 수 있고, CSS Transition과 3D Transform 효과로 카드에 입체적인 움직임과 깊이감을 더해 시각적으로 매력적인 인터랙션을 제공합니다. 카드 각각은 이미지, 제목, 설명 텍스트로 구성되어 정보 전달과 디자인 모두를 만족시키며, 순수 CSS와 약간의 JavaScript로 제작되어 웹에서 가볍고 매끄럽게 작동합니다. 이 예제는 포트폴리오나 정보성 웹사이트에 활용하기 좋으며, Flexbox의 레이아웃 능..

Flexbox의 다양한 속성을 시각적으로 이해할 수 있게 구성된 가이드로, 실습하며 배울 수 있는 자료입니다.이 자료는 Flexbox의 기본 개념인 display 설정부터 방향을 결정하는 flex-direction, 여러 줄 배치를 위한 flex-wrap, 주 축 정렬을 위한 justify-content, 교차 축 정렬을 위한 align-items와 align-content 같은 핵심 속성들을 직관적으로 보여줍니다. 또한, 아이템 순서를 바꾸는 order, 공간 비율을 조절하는 flex-grow와 flex-shrink, 아이템 기본 크기를 설정하는 flex-basis와 이를 한 번에 쓰는 flex 단축 속성도 다루며, 개별 아이템 정렬을 위한 align-self까지 설명합니다. 각 속성이 실제로 어떻게 ..

속성을 입력하면 타워의 위치가 옮겨지고 웨이브 시작을 누르면 디펜스를 하는 플렉스 박스 디펜스 게임이며, 해당 라운드를 클리어하면 자기가 쓴 속성에 풀이가 나옵니다. 클리어를 하면 할수록 게임 난이도가 어려워지기 때문에 정확하게 이해하면서 공부할 수 있는 사이트입니다!!

우측하단 좌우 화살표 버튼을 클릭하시면 좌측 문구와 우측 이미지가 에니메이션 슬라이드 효과와 함께 변경됩니다. 끝까지 이동시 다시 처음부터 반복합니다. 웹사이트 메인페이지에서 유용하게 사용이 가능해 보입니다. 자바스크립트 소스입니다. 이미지 에니메이션 효과 뿐만 아이라 좌측 문구 영역도 별개의 에니메이션 소스로 작동됩니다. css 를 수정하시면 쉽게 변경이 가능합니다. 첨부파일을 다운로드하시거나 해당 사이트에서 소스를 확인할 수 있습니다.