코딩기록

나는 드롭다운으로 지역을 선택하는 것을 만들고 싶었다.셀렉트박스를 커스텀할 수 있는 방법을 찾아보다 리액트 셀렉트를 발견 대한민국 행정구역 파일도 찾으면 있을 거라 생각해서 json을 찾았다가 변수로 정의된 코드를 찾았음.export const AREA0 = ['전체', '서울', '인천', '대전', '광주', '대구', '울산', '부산', '경기', '강원', '충북', '충남', '전북', '전남', '경북', '경남', '제주'];export const AREA1 = ['강남구','강동구','강북구','강서구','관악구','광진구','구로구','금천구','노원구','도봉구','동대문구','동작구','마포구','서대문구','서초구','성동구','성북구','송파구','양천구','영등포구','용산구'..

기존 스와이퍼 설정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로 선언해서 반복문으로 설정해봤지만 실패!방법을 찾다가 발견했다. 멀티 스와이퍼 설..

원래 chart.js 에서 함수를 직접 작성해가면서 기능을 추가했는데기존 네 영역에도 색을 주고호버하면 색을 또 주고클릭하면 또 주고..코드가 길어질 것 같아서 html 객체를 생성했다.  11번 탭탭탭 22번 탭탭탭 3번 탭탭탭 4번 탭탭탭 .background도 영역 나누기 .chart { position: relative; width: 700px;}.background { width: calc(100% - 47px); height: calc(100% - 61px); left: 27px; ..

데이터는 0 ~ 100으로 들어가지만 위아래 여백을 주고 싶어서 +- 10씩 해줬다.   const ctx = document.getElementById('myChart');const dataValues = [75, 25, 50, 0, 100];// 이미지 아이콘const imageUrls = [ './emoji_0.png', './emoji_25.png', './emoji_50.png', './emoji_75.png', './emoji_100.png',]const images = imageUrls.map(url => { const img = new Image(25, 25); img.src = url; return img;});..

td에 boder-bottom이 있는 상황에서tr을 호버했을 때 tr에 테두리를 주고 싶었다.어떻게 하나 찾아보니 역시 방법은 있다. outline   을 이용하면 된다.   See the Pen table tr hover border by _홍시 (@wlcbybsd-the-sasster) on CodePen.offset은 간격 조절하려고 넣어줬음.

어제 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. 표현식 표현식은 값으로 평가될 수 있는 문. 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조 리터럴..