안녕하세요찐망고 입니다. 오늘은 navi요소에서 많이 쓰는 해당 요소를 클릭했을 때만 클래스를 추가하고나머지 요소들은 클래스를 제거하는 코드를 볼 건데요..탭이랑 비슷하죠? 1. 기본코드const navMenus = document.querySelectorAll(".navi > ul > li");navMenus.forEach(navMenu => { navMenu.addEventListener("click", () => { navMenu.classList.toggle("on"); })}) 일단 위 코드는 클릭한 li요소들에게 on클래스가 추가됩니다.다시 클릭을 해야 제거되겠죠? 2. 개선된 코드const navMenus = document.querySelectorAll(".nav..
안녕하세요 찐망고입니다. 스크롤을 내리다 보면 어느 틈인가 나타나는 탑버튼.. 다시 스크롤을 올리면 사라지는데요 그거 해볼 거임 이전 탑버튼애니메이션도 참고해 주시고요 자바스크립트 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..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/BEgps/btsFjV0iSYs/3p9QzoEgmGjTwXckOJGFyk/img.png)
안녕하세요 찐망고입니다. 자동롤링 관련 포스팅을 세 개째 하네요? 나는 플러그인을 쓰지 않고 작업하고 싶다 하는 분들은 이 포스팅을 보시오! 세이브더칠드런 지구기후팬클럽 세이브더칠드런 지구기후팬클럽은 아동이 주체가 되어 아티스트 지구의 기후를 지키기 위해 고민하고 실천하고 알리는 아동∙청소년들의 모임입니다. earthemble.sc.or.kr 텍스트가 각자 반대방향으로 자동 롤링 되고 있는데요.. 저는 그냥 한 방향으로만 만들어 보도록 하겠습니다. 작업방법은 어렵지 않아요. js로 해당요소를 복제해서 각각 아이디를 부여하고 위치를 잡아주고 css로 애니메이션을 만들어주면 끝ㅌ트트트트틑 LET’S EARTHEMBLE LET’S EARTHEMBLE LET’S EARTHEMBLE #wrap { width: 1..
안녕하세요 찐망고 입니다. 텍스트자동롤링 jQuery.marquee플러그인이 있어 살짝 가져와 봤어요. 태그라고 해서 텍스트나 이미지를 스크롤링하는 데 사용했었거든요. 그러나 이 태그는 웹표준과 웹접근성에 대한 요구 사항을 충족시키지 못하고 사용자 경험을 저하시키는 등의 이유로 권장되지 안.. 결국 HTML5 명세에서 폐기(deprecated)되었으며, 더 이상 사용하지 않게 되었죠.. 물론 CSS나 Javascript를 사용하여 스크롤링을 구현하게 된 거고요. 너무 쉬어서 일단 포스팅해봅니다. jquery.marquee jQuery plugin to scroll the text like the old traditional marquee http://aamirafridi.com/jquery/jquery-..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/uUdgY/btsmUH5SPGE/ZJC9T4neKzzKCZGSYv8731/img.png)
안녕하세요 찐망고입니다. 아주 간단하지만 제법 많이 질문하는 부분이라 미리 포스팅을 해볼까해요. 요즘 기업사이트 추세가 메인 비주얼 섹션에 영상을 많이 넣더라구요. 거의 국룰이랄까.. 영상을 넣을거다 라고 하면 HTML요소로는 VIDEO요소가 있고 내가 다른 서버에 있는 영상을 좀 가지고 쓸거다 라고 하면 IFRAME요소로도 가능합니다 // VIDEO요소 메인에 영상만 넣으면 멈춰있는 상태로 들어가요 그래서 자동재생(autoplay) 하는게 좋은데 자동재생 속성을 넣어도 멈춰있단 말이죠. 사용자입장에서 처음 가보는 페이지에 접속하자마자 시끄러운 소리와 함께 (나름 고르고고른 bgm이라 할지라도) 영상이 재생되면 당황하겠죠? 그래서 음소거(muted)를 하는 거고, 음소거가 되야 자동재생이 됩니다. 한번 ..
안녕하세요 찐망고입니다. 얼마전 setInterval()을 이용하여 숫자 카운팅하는 포스팅을 했었는데요 2023.06.28 - [WEB/JS코드] - JS) 숫자 카운트 setInterval(), setTimeout(), toLocaleString(); JS) 숫자 카운트 setInterval(), setTimeout(), toLocaleString(); 안녕하세요 찐망고 입니다. 이전 포스팅에 숫자 카운팅 하는 코드를 올려봤는데요.. 이번엔 한개가 아닌 두개나 세개의 요소에 동시에 숫자가 카운팅되게 코드를 짜볼거에요 일단 이전포스팅을 uiweb.tistory.com 아무래도 저런 작업을 main문서에 넣다보면 스크롤 이벤트도 막 하고 싶잖아요? 다알아요 하고싶은거.. 물론 스크롤이벤트가 가능한 플러그인..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/Znrzp/btsl0lvqjVZ/pSHwq1nFFBDgiTGiqGlvgk/img.png)
안녕하세요 저는 찐망고이고 오늘은 마우스 커서를 따라다니는 이미지 효과를 만들어 볼건데요.. 이벤트는 mousemove를 사용하고 좌표값을 알 수 있게 pageX와 pageY를 체크하시면 되요 작년 10월에 SELECTO COFFEE 웹사이트가 업데이트 되었는데.. https://www.selecto.co.kr/brand/main.asp 셀렉토커피 커피전문점,카페창업,아메리카노 전문점,브런치 카페,입맛에 따라 골라먹는 커피전문점등 www.selecto.co.kr 요 귀여운 친구가 마우스를 따라다니더라구요~~ 머 아주 간단한 코드로 가능하니까 작업해볼께요 일단 이미지를 넣어야하는 요소가 필요하고 그 요소에 이미지를 담을거고 그친구를 mousemove이벤트를 이용하여 움직일겁니다. // html // jav..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bfDvoR/btsluXbD4ws/kFeVL3cYGl3zqm5HZyXQkK/img.png)
안녕하세요 찐망고 입니다. 이전 포스팅에 숫자 카운팅 하는 코드를 올려봤는데요.. 이번엔 한개가 아닌 두개나 세개의 요소에 동시에 숫자가 카운팅되게 코드를 짜볼거에요 일단 이전포스팅을 참고하시고~~ 2023.06.07 - [WEB/JS코드] - JS) 숫자 카운트 setInterval(), setTimeout() JS) 숫자 카운트 setInterval(), setTimeout() 웹페이지 접속 할 때 숫자 카운팅 되면서 움직이는.. 그런것들을 만들고 싶었다면? // HTML 0 // JS // 숫자 카운트 const counter = ($counter, max) => { let now = max; const handle = setInterval(() => { $counter.innerHTML = Ma ..
- Total
- Today
- Yesterday
- uiux
- CSS3
- uidesign
- boxmodel
- 디자인팁
- Slick
- 코딩교육
- UI디자인
- uxdesign
- 크로스브라우징
- 스마트폰해상도
- 자바스크립트숫자카운트
- 피그마플러그인
- JavaScript
- 프로그래밍기초
- 웹디자인
- 포토샵합성
- css4
- css
- 반응형웹
- 시멘틱마크업
- slickAPI
- css그리드
- 슬라이드플러그인
- padding
- 웹접근성
- Border
- margin
- JavaScriptTips
- 웹표준
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |