프론트엔드 스터디

https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io html AOS.init(); // 초기화 선언 필수 CDN SOURCES CSS JS INITIALIZE AOS

css // 변수 설정 $thumbnail: thumb1, thumb2, thumb3, thumb4, thumb5; @each $item in $thumbnail { .thumbnail.#{$item} { background-image: url("../img/#{$item}.png"); } } html

css //드래그 막기 css body { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none }

script // 스크롤바 숨기고 동작안하게 했다가 풀기 $("header").toggleClass("active"); if ($("header").hasClass("active")) { $("header").on("scroll touchmove mousewheel", function (event) { event.preventDefault(); event.stopPropagation(); return false; }); } else { $("header").off("scroll touchmove mousewheel"); } $("body").toggleClass("scrollBar"); css .scrollBar { -ms-overflow-style: none; /* IE and Edge */ scrol..

css white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

script /* a href='#' 클릭 무시 */ $('a[href="#"]').click(function (ignore) { ignore.preventDefault(); });

html

속성 기본값 [사용되는 값들] 내용 visibility visible [hidden,collapse] 영역은 유지하면서 보이기/숨기기

=========익스텐션 설치========== Sass SCSS(Sass) : css에서 반복되는 내용을 줄이고 보다 효율적으로 css를 관리하기 위해 나온 스크립트 언어 Live Sass Compiler CSS를 실시간으로 Sass로 컴파일 해주는 익스텐션 Mithril Emmet html에서 반복 타이핑을 줄일 수 있는 여러 기능을 제공하는 익스텐션 live server html의 변경된 부분을 실시간으로 미리볼 수 있도록 지원해주는 익스텐션 Auto Rename Tag 태그 이름 자동으로 수정해주는 익스텐 indent-rainbow 들여쓰기 수준에 따라 들여쓰기에 무지개 색을 입혀주는 익스텐션 px to rem & rpx & vw (cssrem) px과 rem 단위를 교차로 보여주는 익스텐션 Pr..

-rafce (react 기본세팅) -clg : console.log(object) -imp : import second from 'first'