코딩기록

혼자 해보려고 했지만 대실패,, 코드 받아쓰기에 현타가 와서 자바스크립트를 좀 더 공부한 다음에 챌린지에 도전하기로 함..

순서대로 첫 번째부터 하려했지만 오디오 파일이 안나와서 두 번째부터 시작 //html 12 3 6 9 //css .hand 시계바늘에 있는 transition을 삭제했다ㅜㅠ 원래 무소음 시계로 만드려고 움직임을 부드럽게 했다가 강력새로고침 할 때마다 0도에서 돌아오는 것 때문에 포기. 그냥 초침 효과만 주려고 transition을 넣었는데 0초가 되면 바늘 위치가 이상해지는 오류가 난다. 그래서 일단 삭제.. 나중의 내가 고쳐보기로 //js const hoursHand = document.querySelector('.hours'); const minutesHand = document.querySelector('.minutes'); const secondsHand = document.querySelecto..

자바스크립트 공부를 위해 이것저것 알아보던 중 좋은 사이트를 발견했다. https://javascript30.com/ JavaScript 30 Build 30 things with vanilla JS in 30 days with 30 tutorials javascript30.com 사이트로 들어가면 간단한 이메일 가입을 통해 강의를 볼 수 있으며 깃허브도 존재한다. 근데 강의는 영어자막밖에 없어서 감안하고 봐야함.. 노마드코더 js강의를 듣고 다음은 어떤 강의를 들어야할까 고민했는데 예제 영상과 파일까지 있어서 혼자 연습해보기 딱일듯 파일을 보면 한 챌린지당 start와 ficished파일이 있는데 start파일에서 자바스크립트를 추가해서 finished파일을 만들어보면 될 듯 하다.

1."따옴표 사용했을 때" const name = "Alice"; const greeting = "Hello, " + name + "!"; console.log(greeting); // 출력값: "Hello, Alice!" 2. `백틱 사용했을 때` const name = "Alice"; const greeting = `Hello, ${name}!`; console.log(greeting); // 출력값: "Hello, Alice!" - `` 백틱을 사용하면 코드를 더 간결하게 쓸 수 있고 html작성할 때의 구조로도 작업 가능함. 예제는 gpt에서 가져옴,,

요즘은 var를 권장하지 않는다. var를 사용하면서 발생하는 문제점 ​ 1. 상수인지 변수인지 구분이 안된다. ​ 2. 변수는 let으로 사용한다. var a = "1"; var a = "10"; var는 위에서 1이라고 정의했어도 아래에서 10이라고 재정의가 가능해 스크립트 오류가 발생할 확률이 높다. 3. scope의 차이 var x = 1; if (true) { var x = 2; console.log(x); // 출력값: 2 } console.log(x); // 출력값: 2 let x = 1; if (true) { let x = 2; console.log(x); // 출력값: 2 } console.log(x); // 출력값: 1 var는 블록문 안에서 선언되었어도 밖에서 참조할 수 있고 let이..

같은 레벨 간의 통신 v-on:pass="deliverNum" / v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메서드 이름" - root로 데이터 10을 보냄 v-bind:propsdata="num" / v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름" - app-content -> root를 통해 데이터 10을 받음 *root를 통해 데이터 전달받기 var appHeader = { template: 'header', props: ['propsdata'] } var appContent = { template: 'contentpass', methods: { passNum: function() { this.$emit('pass', 10); } } } new Vue({ el: ..

v-bind v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름" v-bind는 html의 속성인 id, class, style 등에 대해 model의 데이터를 연결할 때 사용된다. v-bind는 전달인자로 연결하려는 속성을 지정해주면 되고 편의상 v-bind는 생략하고 사용하기도 한다. -> root에 있는 데이터가 app-header와 app-content에 들어가게 함 v-on v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메서드 이름" -> vue 이벤트 창에서 확인 가능 -> add 버튼을 누르면 data의 num이 1씩 증가 {{ num }} var appHeader = { template: 'Click me', methods: { passEvent: function..

▶HTML EventHandler - if(elName.value.length < 5) //요소. 입력내용. 글자 수 elMsg.textContent = '이름은 5글자 이상 써주세요!'; : 사용자 이름 5글자 이하일 때 경고창 뜸. ▶다른방식 매개변수 추가 IE 구버전 ▶커서 포커스 - 화면이 로드될 때 자동으로 커서가 움직임.

▶form_출석체크 - A.append(b); //부모요소A에 자식 요소를 추가 (마지막 부분) - A.prepend(b); //부모요소A에 자식 요소로를 추가 (첫번째 부분) - A.before(B); //A요소의 바로 앞에 B를 추가 - A.after(B); //A요소의 바로 뒤에 B를 추가 - A.insertbefore(B); //A요소의 바로 앞에 B를 추가 - A.insertafter(B); //A요소의 바로 뒤에 B를 추가 ▶form_약관동의 - all.onclick = function(){ terms1.checked = this.checked; terms2.checked = this.checked; } : 모든 약관 동의 - overflow: auto; : 영역 안의 글자 자동으로 스크롤 생..

▶애니메이션 배너 만들기 - 배너에 들어가는 애니메이션 이미지들 각각의 위치지정 해줌. - 애니메이션에 들어가는 세미콜론(;) 잘 확인해야함 . 작동하지 않음. - opacity 값을 주어 투명했다가 진해지는 효과를 넣어줌.