🐣codeLab

jQuery로 `slideDown()`, `slideUp()` 으로 편하게 작업했었는데 이번에는 자바스크립트로 스크립트를 짜보았다. `accSlide()` : 해당 버튼 클릭 시 자신만 닫힘`accOtherSlide()` : 해당 버튼 클릭 시 다른 버튼 닫힘  해당 버튼만 toggle 버튼1 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti laudantium consequatur cumque repellendus, sit ducimus iste doloremque accusantium autem. Itaque, voluptatum. Dolorum ratione laborum..

정리중 간단하게 볼 수 있어서 좋다. http://302chanwoo.com/lab/tween/ https://lily-im.tistory.com/70?category=950585 gsap 한글 번역?? https://agal.tistory.com/m/210 GSAP 3 Cheat Sheet https://greensock.com/cheatsheet/ GSAP 메소드 메서드속성 Tween바로 실행되어야하는 간단한 모션만들 때 유용Timeline다양한 메서드를 사용해 모션을 컨트롤 pause(), play(), progress(), reverse(), timeScale() 등등 GSAP demo https://greensock.com/st-demos/page/3/?d=19 GSAP | properties ..

조건! javascript말고 css만 사용하여 masonry grid 나타내기. 반응형에도 적용할 수 있는 masonry만들기. Reference https://w3bits.com/demo/css-masonry/ https://hwanlee.tistory.com/64 https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts

모바일 브라우저에서 100vh 오류 ⛔오류 module 클래스에 100vh 스타일 지정 후, 웹 브라우저 모바일 사이즈에서는 잘 보였으나, 모바일에서는 아래의 이미지처럼 100vh가 적용되지 않고 텍스트가 밀려나는 화면이 보였다. ⏺기준과 문제점. 아이폰기준. 14버전. 무조건 100vh!! 어느 기기든 화면 위아래와 맞춘다. 웹 브라우저에서는 100vh가 적용되나 모바일 크롬, 파이어폭스, 사파리가 적용이 안됨. 모바일 브라우저만 적용하기 위해서 아래 css 적용. @media only screen and (max-device-width: 모바일사이즈) { /* 아래 예제는 640px로 기준! */ /* 스마트폰만 일단 확인(tablet은 별도 필수) */ /* 웹브라우저에서 기기툴바전환할 경우에도 이..

1Depth - 2Depth - 3Depth - 3Depth - 3Depth - 2Depth - 3Depth - 3Depth - 2Depth - 2Depth 1Depth - 2Depth - 3Depth - 3Depth - 2Depth - 3Depth - 3Depth - 3Depth 1Depth - 2Depth - 2Depth 1Depth /* reset css */ * { margin: 0; padding: 0; } li { list-style: none; } a, a:active, a:focus { color :#222; text-decoration: none; } /*************** 1Depth ***************/ .lnb { position: relative; width: 20..

swiper slide 양 옆 공백만들기 Slide 01 Slide 02 Slide 03 Slide 04 Slide 05 Slide 06 slidesOffsetBefore 전체적인 슬라이드 왼쪽에 공백을 준다.slidesOffsetAfter 전체적인 슬라이드 오른쪽에 공백을 준다.

https://ossam5.tistory.com/116 [HTML기초문법] 15강 SVG태그 Stroke속성 - 오쌤의 니가스터디 1. SVG 태그란? - SVG태그는 Scalable Vector Graphics의 약자로 벡터 기반 그래픽을 XML 형식으로 정의하는 것을 의미합니다. - SVG태그는 SVG그래픽을 담기 위한 요소입니다. - SVG태그 내부에 담을 수 있는 ossam5.tistory.com https://velog.io/@gicomong/css100-day-8 svg에 애니메이션 넣기 svg에 그려지는 효과 주기 velog.io

조건 btn이 여러개 일 때 btn 클래스를 가진 요소가 모두 fix. visual일 때는 btn이 보이지 않아야 한다. resize에도 가능. 일단 코드! header visual cnt01 cnt02 cnt02 footer /* 모든 css 동일 */ * { margin: 0; padding: 0; box-sizing: border-box; } .wrap { position: relative; width: 100%; height: 100%; } header, footer { width: 100%; height: 70px; position: relative; background-color: #eaeaea; } footer { height: 200px; } section { position: relati..