javaScript(11)
-
JS로 별모양 찍기 (for문)
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
2022.08.25 -
div로 progress bar 만들기 (scroll indicator)
progress태그로 만들어도 되지만 이 경우 진행도에 따라 색이 채워지는? 영역을 색상이나 크기 외에는 조절할 수 없어서 div로 똑같은 기능을 하는 progress bar를 만들 수 있는 방법이 w3c에 올라와있어서 참고했다 HTML
2022.08.02 -
scrollTo를 이용한 맨 위로 / 맨 아래로 버튼 만들기
window.scrollTo() 문서의 지정한 위치로 스크롤 되는 함수 사용법 // window.scrollTo(x좌표, y좌표); window.scrollTo(0, 0); // window.scrollTo({top:x좌표, left:y좌표, behavior:''}) window.scrollTo({top:0, left:0, behavior:'smooth'}) 맨 위로 / 맨 아래로 가기 HTML / CSS JS // 맨 위로 가기 $('.top').click(function(){ window.scrollTo({top:0, left:0, behavior:'smooth'}) }); // 맨 아래로 가기 $('.bottom').click(function(){ let bottom = document.body.s..
2022.07.22 -
버튼 필터링 + 검색어 입력 후 검색버튼 클릭(select option 선택 후 주제에 따라 검색하는 기능) javaScript
HTML 강아지 고양이 토끼 제목 제작처 강아지1 강아지2 고양이1 고양이2 토끼 CSS .contents { display: flex; flex-wrap: wrap; } /* 기본 display는 none이며 버튼필터링 js로 출력유무를 지정함 */ .contentsBox { display: none; } .show { display: block; } .hide { display: none; } JS // 버튼필터링 js filterSelection("radio") function filterSelection(c) { var x, i; x = document.getElementsByClassName("contentsBox_js"); // All button이 있을 경우 "radio"를 "all"등의 a..
2022.04.25 -
스크롤 이벤트_fade In(페이드인)(vanilla js + css)
/* Scroll Animation (sa, 스크롤 애니메이션) */ 위에서 아래로 이해하기 for...of 명령문은 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성합니다. 1) '.sa'클래스가 포함된 모든 요소를 saElementList에 선언 (array) 2) element는 saElementList의 배열값을 하나씩 반복함 (const element of saElementList) 3) 만약 element에 클래스명 'show'가 포함되어 있지 않다면 4) window.innerHeight(창 틀을 뺀 브라우저의 높이값..
2022.04.04