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

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..

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를 따로 작성해야하는 번거로움이 있습니다. 다음소스는 반응형 슬라이드 소스입니다.