위 코드를 사용하면 최신버전의 jQuery를 사용할 수 있다고 한다.

for(i = 0 ;i < 6; i++){ console.log('*'.repeat(i+1)); } for(i = 0 ;i < 6; i++){ console.log('*'.repeat(6-i)); } for(i = 0 ;i < 6; i++){ console.log(' '.repeat(i) + '*'.repeat(6-i)); } for(i = 0 ;i < 6; i++){ console.log(' '.repeat(6-i) + '*'.repeat(i+1)); } for(i = 1; i < 6; i++){ console.log(' '.repeat(2-(5%i)) + '*'.repeat((5%i)*2+1)) } 참고사이트 https://juliestruly.tistory.com/68

progress태그로 만들어도 되지만 이 경우 진행도에 따라 색이 채워지는? 영역을 색상이나 크기 외에는 조절할 수 없어서 div로 똑같은 기능을 하는 progress bar를 만들 수 있는 방법이 w3c에 올라와있어서 참고했다 HTML

HTML progress 태그는 진행의 정도를 나타내는 바를 만드는 태그입니다. 주요 속성은 value와 max 입니다. max를 전체로 봤을 때 value에 해당하는 정도를 나타냅니다. CSS progress { position:fixed; top:0; left:0; width: 100vh; height:6px; appearance:none; transform:translate(calc(-50% + 3px), calc(50vh - 50%)) rotate(90deg); } /* progress 배경 */ progress::-webkit-progress-bar { background: transparent; } /* progress 진행바 색상 */ progress::-webkit-progress-valu..

HTML Slide 01 Slide 02 Slide 03 swiper 영역과 swiper가 넘어갈 때 마다 조작될 영역을 마크업한다. 이 때, 조작될 영역은 swiper 영역에 있어도 되고 바깥에 있어도 상관없다. script var swiper = new Swiper('.mySwiper', { on: { slideChange: function(){ $('.box').removeClass('active'); $('.box').eq(this.realIndex).addClass('active'); }, }, }); slideChange는 활성화 된 슬라이드(swiper-slide-active)가 바뀔 때마다 호출된다. realIndex는 활성화 된 슬라이드의 index번호를 반환한다. 이 둘을 사용하면 sw..

gsap 라이브러리를 이용해서 스크롤 할 때 마다 풀페이지로 넘어가는 스크립트 작성하기 gsap CDN HTML Page 1 Page 2 Page 3 Page 4 CSS * {box-sizing: border-box;} html, body { width: 100%; height: 100%; margin: 0; padding: 0; } .panel { width: 100%; height: 100%; display: flex; align-item: center; justify-contents: center; } .p {font-size: 6vw;} .s1 {background: red;} .s2 {background: green;} .s3 {background: blue;} .s4 {background: o..