rhanziy

// string concatenation console.log('my' + 'cat'); console.log('1'+2); console.log(`string literals: 1+2 = ${1+2}`); console.log (`rhanyi's \n\tbook`); // \n 줄바꿈 \t 탭 // numeric operators console.log(1+1); //add console.log(1-1); // subtract console.log(1/1); // divide console.log(1*1); // multiply console.log(5%2); // remainder console.log(2**3); //exponentiation // Increment and decrement oper..

오늘 자바스크립트 포함 방법 4가지를 배웠다!!!! 보통 사용자가 요청한 페이지를 불러올 때 순차적으로 코드가 실행된다. script 태그를 포함할때 head안에 script태그를 포함하게되면, html parsing중 중간중간 js를 다운받기 때문에 웹사이트 로딩시간이 오래 걸릴 수 있다. 많이하는 방법은 body태그 안 끝부분에 script를 포함하는 것인데, 이렇게 되면 html 분석 후 js를 다운로드한다. 그렇게되면 js를 다운받기전 사용자가 미리 페이지 컨텐츠를 볼 수 있다. -> js에 의존적인 사이트라면 사용자가 의미있는 컨텐츠를 보기위해선 js를 준비하고 실행하는 시간을 기다려야한다. 그렇다면 async 속성값을 사용하는 방법은? (async옵션은 boolean값이다. 선언만으로도 tru..

html { font-size: 62.5%; } /* 기본 100% = 16px을 62.5% = 10px 단위로 변경 */ .image { width: 12rem; } /* 120px */ .item { font-size: 1.6rem; } /* 16px */ .copyright { margin-top: 5rem; } /* 50px */ @media all and (max-width: 750px) { html { font-size: 50%; } /* 문서 내 모든 rem단위 변경 */ } 반응형 디자인의 경우 사용자가 웹 브라우저 설정에서 폰트 기본 사이즈를 작거나 크게 변경할 수 있어야 하기 때문에 px을 쓰지 않는다. px 계산 조금 더 쉽게 정의하는 법!

background-image만 개별로주고 나머진 공통에주려면 background-size background-position background-repeat 등등으로 작성해야함 filter: drop-shadow(8px 30px 30px hsl(0deg 0% 0% / 0.25) png이미지의 그림자효과가능, hsl(0~360 색상환 0% 채도 0% 명도 / 투명도)

$(".thumb > img").click(function(){ var index = $(this).index(); // index 이벤트가 발생한 인덱스번호 $(".thumb > img").removeClass("active"); $(this).addClass("active"); $(".package").removeClass("active"); $(".package").eq(index).addClass("active"); $(".text-box > ul > li").removeClass("active"); $(".text-box > ul > li").eq(index).addClass("active"); }); 객체복제 .clone( ), 이벤트 발생여부는 .clone(true)로. appendTo = ..

https://jineecode.tistory.com/98 fullpage 요즘 포폴 작업한다고 fullpage 라이브러리를 쓰고 있다. 이 라이브러리를 쓰면서 적용한 방법을 기록한다. 도큐먼트를 봐도 뭔 말이야...? 하는 상황이 지속해서 오는 바람에 괜히 썼다고 생각하 jineecode.tistory.com https://m.blog.naver.com/coding-/221432074882 script afterload, onleave함수 사용법 jQuery fullpage.js (제이쿼리 풀페이지 플러그인 + 옵션/콜백) 웹 사이트에서 마우스휠로 스크롤 할 때, 페이지 단위로 움직이게 해주는 jQuery fullpage.js 익스는 IE... blog.naver.com $(document).ready..

[자바스크립트] 스크롤에 연동되는 fade 효과를 구현하는 3가지 방법 (tistory.com) [자바스크립트] 스크롤에 연동되는 fade 효과를 구현하는 3가지 방법 요새 css와 자바스크립트를 이용해서 interactive webpage에 대해 관심을 가지고 공부하고 있다. 특히 유튜버 중에 Interactive Developer 이분을 보면서 수준 차이를 확실히 느끼고 있다. Interactive Develop.. all-dev-kang.tistory.com intersection observer 관련 문서 https://darrengwon.tistory.com/1250