본문 바로가기

🐣codeLab

(16)

[GSAP] gsap 정리 정리중 간단하게 볼 수 있어서 좋다. 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 ..

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

3Depth(level) 만들기 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 양 옆 (margin) 주기 swiper slide 양 옆 공백만들기 Slide 01 Slide 02 Slide 03 Slide 04 Slide 05 Slide 06 slidesOffsetBefore 전체적인 슬라이드 왼쪽에 공백을 준다. slideOffsetAfter 전체적인 슬라이드 오른쪽에 공백을 준다.

SVG 참고 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..

darkmode 만들어보기 const theme = localStorage.getItem('theme'); // console.log(theme); // 현재 theme를 알 수 있음. // dark || light if(theme) { document.documentElement.SetAttribute('data-theme', theme); } localStorage :: Storage 객체는 단순한 key-value 저장소이며, 이는 객체와 비슷하다. 이 데이터들은 페이지 로딩에도 온전하게 유지된다. (다시 웹페이지에 접속 할 때 마지막 설정을 불러올 수 있다.) localStorage getItem(key) :: 키에 해당하는 값을 받아온다. setItem(key, value) :: 키, 값을 보..

이전 1 2 다음

티스토리툴바