지혀니의 알쏭달쏭 지식

사진은 멈춰있지만, 숫자를 정해놓은 단위로 올리는 방법이다. 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은 증..

1. fadeIn/out 슬라이드 배너 //css /* 슬라이더 */ .sliderWrap {position: relative;} .sliderWrap > div {display: none;} .sliderWrap > div:first-child {display: block;} .sliderWrap > .slider { position: absolute; left: 0; top: 0; } .sliderWrap > .slider img { vertical-align: top; } .sliderWrap > .slider span { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: rgba(0, 0, 0,..

1. 하위메뉴가 개별로 하나씩 내려오는 메뉴 만들기 dispaly: none/block이 아닌, height 길이 사이즈를 안보이게/보이게 조절하여 만드는방식 (ex: height: 0 / 마우스올리면 height: 155px이 되게) 메뉴1 서브메뉴1-1 서브메뉴1-2 서브메뉴1-3 서브메뉴1-4 메뉴2 서브메뉴2-1 서브메뉴2-2 서브메뉴2-3 서브메뉴2-4 메뉴3 서브메뉴3-1 서브메뉴3-2 서브메뉴3-3 서브메뉴3-4 메뉴4 서브메뉴4-1 서브메뉴4-2 서브메뉴4-3 서브메뉴4-4 2. 하위메뉴가 한번에 내려오는 메뉴 만들기 1번메뉴와 똑같음 dispaly: none/block이 아닌, height 길이 사이즈를 안보이게/보이게 조절하여 만드는방식 (ex: height: 0 / 마우스올리면 hei..

forEach함수의 구문 배열의 반복이며, 배열에서만 사용할 수 있는 메서드이다. forEach()는 배열의 처음부터 마지막 요소까지 반복하여 실행하고 인자로 콜백함수를 받아온다. 주어진 콜백함수를 배열 요소 각각에 실행하는 순회방법이 있다. 하지만 forEach()함수는 보통 map()함수와 함께 가장 널리 사용되는 순회방법 중 하나이다. var arr = ["1", "2", "3"]; // ES6의 화살표 함수를 이용하면 코드를 아주 간결하게 만들 수 있습니다.(가장 자주 쓰는 형태) arr.forEach(item => { // item 변수는 배열 각각의 요소들을 순환합니다. console.log(item); }); // forEach 함수의 원형 그대로 사용하기 arr.forEach(functio..

기본 용어 정리 프로퍼티(property) 프로퍼티란 속성이란 뜻으로 자바스크립트에서 객체 내부의 속성을 의미한다. 객체는 프로퍼티로 구성된다. "key(키)" : "value(값)" 의 형식으로 객체 안의 콤마(,)로 구분되어 할당된다. key(키)는 속성명이라 생각해도 된다. 문자열만 가능하며, 문자열이지만 따옴표가 필요없다 반면 띄어쓰기를 할 경우는 필요하다. value(값)는 속성값이라고 부르며, 어떤 값이든지 상관없다. 객체에서 함수를 정의할 경우, 속성값이라 하지않고 Method(메소드)라고 부른다. 배열(array) 이란? 자바스크립트에서 배열(array)은 이름과 인덱스로 참조되는 정렬된 값의 집합으로 정의된다. 배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 ..

addEventListener()이란? 사용자와 상호 작용을 하면서 마우스(키보드/터치/펜) 등을 조작하면 그에 대한 반응을 하는 것이며, 특정 이벤트가 발생 되었을 때 특정 함수를 실행할 수 있게 해주는 것이다. 자바스크립트 이벤트 3가지 방법 1. HTML 요소의 속성으로 등록 - 이벤트를 하나밖에 지정할 수 없다는 단점이 있다. 2. DOM 요소의 프로퍼티로 등록 - 이벤트를 하나밖에 지정할 수 없다는 단점이 있다. let btn = document.getElementByID("button"); btn.onClick = btnClick(); 3. addEventListener 사용하여 등록 - 여러 개의 이벤트 등록이 가능하다. const title = document.querySelector("h..

여태까지 변수를 선언하고, 하나의 변수에 하나의 데이터 값만 할당을 했었다. ex) let name = "김태희".... 배열은 같은 자료들을 담는 자료구조 중의 하나이며, 단순하게 같은 자료형의 나열이다. 이번에는 하나의 변수에 여러개의 데이터 값을 할당하려고 한다. 이럴 때 사용하는 것이 배열이다. 배열은 [ ] 대괄호로 표현한다. ex) let name = ["김태희", "조인성"] 보통 배열은 여러 개의 요소를 갖기 때문에 일반적으로 배열 이름을 복수형으로 s를 붙여 짓는다. 배열 기본let name = ["김태희", "조인성"]; console.log(name);만약 내가 여기서 김태희만 빼내고 싶다면? 인덱스(index)를 사용해야한다. 인덱스는 배열이 가지고 있는 순서라고 생각하면 되고, 0..

변수란?데이터를 저장하기 위해 사용하는 공간 변수를 정할 때 적절한 변수명으로 적어주고 등호기호로 할당해 줄 데이터를 적어준다. ex) name = jihyun 단어의 첫글자는 소문자, 연결된 단어의 첫글자는 대문자 2. 변수 이름은 _, $문자로만 시작한다. 3. 상수나 축약어는 대문자와 스네이크케이스(snakecase)방법을 사용한다. => 언더바(_)를 사용해 문자를 이어준다. 4. 예약어는 사용할 수 없다.//1. 변수 이름은 카멜케이스 방법으로 작성한다. // 카멜케이스(camelcase)란? 단어의 첫글자는 소문자, 연결된 단어의 첫글자는 대문자로 쓰는 작성법 let userName = "jihyun"; //O let user_name = "jihyun"; //X 에러는 나지 않지만, 카멜케이..

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. 탭 버튼과 탭 컨텐츠가 ..

이전에 배웠던 함수를 조금 더 깊게 배워보자.함수의 인수(argument)란?함수의 인수(argument)란 함수가 호출될 때 함수로 값을 전달해주는 변수를 가리킨다. 대부분의 함수는 하나 이상의 매개변수를 가지며, 매개변수가 없는 함수도 존재한다.매개 변수(parameter) 란?매개변수(parameter)란 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수를 의미한다. 인수(argument)란 함수가 호출될 때 함수로 값을 전달해주는 값을 말한다. 함수의 인수예제)먼저 예제를 입력해보자. 나는 banana를 출력하고 싶어 바나나를 썼다.function apple(){ console.log("banana"); } apple();이 때 여기서 apple도 출력하고 싶고 동시에 ba..