NOTE
-
슬라이드 코딩2NOTE/코딩 2024. 1. 30. 03:36
여러개를 사용할때 기존에 쓰던게 적용이 안돼서 하나 구해옴 let currentIndex1 = 0; 는 원래 let currentIndex = 0; 였는데 여러개를 쓰면 번호에 오류가 떠서 1~ 번호증가 추가 사이트바로가기 #중앙대학교 BK21 홈페이지 개발 중앙대학교 4단계 BK21 사업 참여도 디자인/코딩 제작물 인트로페이지, 메인페이지, 서브페이지 형태 반응형 웹 페이지 사용툴 Photoshop, Illustrator, bracket 사이트 바로가기 2 3 4 1111 1111 let currentIndex1 = 0; const slides_w01 = document.getElementById('slide01'); const slides1 = slides_w01.querySelectorAll('.s..
-
아코디언 MEMONOTE/코딩 2024. 1. 25. 03:00
제목 1 내용 1 입니다. 제목 2 내용 2 입니다. 제목 3 내용 3 입니다. function collapse(element) { var activeButton = document.querySelector(".active"); if (activeButton && activeButton !== element) { collapseSection(activeButton); } element.classList.toggle("active"); var content = element.nextElementSibling; content.style.maxHeight = (content.style.maxHeight === "0px" || content.style.maxHeight === "") ? content.scrol..
-
레이어 팝업 활용한 컨텐츠NOTE/코딩 2023. 12. 4. 22:00
Box 1 X 이전 다음 Box 2 X 이전 다음 Box 3 X 이전 다음 function openPopup(boxNumber) { var overlay = document.getElementById('overlay' + boxNumber); overlay.style.display = 'flex'; } function closePopup(boxNumber) { var overlay = document.getElementById('overlay' + boxNumber); overlay.style.display = 'none'; } function prevPopup(boxNumber) { var prevBoxNumber = boxNumber - 1; if (prevBoxNumber >= 1) { closeP..
-
탭(tab) 메뉴 만들기NOTE/코딩 2023. 11. 30. 17:55
Tab Button1 Tab Button2 Tab Button3 Tab Content1 Tab Content2 Tab Content3 .tab_menu{ position:relative; width: 100%; ul.list { overflow:hidden; li{ float:left; margin-right:14px; &.is_on{ .btn{ background: #000; font-weight:bold; color:pink; } } } } .cont_area{ margin-top:10px; .cont{ display:none; background:#555; color:#fff; width:100%; height:auto; } } } const tabList = document.querySelecto..
-
인터섹션 옵저버로 영역감지시 class붙게NOTE/코딩 2023. 11. 25. 05:12
HOME PROFILE PORTFOLIO DESIGN CONTACTS HOME PROFILE PORTFOLIO DESIGN CONTACTS 1 모양 32222 4 5 아이디 값을 줬음 /*성공했다 이유는ㅁㄹ https://merrily-code.tistory.com/228참고*/ const $cards = document.querySelectorAll('.section') const observer = new IntersectionObserver(entries => { // 2. 감지한 모든 .card 요소의 정보를 entries 배열로 전달받습니다. // 3. entries 배열을 순회해, isIntersecting 조건이 참일 경우 "on" 이라는 클래스명을 추가합니다. entries.forEach(..
-
클릭시 해당 class 이동 +크기 관련 메서드NOTE/코딩 2023. 11. 14. 23:59
.offsetTop 이용 한 방법 offsetTop : 요소의 Y축 위치 값(문서 기준)을 가져옵니다. clientTop : 요소의 Y축 위치 값(부모 기준)을 가져옵니다. HOME function 이름이름(name) { var location = document.querySelector("." + name).offsetTop; window.scrollTo({top: location, behavior: 'smooth'}); } // //사용 예시 = function Test(name) { var location = document.querySelector("." + name).offsetTop; window.scrollTo({top: location, behavior: 'smooth'}); } 크기 및 ..
-
스크롤 영역 이동 스크립트 정리NOTE/코딩 2023. 10. 27. 22:43
[스크롤 이벤트 리스너] window.addEventListener('scroll', function(){ console.log('스크롤시 출력되는 로그') }); //스크롤 이벤트 //유용한 기능들 console.log( window.scrollX ) //X축으로 얼마나 이동했는지 알려줌 console.log( window.scrollY ) //Y축으로 얼마나 이동했는지 알려줌 window.scrollTo(x, y) // 강제로 스크롤 이동 x ,y에 숫자입력 . [이미지 위치 정보 알아내는 방법] getBoundingClientRect() //여기서 #test는 이미지 id const ele = document.querySelector('#test'); const imgRect = ele.getBou..
-
마스크효과 활용NOTE/코딩 2023. 10. 18. 15:02
WebKit (웹킷) 기반의 브라우저에서 사용 가능한 기능 ( ex .크롬 , 엣지 , 네이버 웨일) 익스가 사라지면서 많이 사용 MASK 두개의 레이어가 겹쳐있을 때 위쪽의 레이어에 적용 투명한 부분이 뚫려있는 부분(아래쪽 레이어가 보임) 검은색 부분이 막혀있는 부분 = 기존 위쪽 레이어 [ 사용 방법 예시 ] css : on class에 애니메이션 적용 &.upper { background: aqua; -webkit-mask: url(../src/mask1.png); -webkit-mask-size: 2300% 100%; /*마스크 사이즈 정하는법 : 23장이 있으니까 프레임 하나를 100%로봤을때 2300*/ -webkit-mask-position: 0% 0%; /*시작위치*/ } &.on { .u..