일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
- #해피CGI
- #홈페이지제작
- #업종별
- javascript
- #뉴스
- 쇼핑몰
- #동영상
- 홈페이지제작
- #쇼핑몰
- #cgimall
- CGIMALL
- #CSS
- #이미지
- happycgi
- jquery
- #웹솔루션
- 해피CGI
- 홈페이지
- php
- #happycgi
- 사이트제작
- 웹솔루션
- #jQuery
- 솔루션
- 게시판
- 해피씨지아이
- #홈페이지
- #솔루션
- #image
- CSS
- Today
- Total
목록웹프로그램밍 자료실/HTML 자료 (268)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
aspect-ratio는 종대비라고 하며 가로와 세로의 비율입니다. 가로가 100 / 세로 100이면 aspect-ratio는 1:1이되며 css로는 아래와같이 작성합니다. .aaa{ aspect-ratio : 1/1 } 이를 이용하여 img, input[type="image"], video, embed, marquee, object, table 이렇게 다양한 태그가 가능합니다. .aaa{ width:500px; aspect-ratio:16/9; background:#f40000; } 위와같이 작성시 가로 500px크기의 16:9 박스가 만들어지게 됩니다. https://developer.mozilla.org/en-US/docs/web/css/aspect-ratio https://css-tricks.co..
css3으로 구현된 에니메이션 로딩 아이콘 입니다. css를 변경하면 쉽게 커스텀도 가능합니다. 다양한 에니메이션 css 소스를 확인하고 수정이 가능합니다. 해당 사이트 또는 첨부파일을 다운로드해서 소스를 확인해 보실수 있습니다.
bar 회전형 디자인의 html 과 CSS로 이루어진 preloader 페이지 로딩 스타일 6개의 세로 바가 순차적으로 회원하면서 로딩 중임을 알려주는 스타일입니다. 자바스크립트 없이 순수하게 html 과 CSS로 이루어져 있으며, 색상, 높이, 너비 등을 CSS 편집을 통해서 수정 가능하며, 단순하지만 효용성이 좋은 자료입니다. 세로 막대 개수 추가는 물론, 회원 속도도 설정이 가능합니다.
사이트 제작시 많이 사용되는 풀메뉴 소스를 공유합니다. HTML 소스 .plus-btn-pos .plus-btn .r1 .r2 .content div h1 Fullscreen Menu h2 Flexbox Style .menu-container - for i in (1..3) .menu-sliders .menu ul li a Home li a About li a Work li a Contact CSS 소스 @import url(https://fonts.googleapis.com/css?family=Roboto:300,100); .content { display:flex; justify-content: center; align-items: center; position: absolute; height: 10..
흔하게 쓰는 메인슬라이드 반응형사이트에서 작게나오거나 반응형이 작동안하실경우 모바일 이미지를 따로 올리거나 css를 따로 작성해야하는 번거로움이 있습니다. 다음소스는 반응형 슬라이드 소스입니다.
해당 아이콘을 클릭하면 에니메이션 효과와 함께 위와 같이 변경됩니다. 이미지가 아닌 소스형태라서 css로 쉽게 변경이 가능합니다. css hover 효과 클릭시 css js
스크롤시 별다른 스크립트없이 css만으로 최상단으로 이동이되는 효과입니다. scroll-snap-type와 https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type scroll-snap-align을 https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-align 이용하여 스냅을 이용하여 스크롤시 지정한 포인트로 바로 이동할 수 있습니다. 아래의 링크에서 예제를 확인하실 수 있습니다. https://codepen.io/serranoarevalo/pen/xxdYBxZ 네이버 또는 구글에서 Css Scrollsnap으로 검색해보시면 다양한 자료를 확인하실 수 있습니다 ^^
클릭시 아래처럼 선택된 카드가 확장됩니다. css로 쉽게 가로사이즈 변경이 가능합니다. 마우스 드래그 또는 클릭으로 슽라이드 이동이 가능합니다.
CSS로만 이루어진 셀렉트 박스입니다. 자료는 해당 데모사이트에서 하단의 export 버튼을 눌러 다운 받으실 수 있습니다. 사용자 데모도 https://codepen.io/aron-tw/pen/MeMKON 에서 확인하실 수 있습니다^^