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

css를 이용하여 슬라이딩 되는 탭메뉴 입니다. 탭메뉴를 클릭하면 활성화된 탭 효과가 슬라이딩으로 이동됩니다. css 만으로 구현된 탭메뉴 해당 사이트에서 자세한 소스 확인이 가능합니다.

마우스 오버시 카드가 뒤집히면서 다른 정보를 보여줄 수 있습니다. css 만으로 구현이 가능합니다.

css만으로 간단하게 마우스 오버시 밑줄 효과를 낼 수 있습니다. 위 이미지와 같이 마우스오버를 했을때 서서히 글씨 색깔이 변하고 밑줄이 그어지는 효과를 낼 수 있는 css 입니다. 첨부된 index.html 파일을 통해 자세하게 해당 효과를 낼 수 있는 소스를 확인하실 수 있습니다. ^^

다양한 형태의 마우스 오버 효과를 확인할 수 있습니다. 기본적인 형태부터 응용한 형태까지 있어 소스를 참고하기에 좋습니다

css를 이용한 툴팁소스 입니다. css만으로 작동합니다. 버튼을 클릭하면 에니메이션 효과와 함께 위와 같은 메뉴버튼 툴팁이 출력됩니다.

css grid를 이용하여 손쉽게 웹사이트 grid latout 을 잡을 수 있습니다. 샘플 소스에 있는 grid-template-columns: 100px 500px; grid-template-rows: 200px 100px 400px; 와 같이 grid-template-columns, grid-template-rows 프로퍼티를 이용하여 행과 열을 정의할 수 있습니다. 행과 열은 픽셀 단위로 고정 그리드도 만들수 있고, fr 단위 혹은 %단위로 가변 크기를 줘서 유연한 그리드도 만들 수 있습니다.

css만으로 간단하게 글자 타이핑 효과를 낼 수 있는 소스입니다. 다소 조금 부자연스러운 느낌이 나기도 하지만 간단하게 글자 타이핑 효과를 내기에는 유용할 듯 합니다. 첨부된 index.html 파일을 통해 자세하게 해당 효과를 확인하실 수 있습니다. ^^

우측 사이트 메뉴가 오픈되면 컨텐츠가 좌측으로 밀리는 인터페이스 입니다. 첨부파일을 다운로드 받거나 해당 사이트로 이동하시면 소스및 데모를 확인 할 수 있습니다.

css만을 이용한 사이드 메뉴 인터페이스입니다. 사이드 메뉴에 마우스 오버시 풀네임으로 메뉴가 출력됩니다. 사이트 메뉴내에서 마우스 스크롤이 됩니다. 첨부파일을 다운로드 받거나 해당 사이트로 이동해서 전체 소스를 확인 할 수 있습니다

css 만으로 제작된 소스입니다. 해당 사이트에서 소스확인 및 작동 인터페이스를 확인 가능합니다.