일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
- #cgimall
- #홈페이지제작
- #jQuery
- #솔루션
- 게시판
- php
- happycgi
- #웹솔루션
- CSS
- 홈페이지제작
- #image
- 해피씨지아이
- #홈페이지
- 사이트제작
- #CSS
- #뉴스
- 홈페이지
- #happycgi
- #동영상
- #업종별
- #쇼핑몰
- jquery
- javascript
- #해피CGI
- 웹솔루션
- #이미지
- CGIMALL
- 솔루션
- 해피CGI
- 쇼핑몰
- Today
- Total
목록웹프로그램밍 자료실/HTML 자료 (268)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
엔티티 코드란 html에서 특수 문자 입력을 위해 사용하는 문자 코드입니다. 자주 사용하는 특수 문자부터 수학 기호까지 다양한 특수문자를 정리해 놓은 사이트입니다. Featured, Common, Currency 등의 카테고리로 정리되어있어 유용한 사이트입니다.
마우스를 스크롤하면 카드가 쌓이는 애니메이션 효과입니다. HTML 소스 Card Title Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab dicta error nam eaque. Eum fuga laborum quos expedita iste saepe similique, unde possimus quia at magnam sed cupiditate? Reprehenderit, harum! Card Title Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab dicta error nam eaque. Eum fuga laborum quos expedita iste saepe similiqu..
이미지 슬라이드를 HTML 과 CSS만으로 제작하는 방법입니다. HTML 소스 CSS-only Carousel This carousel is created with HTML and CSS only. Go to last slide Go to next slide Go to previous slide Go to next slide Go to previous slide Go to next slide Go to previous slide Go to first slide Go to slide 1 Go to slide 2 Go to slide 3 Go to slide 4 CSS 소스 @keyframes tonext { 75% { left: 0; } 95% { left: 100%; } 98% { left: 100%; ..
다양한 사이트에서 후원사 로고, 협력사 로고 등등 다양한 로고들을 나열할 때 쓰기 좋은 로고 애니메이션 효과입니다. 상단 버튼을 클릭하면 로고의 이동이 상하로 변경되어 필요에 맞게 쓸 수 있습니다. 심심한 사이트에 동적인 효과를 줌으로써 역동적으로 만들어 주는 효과가 있습니다. 해당 애니메이션은 반응형입니다. HTML 구조 Toggle scroll axis 자세한 소스는 사이트에서 확인 바랍니다 CSS 소스 :root { --color-text: navy; --color-bg: papayawhip; --color-bg-accent: #ecdcc0; --size: clamp(10rem, 1rem + 40vmin, 30rem); --gap: calc(var(--size) / 14); --duration: 6..
HTML파일과 CSS로 작동하는 도형디자인 로더 애니메이션 입니다. CSS 편집을 통해서 수정 가능합니다. Html 파일을 수정하여 도형을 추가할 수 있습니다. 해당사이트 또는 첨부파일을 다운로드 받아서 소스를 직접 확인할 수 있습니다.
CSS만 사용하여 이미지가 자동으로 올라가는 효과입니다. HTML 소스 https://images.unsplash.com/photo-1658250845157-403299ba4564?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1113&q=80' alt=''> https://images.unsplash.com/photo-1674909072480-ad551618b63e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=627&q=80' alt=''> https://images.unsplash..
별도의 JS, GIF없이 SVG아이콘으로 애니메이션 Loading Button을 만들 수 있는 소스입니다. Font Awesome과 같은 아이콘 라이브러리를 추가하고 아이콘을 HTML 버튼에 추가합니다. CSS로 버튼 모양을 만들어 줍니다. https://www.w3schools.com/howto/howto_css_loading_buttons.asp 해당 사이트를 참고하시면 로딩 버튼을 생성하는 방법을 자세히 확인할 수 있습니다.
스크립트 없이 CSS 만으로 드롭다운 효과를 줄 수 있는 소스입니다. 위와 같이 소스를 생성했을 경우 요소 위로 마우스를 이동할 때 나타나는 드롭다운 상자가 만들어 집니다. https://www.w3schools.com/css/css_dropdowns.asp 해당 사이트를 참고하시면 드롭다운 메뉴, 오른쪽 정렬된 드롭다운 콘텐츠, 드롭다운 이미지를 자세히 확인할 수 있습니다.
파일을 업로드하면 해당 파일의 파일명이 출력 됩니다. css로 디자인 되어 있습니다. 실제 인풋은 css로 안보이게 처리 되었습니다. 초기문구인 select your file! 을 파일업로드후 파일명으로 변경하는 소스입니다. 해당사이트 또는 첨부파일을 다운로드 받아 소스를 직접 확인할 수 있습니다.
카드형식의 배너로 슬라이드 배너/ 네비게이션 등 활용도가 높을뿐 아니라 트렌디한 디자인으로 사이트 사용시 디자인 및 유용성이 높습니다. HTML 소스 Blonkisoaz Omuke trughte a otufta Oretemauw Omuke trughte a otufta Iteresuselle Omuke trughte a otufta Idiefe Omuke trughte a otufta Inatethi Omuke trughte a otufta Photos from Victor of Valencia on tumblr CSS 소스 $optionDefaultColours: #ED5565,#FC6E51,#FFCE54,#2ECC71,#5D9CEC,#AC92EC; body { display:flex; flex-dir..