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

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

안녕하세요 찐망고입니다. 클론 코딩을 하던, 클론 디자인을 하던 레퍼런스를 찾다 보면 전체 사이트를 캡처해야 하는 상황이 있단 말이죠~ 당연히 알고 있을 거라 생각했는데 생각보다 몰라서 못쓰던 사람들도 많아 포스팅해봅니다. chrome 웹스토어에 접속합니다. https://chromewebstore.google.com/category/extensions?utm_source=ext_sidebar&hl=ko&pli=1 Chrome Web Store 브라우저에 새로운 기능을 추가하고 탐색 환경을 맞춤설정합니다. chromewebstore.google.com 티스토리 화면을 캡처해 봤는데요. 한 장의 이미지나 혹은 pdf로 저장이 가능합니다. 참고로 fixed 걸린 요소들은 연속으로 캡처되는 단점이 있습니다~

https://collectui.com/challenges/sign-up 안녕하세요 찐망고입니다. 이전 글에 디자인 참고 레퍼런스 사이트관련 글을 포스팅했는데요. 디자인 레퍼런스 참고사이트 1. WWIT - What Was IT 국내의 UI/UX 모바일 패턴을 수집하는 사이트 입니다. UI 키트, 아이콘, 템플릿 등 다양한 디자인 리소스를 제공합니다. 모바일APP디자인이 한눈에 보이죠? 기획이나 디자인에 레퍼 uiweb.tistory.com 오늘은 ui디자인 레퍼런스 사이트를 포스팅 해보려고 합니다. 1. Mobbin - iOS 앱 UI 사이트 https://mobbin.com/browse/ios/apps 2. UI Garage - ui플랫폼 별 분류 https://uigarage.net/ UI Gara..

안녕하세요 찐망고입니다. 스크롤을 내리다 보면 어느 틈인가 나타나는 탑버튼.. 다시 스크롤을 올리면 사라지는데요 그거 해볼 거임 이전 탑버튼애니메이션도 참고해 주시고요 자바스크립트 top 버튼 애니메이션 안녕하세요 찐망고입니다. 웹사이트에서 페이지가 길어질 때 나오는 top버튼 top버튼을 누르면 자연스럽게 페이지위로 올라가는 애니메이션을 적용해 볼까 합니다. 제이쿼리에는 animate()라는 메 uiweb.tistory.com jQuery // top버튼 애니메이션 $(".topBtn").click(function() { $("html, body").animate({ scrollTop: 0 }, 500); return false; }) // 스크롤 이벤트 $(".topBtn").hide(); $(win..

안녕하세요 찐망고입니다. 웹사이트에서 페이지가 길어질 때 나오는 top버튼 top버튼을 누르면 자연스럽게 페이지위로 올라가는 애니메이션을 적용해 볼까 합니다. 제이쿼리에는 animate()라는 메서드가 내장되어 있지만 javascript에서는 존재하지 않으므로 스크롤 애니메이션을 구현하기 위해 requestAnimationFrame()을 사용하여 스크롤 위치를 변경할 겁니다. 호반문화재단 Creating culture, connecting hearts. www.hobancf.or.kr 예시 사이트인데요 푸터에서 top버튼을 누르면 자연스럽게 상단으로 넘어가죠? 스크립트 코드입니다. const topBtn = document.querySelector('.topBtn'); topBtn.addEventList..

안녕하세요 찐망고 입니다. js를 이용하여 탭을 만들어 관리해 보겠습니다. 예전에 많이 썼던 탭형태 js Tab 1 Tab 2 Tab 3 Tab 1 Content This is the content of Tab 1. Tab 2 Content This is the content of Tab 2. Tab 3 Content This is the content of Tab 3. .tabcontent { display: none; } .tablink { background-color: #f2f2f2; border: none; color: black; padding: 10px 20px; cursor: pointer; } .tablink:hover { background-color: #ddd; } .tabs { ov..

안녕하세요 찐망고입니다.오늘은 swiper의 페이징을 두 개 연동하는 작업을 해 볼 건데요.  Expect better you-에스쁘아Expect better you. 독보적이고 생동감있는 프리미엄 메이크업 전문 브랜드, espoirwww.espoir.com swiper로 만들어진 에스쁘아 히어로섹션인데 엇 분명 페이징이 하나죠?보아하니 progressbar로 타입을 지정해 주면 끝날 것 같은데 왜...????라고 할 줄 알고 짠 보세요~?progressbar부분이 터치가 돼요.. 클릭이 됩니다. const visualSwiper = new Swiper(".swiper", { pagination: { el: ".swiper-pagination", clickable: true, }..

안녕하세요 찐망고입니다. 오늘은 자바스크립트 문자열 관련 속성과 메서드를 따로 포스팅 해보려 합니다. 1. 문자열의 길이 length는 함수는 아니고, 숫자가 저장되는 프로퍼티 문자열의 길이를 저장 (갯수) const txt = "Javascript"; console.log(txt.length); // 10 2. 특정 글자에 접근하기 문자열 내 특정 위치에 있는 글자에 접근하려면 [, ] 대괄호를 이용하거나 str.charAt() 메서드이용 위치는 0부터 시작. let str = "Javascript"; //첫 번째 글자 console.log( str[0] ); // J console.log( str.charAt(0) ); // J // 마지막 글자 console.log( str[str.length - ..

안녕하세요 찐망고입니다. 오늘은 자바스크립트에 데이터 형식을 좀 알아볼까요? 자바스크립트에서 값은 항상 문자열이나 숫자형 같은 특정한 자료형에 속합니다. 8가지 기본 자료형이 있고, 자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있습니다. let memo = "hello"; memo = 0123456789; 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는데 이를 '동적 타입(dynamically typed)' 언어라고 부릅니다. 1. 문자열 문자는 영문자, 숫자, 마침표나 공백 등을 반드시 따옴표 안에 들어가야 하고, 큰따옴표나 작은따옴표든 상관없습니다. let mood = "happy"; //큰따옴표 mood = 'happy'; //작은따옴표 mood = `happy`; //역따옴표(백틱..

안녕하세요 찐망고입니다. 자동롤링 관련 포스팅을 세 개째 하네요? 나는 플러그인을 쓰지 않고 작업하고 싶다 하는 분들은 이 포스팅을 보시오! 세이브더칠드런 지구기후팬클럽 세이브더칠드런 지구기후팬클럽은 아동이 주체가 되어 아티스트 지구의 기후를 지키기 위해 고민하고 실천하고 알리는 아동∙청소년들의 모임입니다. earthemble.sc.or.kr 텍스트가 각자 반대방향으로 자동 롤링 되고 있는데요.. 저는 그냥 한 방향으로만 만들어 보도록 하겠습니다. 작업방법은 어렵지 않아요. js로 해당요소를 복제해서 각각 아이디를 부여하고 위치를 잡아주고 css로 애니메이션을 만들어주면 끝ㅌ트트트트틑 LET’S EARTHEMBLE LET’S EARTHEMBLE LET’S EARTHEMBLE #wrap { width: 1..