javascript14 Image Comparison Slider before & after 비교 이미지를 표현하기 좋은 소스 입니다. See the Pen Image Comparison Slider in 6 lines of JavaScript by Stanko (@stanko) on CodePen. 출처 : https://codepen.io/stanko/pen/myddXKm 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. 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. 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. Part 4 : 테이블 태그 사용법 웹페이지에서 데이터를 표(table) 형태로 정리할 때 태그를 사용합니다.이번 글에서는 , , , , , , 태그를 활용하는 방법을 배워보겠습니다. 1️⃣ 기본 테이블 구조 태그는 행(row)과 열(column)로 구성됩니다. 이름 나이 직업 김철수 30 개발자 이영희 25 디자이너 🔹 는 헤더(굵은 글씨), 는 일반 데이터 셀을 의미합니다. 2️⃣ , , 태그 (표 구조화)테이블을 더 명확하게 구분할 때 사용됩니다. 상품명 가격 재고 노트북 1,500,000원 20개 스마트폰 1,000,000원 5.. 2025. 3. 15. Part 2 : 텍스트 태그 사용법 웹페이지에서 제목, 본문, 강조 표시 등을 올바르게 표현하려면 텍스트 태그를 이해해야 합니다.이번 글에서는 ~, , , , , 등의 태그를 살펴보겠습니다. 1️⃣ ~ 태그 (제목)HTML에서 제목을 표시하는 태그로, 이 가장 크고 이 가장 작습니다.가장 중요한 제목두 번째로 중요한 제목조금 더 작은 제목 🔹 제목은 문서의 계층 구조를 표현하는 데 사용됩니다. 2️⃣ 태그 (문단)본문을 작성할 때 사용되는 태그입니다.이것은 단락을 나타내는 태그입니다. 문장을 그룹화할 때 사용됩니다. 🔹 자동 줄 바꿈이 적용됩니다. 3️⃣ & 태그 (강조)텍스트를 강조할 때 사용됩니다.이 텍스트는 강하게 강조됩니다.이 텍스트는 기울임(이탤릭체)으로 강조됩니다. 🔹 은 SEO에도 영향을 줄 수 있는 중요.. 2025. 3. 15. Part 1 : 레이아웃 태그 사용법 웹페이지의 구조를 만들 때 사용하는 레이아웃 태그는 HTML에서 매우 중요한 요소입니다., , , , , 등의 태그를 활용하여 웹페이지를 구성하는 방법을 배워보겠습니다. 1️⃣ 태그 (헤더)웹사이트 또는 섹션의 머리말(헤더) 역할을 합니다.로고, 내비게이션 메뉴, 검색창 등이 포함될 수 있습니다. 웹사이트 제목 홈 소개 연락처 2️⃣ 태그 (내비게이션)웹사이트의 메뉴 또는 탐색 링크를 포함하는 태그입니다. 홈 서비스 블로그 3️⃣ 태그 (섹션)관련된 콘텐츠를 그룹화하는 데 사용됩니다. 서비스 소개 우리는 최고의 웹 솔루션을 제공합니다. 4️⃣ 태그 (아티클)독립적인 콘텐츠 블록을 나타냅니다. 뉴스 기사, 블로그.. 2025. 3. 15. HTML 태그 설명과 예제 코드 이전 포스팅에서 HTML의 모든 태그와 기본 display 속성을 정리했습니다.이번 글에서는 각 태그의 특징을 보다 자세히 설명하고,실제로 어떻게 활용할 수 있는지 예제 코드를 함께 소개하겠습니다. 1️⃣ 목록 태그 (, , )목록 태그는 웹페이지에서 리스트를 만들 때 사용합니다.✅ 순서 없는 목록 () 순서가 없는 리스트 1 순서가 없는 리스트 2 순서가 없는 리스트 3 🔹 태그는 순서가 없는 리스트를 만들 때 사용합니다.브라우저에서 기본적으로 앞에 ●(점) 기호가 붙습니다. ✅ 순서 있는 목록 () 순서가 있는 리스트 1 순서가 있는 리스트 2 순서가 있는 리스트 3 🔹 태그는 숫자가 자동으로 매겨지는 리스트를 만들 때 사용합니다. 2️⃣ 텍스트 관련 태그 ( ~ , , , , .. 2025. 3. 15. HTML 태그 소개와 속성 정리 웹 개발을 할 때 HTML 태그의 역할과 display 속성을 이해하는 것은 매우 중요합니다.이번 포스팅에서는 HTML에서 자주 사용되는 태그들과 함께 각 태그의 기본 display 속성을 정리하겠습니다. ✔️ 블록 레벨 요소 vs 인라인 레벨 요소 HTML 요소는 기본적으로 블록 레벨 요소(Block-level elements) 와 인라인 레벨 요소(Inline elements) 로 구분됩니다. ✅ 블록 레벨 요소기본적으로 한 줄을 모두 차지하고, 다음 요소는 새로운 줄에서 시작합니다.레이아웃을 구성하는 주요 요소입니다.대표적인 태그: , , ~ , , , 등✅ 인라인 레벨 요소같은 줄(라인)에서 다른 요소들과 함께 배치됩니다.특정 부분의 텍스트를 강조하거나, 작은 요소를 삽입하는 데 사용됩.. 2025. 3. 15. 웹페이지의 필수 정보! 메타 태그(Meta Tag) 제목설명주소작성자 우리가 책을 읽을때 흔히 볼 수 있는 전체를 아우르는 필수 정보죠. 웹사이트도 마찬가지로 메타 태그(meta tag) 를 활용하여 검색 엔진 최적화(SEO)부터 페이지 정보 설정까지 다양한 기능을 사용할 수 있습니다.이번 포스팅에서는 메타 태그가 무엇인지, 어떤 역할을 하는지, 그리고 필수적으로 사용해야 할 메타 태그들을 알아보겠습니다. 메타 태그란 무었일까요?메타(meta) 태그는 HTML 문서의 HTML 메타 태그 완벽 정리 이 페이지에서는 HTML 메타 태그의 중요성과 사용법을 설명합니다. 메타 태그는 웹페이지의 정보를 검색 엔진과 브라우저에 전달하는 중요한 역할을 합니다.SEO, 반응형 디자인, SNS 공유 최적화 등을 위해 꼭 필요한 요소입니다. - Dbl.. 2025. 3. 14. 이전 1 2 다음 728x90
