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

인풋박스 선택시 아래와 같이 변경됩니다.css로 제작되어 있어 쉽게 수정이 가능합니다.첨부된 파일을 다운로드 받으면 html 과  css 전체 소스를 확인할 수 있습니다.

마우스 오버시 아이콘모양과 색상이 변경됩니다.css만으로 간단하게 에니메이션 효과를 구현할 수 있습니다.첨부된 파일을 다운로드 받으면 해당 소스를 직접 확인할 수 있습니다.

특수 문자를 HTML에 쉽게 넣을 수 있는 참조표를 보여주는 사이트입니다.html 파일에 사용하고 싶은 특수 문자를 '문자 실제 참조' 코드 또는 '수치 문자 참조' 코드를 사용하여입력하면 아래 이미지처럼 해당 특수 문자가 나타나게 됩니다.또한 폰트관련된 css 코드를 입력해주시면 크기, 굵기 등 쉽게 수정할 수 있습니다. 아래의 링크로 접속하시면 다양한 문자를 볼 수 있습니다.https://wepplication.github.io/tools/htmlCodes/

이미지가 흐려지게되는 애니메이션 효과로마우스를 이미지에 올리게 되면 원본 이미지가 보이는 디자인 입니다.자세한 내용은 데모사이트 주소에서 확인이 가능합니다.HTML https://source.unsplash.com/random/?city,night,neon" /> https://source.unsplash.com/random/?car,night" /> https://source.unsplash.com/random/?beach,skynight,dark" />          CSSbody { height: 100vh; margin: 0; place-items: center; background-color: aliceblue;} .grid-container {..

HTML, CSS로 제작되었으며 슬라이드에 시각적 효과가 들어가 있습니다.데모사이트 주소에서 확인이 가능합니다.   HTML    New York    Madrid

css만으로 디자인 되어 있습니다. 에니메이션 효과입니다. 진행률의 단계를 지정합니다. 그래프의 표현단계입니다.

CSS로 간단하게 버튼클릭시 알림 화면을 표시합니다. 심플한 디자인 작업할 때 유용할 거 같습니다. HTML CSS 상세내용은 데모사이트 주소에서 확인가능합니다.

CSS와 JS를 이용한 사이드 메뉴 인터페이스입니다. 마우스를 올렸을 때 아이콘을 포함한 하이라이트 처리가 됩니다. HTML 구조 CSS 소스 JS 소스 첨부파일을 다운로드 받거나 해당 사이트로 이동해서 전체 소스를 확인하실 수 있습니다.

회전하는 이미지 디자인 입니다. 코드 및 데모는 데모링크를 통해서 확인하실 수 있습니다.

HTML Home About Info Contact Show me more CSS body { margin: 0; padding: 0; background: #232323; color: #cdcdcd; font-family: "Avenir Next", "Avenir", sans-serif; } #menuToggle { display: block; position: relative; top: 50px; left: 50px; z-index: 1; -webkit-user-select: none; user-select: none; } #menuToggle a { text-decoration: none; color: #232323; transition: color 0.3s ease; } #menuToggle a:..