지혀니의 알쏭달쏭 지식

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

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 에러는 나지 않지만, 카멜케이..

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

먼저 알아둬야 할 것이 있다. Git과 GitHub의 차이? git : local 내 컴퓨터 내에서 소스를 관리하는 것 gitHub: local에서 관리한 소스를 업로드하고 공유하는 공간 깃허브에서 직접 수작업으로 파일을 하나씩 업로드하여 레파토지를 올릴 수 있지만, 이 방법은 시간도 오래걸리고 파일 용량이 크면 나눠서 올려야 하는 단점이 있다. 따라서 비주얼스튜디오 코드에서 터미널을 통해 올려보고자 한다. 1. git 설치 첫번째로 본인 컴퓨터 사양에 맞춰 깃을 설치해주고, 깃허브에 회원가입을 해준다. https://github.com/ GitHub: Let’s build from here GitHub is where over 100 million developers shape the future of..

학원을 다니거나, 면접을 다니다보면 "dom에 대해서 아세요?"라는 질문을 들어본 적이 한번씩은 있을 것이다. 물론 나도 면접 볼 때 들어봤고.. 하지만 DOM이라는 단어만 알았지, DOM에 대한 상세한 정보는 몰랐다. 오늘은 DOM구조에 대해 알아보려고 한다.DOM 트리란?DOM 트리란? 웹 페이지의 모든 요소를 Document 객체가 관리하게 된다. 따라서 웹 페이지의 요소들을 관리하고, 제어하기 위해서는 Document 객체가 웹 페이지 요소들을 잘 반영하는 자료구조를 가지고 있어야한다. Document 객체 모델인 DOM은 트리 자료 구조 형태를 가지고 있다. 트리 자료 구조는 HTML 문서를 읽어 들이고 제어하기 가장 좋은 자료구조이다.(Document란? 웹 페이지 그 자체를 의미함) DOM ..

음..나는 제이쿼리만 많이 사용해봤지, 자바스크립트는 알림창용으로만 사용해왔다. 어느 면접을 가도 제이쿼리는 지금 거의 사라졌다고 말씀해주셨다. 이제 제이쿼리의 손을 벗어나 자바스크립트를 제대로 배워보려고 한다.Javascript의 탄생웹 페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 객체 기반의 스크립트 언어이다. 1993년에 처음으로 Netscape라는 정적인 웹 사이트가 등장하였고, 웹 사이트보다는 웹 문서에 가까웠다. 이 때 '브레든 아이크'라는 사람은' Mocha'를 만들었고 Java가 인기가 많다며 이름을 자바스크립트(Java script)로 지었다. 자바스크립트 등장 이후 DOM 요소의 조작이 가능해졌다. 초기의 자바스크립트는 순탄하게 성장했던 것은 아니다. 오류와 문제점들을 해..