자바스크립트 2

[Javascript] 자바스크립트로 카운팅 해보기 / count 세어보기

사진은 멈춰있지만, 숫자를 정해놓은 단위로 올리는 방법이다. HTML 개인정보유출 피해 재산 피해건수 1,557억원 19,000만명 4,443건 CSS .counting {display: flex; justify-content: center; align-items: center; height: 500px; background: green; font-size: 82px; color: #fff; } .cut-num {margin-left: 50px;} Javascript function counting(name, max, step, unit){ //counting이라는 함수를 정의하고, 네 개의 매개 변수를 받겠다는 뜻이다. //▲여기서 name은 count할 요소의 선택자, max는 최대값, step은 증..

[Javascript] for문을 사용해서 tab-menu/탭메뉴 만들기

1. 탭 버튼과 탭 컨텐츠가 한 영역안에 있을 경우이 방법은 스크립트를 간소화 할 수 있는 장점이 있고 또한 마크업 구조의 접근성을 높일 수 있는 구조이다.HTML 탭메뉴1 첫번째 탭 내용 탭메뉴2 두번째 탭 내용 탭메뉴3 세번째 탭 내용 CSS Javascript - for문 1. tab-lists 안에 있는 li에 addEventListener로 클릭 이벤트 걸기 2. .btn을 a로 만들어놨는데 화면 이동을 막을 수 있는 e.preventDefault()를 걸어준다. 3. .btn 클릭시 해당 버튼의 부모 요소에 .tab-list-on 클래스를 준다. (add) 4, .btn을 클릭했을 때, 다른 부모 요소 .tab-list-on 클래스를 해제시켜준다. (remove) 2. 탭 버튼과 탭 컨텐츠가 ..