본문 바로가기

전체 글116

한동안 공부 업데이트가 뜸했다. 이유인즉슨..패스트캠퍼스 유료강의 하나를 듣는데 제이쿼리 코드로 다조졌기 때문이다.. 나는 제이쿼리 코드를 처음봤다..기본개념도 없다..뭐 다행?인지 불행인지 그 코드들은 강의자료에 완성본이 있었다. 하지만 나는..이전에도 그랬지만 코드를 뜯어서 재구축하고 새로운 기능을 넣는걸 즐기는 뭔가 이상한 놈이다. 그래서 지금 일주일 내내 검색으로 모르는걸 다 조지고 원하는 기능 같은걸 넣는 과정에 남이 짜놓은 코드다 보니 중간중간 혼선이 와서 다시보고 또 보고..하다보니 결국 일주일이 넘도록 공부내용을 업데이트 하지 못 했다는 것 이다. 잡고있는 이 코드는 주말까지 물고, 뜯고, 맛보고, 즐긴 후 다음 주 부터 새로운 공부내용을 업데이트 하겠다..끝~ 2023. 2. 10.
JavaScript 문법. Arrow Function( 화살표 함수 ) * 화살표 함수를 외면하고 일반 함수만 하던 나.. (이전 글들 보면 화살표 함수 예제를 다 일반 함수로 바꿔서 씀..) * 화살표 함수, 피할수 없다면 즐겨주겠어. 자바스크립트 함수 정의 방법 1. 일반 함수 2. 화살표 함수 1-1. 일반 함수 - 함수 선언식 함수 선언식이란, 함수 function키워드를 쓰고, 함수 이름을 넣어준 다음 함수 블록에 내용을 채워 넣으면 된다. * 참고 자료 1 : MDN Web Docs - 함수 선언(function declaration) function name([param[, param,[..., param]]]) { [statements] } name 함수 이름. param 함수로 전달되는 인수(argument)의 이름. 인수의 최대 개수는 엔진마다 다름. st.. 2023. 1. 29.
JavaScript 문법. this * 어...음...설날 전후로 신나게 펑펑 놀았습니다. 오늘은 this에 관해서 파헤쳐보겠습니다. * 참고 자료 : MDN Web Docs - this 위 참고 자료를 읽어보면, 대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정됩니다. (= this는 함수를 호출한 객체) 라고 합니다. * 유튜브 별코딩님 영상을 참고했습니다. 1. 전역문맥 (함수 외부에서 this 값) console.log(this); // window 객체 if(true) { console.log(this); } // window 객체 전역적인 문맥에서 this에 접근하면 this는 window 객체로 출력된다. 1-1. 엄격모드 'use strict'; console.log(this); // window 객체 2. 함수.. 2023. 1. 28.
Vanilla JS. Light and Dark Mode * 오늘은 라이트 모드랑 다크 모드를 해보자. * input태그 하나로 누르면 라이트 모드, 다크 모드 두개를 실행하게 해볼 예정이다. .day { background-color: white; color : black; } .night { background-color: black; color: white; } * style.css 파일에 day와 night 클래스의 속성을 정했줬다. const change = document.querySelector("#change"); const body = document.querySelector("body"); //화면의 배경화면을 전체 바꿔야하니 body 태그를 불러왔다. function changeHandle () { if(change.value === "ni.. 2023. 1. 19.
CS. var, let, const의 차이점 (feat. 호이스팅) /* 오늘도 어김없이..클론코딩만 하는 나에게 이런 시련이.. 호이스팅 개념을 이해하는데 많은 시간을 썼다.. */ ps. 틀린곳도 많을거기 때문에 피드백은 항상 겸허히 받아들입니다. 변수의 선언은 var, let, const 키워드로 할 수 있으며, ES6에서 let과 const가 추가되었다. 자바스크립트에서 변수 선언은 선언 → 초기화 단계를 거쳐 수행된다. 더보기 선언 단계: 변수명을 등록하여 자바스크립트 엔진에 변수의 존재를 알린다. 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다. 왜 기존 var가 있는데, let과 const가 추가 되었을까? var, let, const에는 4가지 차이점이 있다. 1. 중복선언 가능 유무 2. 재할당 가.. 2023. 1. 18.
Vanilla JS. DropDown Menu(feat. CSS) * 오늘은 자바스크립트로 드롭다운 메뉴 만들기 도전 * 저번에 못 만들고 타협해서 셀렉트 박스로 바꿨었는데 // class에서 dropdown과 closed 2가지를 선언 DropDown ✓ 유튜브 menu 2 menu 3 menu 4 * class에서 띄어쓰기를 하면 하나의 class가 아닌 다른 class로 선언된다. body { margin: 0; font-family: Courier New; font-size: 20px; } ul { margin: 0; padding: 0; list-style-type: none; } a { text-decoration: none; color: black; } .dropdown { transition: all 0.2s ease-in-out; overflow: hi.. 2023. 1. 16.
CSS. overflow /* CSS에 관해서 이렇게 쓰게 될 줄은 몰랐다. 드롭다운 메뉴를 만들어 보기 전까지. */ overflow란, CSS 특정요소의 자식요소가 부모요소의 범위를 초과 할 때 이러한 상황을 어떠한 방식으로 처리 할지를 결정하는 속성이다. 속성 값으로는 visible, hidden, scroll, auto 등이 있다. 자식요소가 부모요소의 범위를 초과할 때 어떻게 처리 할 지를 결정해야하기 때문에 부모요소에 overflow 속성을 지정해야한다. 1. overflow : visible - overflow의 값을 visible로 사용 할 경우 특정요소가 부모의 범위를 넘어가더라도, 그대로 보여준다. 2. overflow : hideen - overflow의 값을 hidden으로 설정하면, 부모요소의 범위를 넘어.. 2023. 1. 15.
Vanilla JS. D-day calculator (feat. flexible) * 저번에 배운 고정된 날짜 값에 대한 디데이 계산을 토대로 입력 값에 대한 디데이 계산기를 만들어보았다. 디데이 계산기 // 계산된 디데이 값이 나오기 전까지 안보이게 .hidden { display: none; } * 계산된 디데이 값이 나오기 전까지 안보이게 클래스값을 줘서 css display로 출력이 안되게 숨겨두었다. const main = document.querySelector("#main"); const title = document.querySelector(".title") const select = document.querySelector(".select"); function mainHandle(event) { const Hidden = "hidden"; event.preventDef.. 2023. 1. 13.

티스토리툴바