코딩기록

document.querySelector('.modal').addEventListener('scroll', function() { document.querySelectorAll('.video_wrap video').forEach(function(video) { const videoHeight = video.clientHeight; //비디오 높이 const videoTop = video.getBoundingClientRect().top - videoHeight; if (videoTop -(videoHeight + videoHeight / 2)) { // 여유사이즈 동영상 높이의 절반 video.play(..

기존 스와이퍼 설정const studentGroupSlide = new Swiper('.swiper-container', { slidesPerView: "auto", spaceBetween: 0, pagination: { el: ".swiper-pagination", clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }});  하지만 나는 슬라이드가 여러개고 같은 슬라이드라 설정을 여러번 해주고 싶지 않다..swiper-container 를 querySelectorAll로 선언해서 반복문으로 설정해봤지만 실패!방법을 찾다가 발견했다. 멀티 스와이퍼 설..

어제 range 커스텀을 했는데 더 간단한 방법을 찾았잖아...!완전 럭키비키..🍀    그라디언트로 조절하는 방법완전 천재 만재

input range를 커스텀 하려고 한다.인풋 버튼이 인풋 밖으로 튀어나오지 않으면 css만으로도 가능하지만여차저차해서 테스트로 만들어봤다. 이미지 보통  .range_fill 인풋 색깔 채워주기 위해 만들었다. .state_image { transition: .2s all; background: salmon; width: 40px; height: 40px; text-indent: 100%; white-space: nowrap; overflow: hidden;}.emotion_state.bad .state_image {background: skyblue;}.emotion_state.good .state_i..

제어문 1. 블록문 { var foo = 10; } : 0개 이상의 문을 중괄호로 묶은 것. 2. 조건문 : 불리언 값으로 평가될 수 있는 표현식 (if … else문 , switch 문) if … else 문 : 단순한 값이면 상항연산자 사용하는 것이 좋음. : 만약 if문의 조건식이 불리언 값이 아닌 값으로 평가되면 js 엔진에 의해 암묵적으로 불리언 값으로 강제 변환 switch문 : 주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case문 : if … else 문은 논리적 참, 거짓으로 실행할 코드블록을 결정한다면 switch문은 다양한 상환(case)에 따라 실행할 코드블록을 결정할 때 사용. var month = 11; var monthName; switch(month) { case..

연산자 표현식을 대상으로 산술, 비교 등을 수행해 하나의 값을 만듦. 이 때 연산의 대상을 피연산자라 함. 피연산자는 값으로 평가될 수 있는 표현식 1. 산술 연산자 : 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자값을 만듦. 산술이 불가능한 경우 NaN을 반환 이항 산술 연산자 : 어떤 산술 연산을 해도 피연산자의 값이 바뀌는 경우는 없고 언제나 새로운 값을 만든다. 5 + 2; 5 - 2; 5 * 2; 5 / 2; 5 % 2; 단항 산술 연산자 : 1개의 피연산자를 산술 연산하여 숫자 값을 만듦. ++, -- → 피연산자의 값을 변경하는 부수 효과가 있음. (위치에 따라 의미가 다름) +, - → 부수효과 없음. var x = 5, result; result = x++; console.log(..

5장 표현식과 문 1. 값 표현식이 평가되어 생성된 결과 평가: 식을 해석해서 값을 생성하거나 참조하는 것을 의미 10 + 20 //30 //10 + 20 은 평가되어 숫자 값 30을 생성 2. 리터럴 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법 //숫자 리터럴 3 3 리터럴은 문자(숫자, 알바벳, 한글 등) 또는 기호(’’, “”, // 등) 로 표기한 코드 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값을 생성 즉, 리터럴은 값을 생성하기 위해 미리 약속된 표기법 숫자 리터럴 3을 코드에 기술하면 자바스크립트 엔진은 이를 평가해 숫자 값 3을 생성한다. 3. 표현식 표현식은 값으로 평가될 수 있는 문. 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조 리터럴..

3장은 실행 방법이어서 점프했다. 4장 변수 10 + 20 사람은 계산과 기억을 모두 두뇌에서 하지만 컴퓨터는 연산과 기억을 수행하는 부품이 나뉘어져 있다. 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다. (컴퓨터 10 + 20 계산) 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체. 메모리 셀하나 크기는 1바이트(8비트) 컴퓨터는 메모리 셀의 크기, 즉 1바이트 단위로 데이터를 저장하거나 읽는다. 각 셀은 고유의 메모리 주소를 갖는다. 이 주소는 메모리 공간의 위치를 나타냄. 예제의 10과 20은 메모리 상의 임의의 위치(메모리 주소)에 기억(저장)되고 CPU는 이 값을 읽어 들여 연산을 수행. 결과 값인 30도 메모리 상의 임의의 위치에 저장된다. (편의상 10진수로 표현..

자바스크립트를 제대로 공부하려면 꼭 봐야한다는 자바스크립트 딥다이브.. 두께가 어마어마해서 스터디를 구해 들어갔지만 스터디장이 날랐다. 그치 인생은 마이웨이니까 일단 시작! 1장 프로그래밍 프로그래밍이란? 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션 0과 1밖에 알지 못하는 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업이며, 그 결과물은 코드 문제 해결 방안을 고려할 때 컴퓨터의 입장에서 문제를 바라봐야 한다. (컴퓨팅 사고) 예) 사람: 소리를 키워라 > 컴퓨터: 소리를 60으로 키워라 프로그래밍 언어 - 컴퓨터가 쓰는 말(기계어)는 너무 어렵다. 그래서 사람이 이해할 수 있도록 번역기(컴파일러 or 인터프리터)를 돌려서 보여주는 것. - 구문과 의미의 조합으로 표현된다. ..

제목이 굉장히 길어졌지만 내가 보려고 남기는 자바스크립트 1. 문자열 메소드 *indexOf, includes function hasCola(str) { if (str.indexOf("콜라") > -1) { console.log("금칙어가 있습니다."); } else { console.log("통과"); } } function hasCola(str) { if (str.includes("콜라")) { console.log("금칙어가 있습니다."); } else { console.log("통과"); } } hasCola("사이다가 짱"); //통과 hasCola("콜라가 최고"); //금칙어가 있습니다. hasCola("콜라"); //금칙어가 있습니다. - "콜라"가 있으면 0보다 크고 "콜라"가 없으면 -..