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

한개 또는 다중으로 범위를 선택하는 디자인 소스 입니다. html 소스 css 로 쉽게 디자인 변경이 가능합니다. 해당 사이트 또는 첨부파일을 다운로드 받아서 전체 소스를 확인할 수 있습니다. 해당 사이트에서는 디자인 변경을 미리 해볼수 있습니다.

css로만 구현된 다양한 버튼 디자인입니다. 다양한 에니메이션 효과가 있어 버튼을 강조할때 유용하게 사용이 가능합니다. css를 변경하여 쉽게 커스텀이 가능합니다. 해당 사이트 또는 첨부파일을 다운로드 받아서 소스를 확인할 수 있습니다.

[HTML 소스] link(href='https://fonts.googleapis.com/css?family=Roboto+Condensed:700', rel='stylesheet', type='text/css') h1 This text will be sliced [CSS 소스] @import "nib" body background #0099FF h1 display block absolute top 50% left 50% font-family 'Roboto Condensed' font-size 50px color #1A4C80 text-transform uppercase transform translate(-50%, -50%) > span display block position relative float..

[HTML 소스] link(href='https://fonts.googleapis.com/css?family=Roboto+Condensed:700', rel='stylesheet', type='text/css') h1 This text will be sliced [CSS 소스] @import "nib" body background #0099FF h1 display block absolute top 50% left 50% font-family 'Roboto Condensed' font-size 50px color #1A4C80 text-transform uppercase transform translate(-50%, -50%) > span display block position relative float..

head 사이에 css 를 추가하고 사용하면 됩니다. html 은 위처럼 사용하면 되며 class 명만 바꾸면 됩니다. 다양한 디자인이 있습니다. https://jnkkkk.github.io/MoreToggles.css/ 위의 링크에서 더 많은 디자인을 확인해 보세요.

이미지의 특정 영역에 LINK를 거는 Image Map을 쉽게 할 수 있도록 기능을 제공하는 Image Map Generator 입니다. https://www.image-map.net/ 페이지를 통해 기능을 이용 할 수 있습니다. 첫 페이지에서 PC에 있는 이미지를 직접 업로드를 하거나, 웹페이지의 이미지 링크를 입력 할 수 있습니다. 각종 영역을 선택하여 위치를 지정이 가능하고, 각 영역별로 링크주소, 타이틀, 타겟 지정이 가능 합니다. 영역 세팅이 완료가 된 이후 하단의 "Show Me The Code!" 버튼을 클릭하면 아래와 같이 소스 확인을 할 수 있습니다.

원하는 영역의 뒤에 있는 이미지나 컨텐츠를 블러처리 합니다. 예제처럼 사용도 가능하고 상단에 픽스되는 헤더 영역에 응용하는 방법도 가능합니다. clip-path 와 fliter를 사용하여 구현이 가능합니다. clip-path 로 다양한 모양을 만들수 있기에 활용이 편리합니다. 해당 사이트 혹은 첨부파일을 다운로드 받아 소스를 직접 확인할 수 있습니다.

css 만으로 웨이브 에니메이션 효과를 만들수 있습니다. 홈페이지의 랜딩 페이지에서 유용하게 사용이 가능합니다, 반응형이라 모바일 기기에서도 해상도에 맞게 잘 작동합니다. 해당 사이트에서 css 소스 확인이 가능합니다. 첨부파일을 다운로드 받아 소스를 직접 확인할 수 있습니다.

이미지 오버시 움직이는 효과입니다. 갤러리 같은곳에 사용시 좋을것 같습니다. https://codepen.io/t_afif/pen/YzRdWXQ

엔티티 코드란 html에서 특수 문자 입력을 위해 사용하는 문자 코드입니다. 자주 사용하는 특수 문자부터 수학 기호까지 다양한 특수문자를 정리해 놓은 사이트입니다. Featured, Common, Currency 등의 카테고리로 정리되어있어 유용한 사이트입니다.