일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 웹솔루션
- #홈페이지제작
- CSS
- javascript
- 해피씨지아이
- #happycgi
- 게시판
- #웹솔루션
- 홈페이지제작
- #이미지
- #image
- #cgimall
- #동영상
- #홈페이지
- php
- #뉴스
- happycgi
- 사이트제작
- 솔루션
- #해피CGI
- #솔루션
- #쇼핑몰
- 홈페이지
- 쇼핑몰
- jquery
- CGIMALL
- #CSS
- #jQuery
- #업종별
- 해피CGI
- Today
- Total
목록웹프로그램밍 자료실/HTML 자료 (268)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
스크롤을 통하여 글자가 보이는 효과입니다. 코드 및 데모는 데모링크를 통해서 확인하실 수 있습니다. HTML In the enchanted world of frontend development, pixels and code guide your design journey. Entranced by the dance of colors, shapes unfold on the digital canvas. Every line of code is a spell, weaving functionality and aesthetics into an immersive digital tale. In the enchanted world of frontend development, pixels and code guide your ..
각 카드별 마우스 호버 시 색상이 변경이 되며 상품 카드에 시각적 디자인 효과를 주기에 좋을 거 같습니다. 코드 및 데모는 데모링크를 통해서 확인하실 수 있습니다. HTML Pricing Basic $9.99 Access to standard workouts and nutrition plans Email support Get Started Pro $19.99 Access to advanced workouts and nutrition plans Priority Email support Exclusive access to live Q&A sessions Upgrade to Pro Ultimate $29.99 Access to all premium workouts and nutrition plans 24/7 ..
backdrop-filter: blur(20px); backdrop-filter 로 다양한 효과를 해당 요소의 배경에 적용할 수 있습니다. blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia() 같은 효과를 적용할 수 있습니다.
background-clip: text; 뒤에 있을 배경을 텍스트 부분에만 적용합니다. color: transparent; 텍스트의 색상을 투명하게 하여 배경이 보이게 합니다. background: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%); 배경으로 그레이디언트 색상을 넣어줍니다. 배경이미지도 적용할 수 있습니다.
순수 css로 만든 로딩 아이콘 애니메이션 효과입니다. css로 만든 로딩바 애니메이션으로 다양한 효과를 선택해서 쓰면 됩니다.
스크롤시 원하는 문구에 하이라이트가 텍스트 앞에서 뒤로 자동으로 적용됩니다. 원하는 문구에 mark 태그를 삽입합니다. 관련 css 소스입니다. mark 태그에 적용이 됩니다. animation-timeline을 이용하여 시작시점을 정할수 있습니다. 해당 사이트 또는 첨부파일에서 관련소스를 다운로드 받아 소스 확인이 가능합니다.
웹페이지를 제작하다보면 유튜브 영상을 삽입할때가 있습니다. 경우에 따라 썸네일을 보여주고 영상을 링크하는 경우도 있습니다. 이때 해당 유튜브 영상의 썸네일을 가져오는 방법에 대해 안내해 드립니다. 아래 영상의 썸네일을 가져온다고 할때 https://www.youtube.com/watch?v=ARTkK9h5nsI ARTkK9h5nsI 부분이 영상의 고유ID 값입니다. 해당값을 아래 처럼 이미지 주소에 삽입합니다. ARTkK9h5nsI/0.jpg"> 위와 같이 할경우 이미지의 상하에 검은색 여백이 생기고 이미지의 비율도 맞지않습니다. 이미지 경로에 파일명을 변경하여 다른 썸네일을 불러올 수 있습니다. 0.jpg"> 기본 이미지의 상하에 검은색 여백이 생깁니다. mqdefault.jpg"> 검은색 여백이 삭제..
출처 : https://css-tricks.com/fluid-width-video/ CSS만으로 아이프레임 높이를 가로값에 맞춰 자동으로 늘어날 수 있는 코드입니다. 자바스크립트를 사용하지 않고 아이프레임 높이를 조절할 수 있습니다. padding-bottom 부분을 수정하시면 높이를 조절할 수 있습니다. HTML CSS 소스다운로드를 통해 확인해 보실 수 있습니다.
css로 텍스트가 위아래로 이동하는 애니메이션 입니다. HTML Hello world ! bob ! users ! everybody ! CSS body { width: 100%; height: 100%; position: fixed; background-color: #34495e; } .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 160px; overflow: hidden; font-family: "Lato", sans-serif; font-size: 35px; line-height: 40px; color: #ecf0f1; } .content__container { font-weigh..
해당 인풋은 사용자에게 더욱 직관적인 인터페이스를 제공해 줄 수 있습니다. 슬라이드를 이동할 때마다 범위가 나타납니다. 웹페이지를 좀 더 역동적이고 매력적으로 만들 수 있습니다. HTML 구조 Range CSS 소스 * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --white: hsl(0,0%,100%); --lt-gray: hsl(var(--hue),10%,95%); --primary0: hsl(var(--hue),90%,95%); --primary1: hsl(var(--hue),90%,90%); --primary3: hsl(var(--hue),90%,50%); --primary4: hsl(var(-..