CSS20 Clouds with divs js + css 만으로 구현한 구름효과 입니다. 멋진데요...! See the Pen Clouds with divs by Alex Andrix (@alexandrix) on CodePen. 출처 : https://codepen.io/alexandrix/pen/MQdaKP Clouds with divsSetting up a particle system with draw methods that actually manipulate the DOM nodes directly!...codepen.io - Dblisher - 2025. 3. 22. sparkle of the particles 역동적인 야광 particle 효과 입니다. See the Pen sparkle of the particles by K-T (@K-T) on CodePen. 출처 : https://codepen.io/K-T/pen/pVamdw 2025. 3. 20. Glass Button 투명한 효과의 버튼 디자인 입니다. See the Pen Glass Button by Petr Knoll (@Petr-Knoll) on CodePen. 출처 : https://codepen.io/Petr-Knoll/pen/QwWLZdx 2025. 3. 20. Animated CSS Gradient Text 텍스트 그라디언트 효과 입니다.애니메이션을 가미하여 다채로운 느낌을 추가했네요! See the Pen Animated CSS Gradient Text by Adam Argyle (@argyleink) on CodePen. 출처 : https://codepen.io/argyleink/pen/vEBmZNw - Dblisher - 2025. 3. 19. Moving Text - CSS Animation Marquee Tag 흐르는 텍스트 효과를 보통 Marquee라고 합니다.오직 css만을 활용한 Marquee 효과 입니다. See the Pen Moving Text - CSS Animation Setup w/ Marquee Tag by Chris Drinkut (@ChrisDrinkut) on CodePen. 출처 : https://codepen.io/ChrisDrinkut/pen/GvrqNR - Dblisher - 2025. 3. 18. Countdown (ms) 이벤트 페이지를 만들때 종종 카운트 다운 기능을 필요로 합니다.극적인 효과를 나타내기 위해서 밀리세컨드(millisecond) 단위까지 표기합니다. See the Pen countdown by ditto (@ditto88) on CodePen. 출처 : https://codepen.io/ditto88/pen/yyLvavK 2025. 3. 17. Parallax scroll animation Parallax Scroll Animation: 웹사이트에 깊이와 입체감을 더하는 기술 1. 패럴랙스 스크롤 애니메이션이란?패럴랙스 스크롤 애니메이션(Parallax Scroll Animation)은 웹사이트에서 스크롤 시 배경과 전경 요소가 서로 다른 속도로 움직이면서 입체적인 시각적 효과를 주는 기법입니다.이는 사용자가 웹페이지를 탐색할 때 깊이감을 느끼도록 도와주며, 보다 몰입감 있는 사용자 경험(UX)을 제공합니다. 2. 패럴랙스 스크롤의 원리패럴랙스 효과는 기본적으로 원근법의 개념을 활용합니다.일반적으로 배경은 더 느리게, 전경 요소는 더 빠르게 움직이며 사용자의 시선을 자연스럽게 유도합니다.이를 통해 단순한 스크롤 동작만으로도 동적인 화면 연출이 가능해집니다. 3. 패럴랙스 스크롤 애니메이션의.. 2025. 3. 17. CSS Wave CSS Wave: 부드러운 파도 효과로 디자인에 활력을 더하다 CSS Wave는 웹 디자인에서 부드러운 파도(Wave) 효과를 적용하는 기법을 의미합니다.주로 배경, 버튼, 로딩 애니메이션 등에 사용되며, 웹사이트에 동적인 느낌과 자연스러운 움직임을 추가하는 데 유용합니다. See the Pen Simple CSS Waves | Mobile & Full width by Goodkatz (@goodkatz) on CodePen. 출처 : https://codepen.io/goodkatz/pen/LYPGxQz 2025. 3. 17. Parallax Image Layers 웹사이트에 깊이와 입체감을 더하는 기술 Parallax Scroll Animation 패럴랙스 스크롤 애니메이션은 웹사이트에 깊이감을 추가하고 사용자 경험을 향상시키는 강력한 기법입니다.CSS, JavaScript, GSAP ScrollTrigger 등 다양한 방법으로 구현할 수 있으며, 적절한 활용을 통해 매력적인 웹사이트를 만들 수 있습니다. 하지만 성능 최적화와 접근성까지 고려하여 신중하게 적용하는 것이 중요합니다. See the Pen Parallax Image Layers - Osmo by Osmo (@osmosupply) on CodePen. 출처 : https://codepen.io/osmosupply/pen/NWQevrB 2025. 3. 17. Grid를 사용한 카드 UI 포털 사이트나 블로그 페이지에서 자주 볼 수 있는 Grid 반응형 레이아웃 입니다. See the Pen Solving Problems With CSS Grid and Flexbox: The Card UI i by Envato Tuts+ (@tutsplus) on CodePen. 출처 : https://codepen.io/tutsplus/pen/YGQKry 2025. 3. 17. Part 6 : 링크 및 미디어 태그 사용법 웹페이지에서 링크를 연결하거나 이미지, 동영상, 오디오 등의 미디어를 삽입할 때 , , , , 태그를 사용합니다. 이번 포스팅에서는 이 태그들을 활용하는 방법을 배워보겠습니다. 1️⃣ 태그 (하이퍼링크)웹페이지에서 다른 페이지로 이동할 수 있도록 링크를 생성하는 태그입니다.이곳을 클릭하면 example.com으로 이동합니다. 🔹 href: 이동할 URL을 지정합니다. 📌 새 창에서 열기 (target="_blank" 속성 추가)새 창에서 열기 🔹 target="_blank": 새 탭에서 링크를 엽니다. 2️⃣ 태그 (이미지 삽입)웹페이지에 이미지를 표시할 때 사용됩니다. 🔹 src: 이미지 파일의 경로🔹 alt: 이미지가 표시되지 않을 경우 대체 텍스트 (웹 접근성을 위해 필수!) .. 2025. 3. 15. Part 5 : 폼 태그 사용법 웹페이지에서 사용자 입력을 받을 때는 태그를 사용합니다.이번 포스팅에서는 , , , , , 등의 태그를 활용하는 방법을 배워보겠습니다. 1️⃣ 기본 폼 구조 태그는 입력 데이터를 서버로 전송하는 역할을 합니다. 이름: 제출 🔹 action: 폼 데이터를 전송할 URL🔹 method: GET(URL에 데이터 포함) 또는 POST(보안 강화) 2️⃣ 태그 (사용자 입력 필드)사용자로부터 데이터를 입력받는 다양한 방법을 제공합니다. 동의합니다. 남자 여자🔹 type="text" 일반 텍스트 입력🔹 type="password" 비밀번호 입력 (숨김 처리)🔹 type="email" 이메일 형식 입력🔹 type="checkbox" 체크박스 선택🔹 type="radio" 라디오 버튼 선.. 2025. 3. 15. 이전 1 2 다음 728x90
