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

초보자를 위한 홈페이지 제작 가이드 아주 좋아요~ 들어가보시면 더 많은 자료가 있으니 참고하시기 바랍니다.

다양하고 유용한 웹프로그래밍 강좌 자료실 유용하게 사용하시기 바랍니다^^

이미지에 아무스 오버했을때 사용할수 있는 css 만으로 디자인된 오버레이 효과 다양한 예제화 함께 사이트에서 효과를 바로 확인할수 있습니다. try it yourself 버튼을 클릭해서 해당 예제의 소스코드를 확인 할 수 있습니다.

가로메뉴가 짝수일때는 상관없지만, 홀수일때 가로 100% 맞아떨어지지가 않는다. ex) 메뉴1 메뉴2 메뉴3 해결방법 css li{width:33%} li:last-child {width:34%} 33%로는 떨어지지 않아서 마지막 li에는 34%로 주면 가능합니다. 반대로 li:first-child 로 해줘도 됩니다. 가상선택자는 여러가지가 있으니 링크타고 참고해주세요. http://www.w3.org/wiki/CSS/Selectors#Structural_pseudo-classes 출처: http://blog.webmini.net/797 [웹미니 블로그]

웹페이지 내에서 에디터에 있는 코드정리기 처럼. 코드정리와 코드비교를 할수 있는 사이트입니다. 사이트에 접속을하게 되면 상단에 여러가지 옵션을 확인할 수 있습니다. Beaufity옵션이 기본적으로 선택이되며 찾아보기 버튼을 통하여 파일을 불러와 코드를 정리할 수 있씁니다. 찾아보기를 통하여 파일을 불러오면 좌측에는 원본코드 우측에는 정리된 코드를 확인하실 수 있으며 누락된 코드나 잘못된 코드 그리고 경고 메세지를 좌측읠 X버튼에 마우스를 올리면 도움말을 확인 하실 수 있습니다. `코드 정리말고도 파일비교등 다양한 옵션을 제공하고 있으며 마우스 스크롤을 하면 여러가지 설정을 확인하실 수 있습니다.

bootstrap Scrollspy 플러그인을 이용하여 마우스 스크롤링시 페이지의 특정 섹션을 타겟팅 할 수 있습니다. 원 페이지 형태의 사이트 제작시에 유용한 소스이며, 메뷰바의 ID값과 섹션의 링크 ID값이 일치하면 되고, 메뷰바의 활성상태 변경 속도도 제어가 가능합니다. 여러모로 활용이 가능한 bootstrap 소스입니다.

html, css 로만 디자인된 체크박스, 라디오버튼, 셀렉트박스입니다. 해당 사이트에서 소스 확인 및 직접 변경하여 적용된 화면도 바로 확인이 가능합니다.

사이트이동후 원하는 메뉴를 선택합니다. 선택한 메뉴페이지 입니다. 하단의 다운로드 소스를 클릭하신 후 압축파일을 다운받습니다. 다운받은 압축파일을 풀면 해당 메뉴의 html/css/js파일을 확인 하실 수 있습니다. 다운받은 메뉴를 확인하실 수 있습니다.

이미지 조각 효과로 메뉴 클릭시 움직이게 됩니다. [데모보기] https://tympanus.net/Development/AnimatedImagePieces/

FLEXBOX 와 같은 최신 CSS 속성을 사용한 간단한 툴팁 애니메이션 기능입니다. [데모보기] https://tympanus.net/Development/TooltipAnimations/