찐망고'S 퍼블리싱그리고디자인

[퍼블리싱] Sticky 헤더 애니메이션: 슬라이드 업/다운 효과 구현하기

안녕하세요 찐망고입니다.오늘도 클론 프로젝트를 하던 중 귀찮지만 막상 구현하면 보기 좋은 헤더 애니메이션작업과정을 공유해 드릴 건데요. 디테일은 귀찮아서 못하는 거지 막상 하면 만족도가 높..조만간 이런 공유들을 영상으로 보여드리고 싶은데.. (말만 몇 년째) 해당사이트 학생이 클론작업한 링크입니다 (3개월 유지예정) KRDS대한민국 정부 디자인 시스템 KRDS는 누구나 쉽게 정부 서비스를 경험할 수 있도록 가이드라인과 디자인 리소스 및 디자인 시스템 구축을 위한 모든 자료와 최신 정보를 제공한다.www.krds.go.kr  KRDS 클론 코딩  이 애니메이션의 핵심은 헤더를 줄이거나 헤더를 이동하는 게 아니고전체적인 콘텐츠를 위로 당긴다고 생각하면 되는데요처음 스크롤할 때 배너가 사라지고 헤더가 fix..

안녕하세요 찐망고입니다.간만에 swiper관련 포스팅을.. 이번반 학생이 클론 하는 사이트인데요.이 사이트에서 세로형태로 슬라이딩되는 섹션을 swiper를 이용해 구현했습니다.이를 통해 배경이 부드럽게 전환되며, 동시에 탭 버튼이 해당 배경과 연동되도록 만들었죠사용자는 텍스트 버튼을 클릭해 직접 원하는 슬라이드로 이동할 수 있습니다.   지금은 충전중 │ 현대자동차모두의 삶이 한층 더 편해지는 현대자동차 ACR을 통해 여행의 행복을 선물합니다. 현대자동차와 자유로운 제주로 지금 바로 떠나보세요.acrtrip.com 아래 캡처된 이미지는 Swiper를 활용해 세로방향으로 슬라이드 되는 섹션을 구현한 모습이구요텍스트버튼(탭)은 Swiper와 연동되어 해당 슬라이드에 맞는 텍스트가 강조됩니다.선택된 버튼은 배..

안녕하세요 찐망고입니다오늘은 tab과 swiper슬라이드를 연결할 건데요.예전 jQuery때랑 코드 부분이 조금 달라져서 포스팅해 봅니다.  1. Tab과 슬라이더를 연결2. Tab클릭 시 슬라이더가 첫 시작위치로 로드 되어야 함3. Tab클릭시 슬라이더는 모두 loop처리되어야 함 이 세 가지 조건에 맞는 슬라이더를 구현해 보도록 합니다. Tab부분은 기본적인 리스트 형태로 마크업을 할 거고요.리스트 하나는 ALL버튼입니다.처음 로드 되었을 때와 ALL버튼을 누르면 전체 swiper-slide가 다 보이게 할 거예요. 아래는 html코드입니다. ALL EYE LIP BASE OTHERS  플러그인은 swiper를 이용하여 따로 ..

안녕하세요. 찐망고 입니다. 오늘은 보그코리아 웹사이트의 마지막 하단 섹션을 클론 해 볼 건데요. 보그 코리아 (Vogue Korea)컬렉션부터 스타일, 쇼핑, 뷰티, 라이프스타일, 셀러브리티까지 지금 가장 핫한 트렌드 소개www.vogue.co.kr 하단섹션은 왼쪽과 오른쪽으로 나뉘어서왼쪽 섹션은 grid나 flex를 이용한 리스트섹션, 그리고 오른쪽은 배너모양의 이미지가 한 장 있어요.스크롤 시 오른쪽 이미지가 고정되어 푸터섹션에 도착할 때까지 움직입니다.   오른쪽 배너이미지는 처음엔 absoulte였다가 다시 fixed로 변경할 예정이고,fixed변경 시 좌표값이 부모요소 기준에서 뷰포트 기준으로 변경되므로그 부분을 염려해서 CSS작업을 해볼 예정이에요 왼쪽과 오른쪽을 저렇게 fix클래스 요소로 ..

안녕하세요 찐망고입니다. 이번 포스팅에서는 자바스크립트의 getAttribute() 메서드와 HTML5의 data- 속성을 활용하여,마우스 이벤트에 반응하는 탭 구조를 만드는 방법을 소개하겠습니다. 아래 그림을 볼까요? 오른쪽 탭에 마우스를 올릴 때마다 왼쪽의 이미지가 바뀌는데요.HTML5의 data속성과 자바스크립트의 getAttribute() 메서드를 이용한 코드를 포스팅해볼까 해요 일단 getAttribute()는 JavaScript에서 사용되는 메서드로, HTML 요소의 속성(attribute)을 가져올 때 사용되는데요. 예를 들어, HTML 태그에 id, class, href 같은 속성이 있을 때, 해당 속성의 값을 가져오는 데 유용합니다.element.getAttribute(attributeN..

안녕하세요 찐망고 입니다.오늘은 함수에서 중요한 return을 이해해보도록 포스팅 할건데요 return이란?return은 함수의 결과를 함수 밖으로 돌려주는 역할을 하는데, 함수 내부에서 어떤 값을 계산하거나 처리한 후, 그 결과를 다른 곳에서 사용할 수 있게 해주는 것을 뜻합니다. 쉽게 말하면:함수를 하나의 기계라고 볼 때, 기계에 무언가를 넣어서 (입력값, 인자) 작업을 하고 나면, 기계는 그 작업의 결과(출력값)를 내놓는데, 그 결과를 밖으로 내보내는 게 바로 return입니다~~~~function addNumbers(a, b) { return a + b;}const result = addNumbers(5, 3); // 함수의 결과가 result에 저장됨console.log(result); // ..

안녕하세요 찐망고 입니다. 오늘은 현재 가장 인기있는 프로그래밍언어에 대해 포스팅을 해볼까 하는데요. 2023년 Scala, Go, 그리고 Kotlin개발자가 연봉이 가장 높은 3대 개발자로 선정 되었다고 해요.출처에 따르면 대다수의 Kotlin개발자(66%)는 Android 및 서버측 애플리케이션에 사용한다고 합니다.Java에 비해 코드가 더 간결하고 읽기 쉽고, Java와 완전히 호환되어 기존 Java프로젝트에 쉽게 통합할 수 있습니다. Scala는 데이터 처리 및 분석, 웹 개발, 분산 시스템 개발에 주로 사용되며,Go는 서버 및 네트워크 애플리케이션, 클라우드 및 컨테이너 기술, 도구 및 유틸리티 개발에 많이 사용됩니다  현재 프로그래밍 언어지수를 볼까요?   지난 3년 동안 JavaScript,..

안녕하세요 찐망고 입니다.오늘은 두개의 swiper를 이용하여 탭을 만들어볼건데요. 참고 사이트는 구루미비즈입니다.  AI 화상 솔루션 구루미비즈AI화상상담솔루션, AI교육, AI서비스 구축을 위한 최적의 AI화상플랫폼biz.gooroomee.com    먼저, 각각의 Swiper 코드부터 살펴볼까요?const swiper01 = new Swiper(".s01-swiper", { slidesPerView: 1.3, spaceBetween: 20, pagination: { el: ".s01-swiper .swiper-pagination", type: "progressbar", }, breakpoints: { 1281: { ..

안녕하세요 찐망고입니다. addEventListener()는 JavaScript에서 이벤트 처리를 위해 사용되는 메서드인데요. 이 메서드를 사용하면 HTML 요소에 이벤트 리스너를 추가할 수 있습니다. // element.addEventListener(event, function, useCapture); window.addEventListener('scroll', function() {}) function toggleOnClass() { header.classList.add("on"); } const btn = document.querySelector("button") btn.addEventListener("mouseenter", toggleOnClass) 클릭이벤트 (click): 사용자가 마우스로 요..

안녕하세요 찐망고입니다. CSS 도 선택자가 중요하잖아요! 선택자 관련 CSS 만 해도 엄청 많죠~ `document.querySelector()`는 웹 개발에서 사용되는 JavaScript의 메서드 중 하나입니다. 문서 객체 모델(Document Object Model, DOM)에서 요소를 선택하는 데 사용하죠. 이 메서드는 CSS 선택자를 통해 문서 내에서 요소를 선택하고 반환하는데요, CSS선택자를 사용하여 원하는 요소를 찾을 수 있습니다. 일치하는 요소가 없는 경우엔 `null`을 반환합니다. const elementId = document.querySelector("#myElement"); // id선택자 요소 선택 const elementClass = document.querySelector(..