Mong dev blog

개발 기술/사소하지만 놓치기 쉬운 개발 지식87

border-radius 50% vs 100%
1. border-radius 50% vs 100% 우리는 border-radius: 50%를 지정하여 원을 만들 수 있다. 그런데 타인의 코드를 보면 50%, 100% 등 2가지를 다양하게 쓰고 있다. 그렇다면 border-radius: 50%, 100%의 차이는 무엇일까? (1). 원을 만들 때 차이 첫번째 div에는 border-radius: 50%, 두번째 div에는 100%를 지정해보았다. 아래 결과를 보면 알 수 있듯이 둘 다 원의 모습을 띤다. See the Pen border-radius difference by KumJungMin (@kumjungmin) on CodePen. (2). 모서리 별로 다르게 적용할 때 차이 한 모서리에만 border-radius를 줘서 부채꼴을 만들어보자. ..
2021. 9. 12.
객체 배열, autocomplete 미작동, 이벤트 제어, input 디자인 제거
이번 시간에는 css, js를 둘 다 소개하고자 한다! 1. 객체 배열에서 특정 조건에 해당하는 요소 얻기 2. autocomplete="off"가 안 먹힐 때 3. safari에서 기본 input 디자인 제거하기 4. css로 이벤트 제어하기 이 들에 대해 알아보자~ 1. 객체 배열에서 특정 정보 얻기 (1). 객체 배열이요? 객체 배열은 객체를 요소로 가지는 배열을 의미한다. ([{ }, { }, { }])const sample = [{id: 1, name: 'hello1'}, {id: 2, name: 'hello2'}]; 그런데 이 객체 배열에서 조건에 해당하는 객체 요소를 가져올 수는 없을까? 당연히 있닭!🐥 (2). 조건에 해당하는 요소는 어떻게 가져오나요? 만약, ..
2021. 9. 12.
js 코드를 더 짧게 써보자
이번시간에는 js 코드를 짧게 쓸 수 있는 방법을 알아보고자 한다! 순서는 아래와 같다 :) 1. 다중 OR 조건문을 짧게 2. 다중 AND 조건문을 짧게 3. null, undefined, '' 체크를 짧게 4. 조건별 함수 호출도 짧게 5. 숫자 형변환을 짧게 6. 반복문을 짧게 1. 다중 OR 조건문을 짧게 써보자 만약 name이 juna, herry, sona 중 하나인지 알아보려고 한다. 하나의 방법으로 아래처럼 다중 or(||) 조건문을 사용할 수 있을 것이다. if (name === 'juna' || name === 'herry' || name === 'sona') { // code } 하지만 이 다중 or 조건문! 이쁘지도 않은데 한..
2021. 9. 12.
캔버스로 둥근 모서리 만들기
canvas태그를 사용하면 선, 면, 원 등 여러가지를 만들 수 있다. 그렇다면 모서리가 둥근 사각형은 어떻게 만들 수 있을까? 이번 시간에는 quadraticCurveTo를 사용하여 둥근 모서리를 만들어보자! 1. quadraticCurveTo? 둥근모서리 사각형을 만들기에 앞서, quadraticCurveTo에 대해 간단히 알아보자. quadraticCurveTo는 2차 곡선을 만들 때 사용하는 함수이다. 조절점을 기준으로 끝점이 (x,y)인 베지어 곡선을 그린다. quadraticCurveTo을 사용하면 둥근 사각형을 만들 수 있다. 2. 둥근 모서리를 위한 규칙 width(너비), height(높이), radius(둥근모서리), x&y(시작점) 변수가 있다. 이 변수를 사용하여 오른쪽 둥근 모서리..
2021. 9. 12.
input에 입력된 숫자에 콤마 찍기
1. 숫자에 콤마를 넣고 싶어! input창에 숫자를 입력하면 콤마 없이 나타난다. 하지만 숫자를 입력했을 때 셋째 자리마다 콤마를 찍고 싶을 때가 있다.1234567890 //일반 1,234,567,890 //콤마 추가 어떻게 하면 숫자에 콤마를 추가할 수 있을까? 대부분 알려진 방법은 정규식으로 콤마를 추가하는 방법이다! 하지만 오늘은 toLocaleString를 사용해보자~ 2. toLocaleString는 무엇인가요? toLocaleString는 숫자를 지역별 포맷으로 반환한다.(문자열로 반환) 또한, 원본을 변경하지 않는다. 이 속성에는 여러 인자가 있는데, 아래 표를 살펴보자! 인자 설명 예시 ko-KR 셋째자리에 콤마 추가 "3,540,000" cs-CZ 셋째자리에 띄어쓰기 추가 "3 540..
2021. 9. 12.
특정 길이의 배열 가져오기, 가변인자 받기, console.table 등
이번 시간에는 - 1. 원하는 길이의 배열만 가져오기 - 2. js에서 가변 인자를 받는 법 - 3. console값을 테이블 형태로 받기 - 4. 빈값을 가지는 배열 만들기 1. 원하는 길이의 배열만 가져오기 : 만약 아래와 같은 배열이 있다고 해보자. : 이때 여러분이 안, 녕, 하 만 담은 배열을 원한다면 어떻게 할 수 있을까 : 첫번째 방법으로 array.slice(start [,end])가 있다. const array2 = ['안', '녕', '하', '세', '요', '!']; const slicedArr = array2.slice(0, 3); console.log(slicedArr); //['안&#3..
2021. 9. 12.
gif hover 재생 이벤트 만들기
1. gif에 재생 이벤트를...? 얼마전? 아니 얼마전도 아니고 바로 어제, gif 재생 이벤트가 필요했다. 하지만 gif가 계속 재생되는 게 아니라, 마우스가 hover했을 때만 재생되어야 했다! 물론 mp4를 넣어서 hover할 때 재생시간을 조절하면 되지만, gif가 더 가벼우니까 🙂 아니 그런데 gif에서 재생(?)이라는 개념이 있나..? 엥!?!??? 🤔🤔🤔 아무튼, gif의 재생시간을 조절할 수는 없지만 여러가지 꼼수(?)는 있다고 한다. 검색을 해보니, 공통적으로 정적 이미지와 gif가 필요했고, 정적이미지와 gif를 겹쳐야 했다. (1) 방법1, class 추가하기 첫 번째 방법은 mouseenter 했을 때, class를 추가하는 방식이 있었고, (2) 방법2, 투명도 변경하기 또 다른..
2021. 9. 12.
배열판별법, JSON.parse, padStart, querySelector 성능
이번 시간에는 - 1. 배열 판별법 - 2. JSON.parse를 하지 않아도 되는 경우 - 3. padStart로 특정 문자열 붙이기 - 4. 객체에 바로 키 값 객체 넣기 - 5. querySelector와 getElementById의 성능에 대해 알아보자! 1. array(배열) 판별하기 : 작업을 하다보면, 이 데이터가 배열인지 확인해야할 때가 있다. : 한 예로 slice()함수는 배열에서만 실행되는 함수이므로,배열이 아니면 실행시키면 안된다. const variable = 어떤 형태의 값; // 배열에서만 실행되는 함수 if(배열이라면) return variable.slice(1, 2); 그렇다면 typeof를 이용해 배열인지 판별하면 되지 않을까? : 안타깝게도 js에서는 array, obj..
2021. 9. 12.
객체 배열를 다루는 방법
객체를 담은 배열에 요소 추가하기 이번 시간에는 [{}, {}, {}]에 객체요소를 추가하는 법을 알아보자 1. 배열, 객체에 요소 추가하는 법 배열에 요소 추가하기 : 배열에서는 push 혹은 인덱스에 접근해 요소를 추가할 수 있다. let array = []; array.push(1); //push하는 경우 array.push(2); array[2] = 4; //인덱스로 접근해 추가하는 경우 console.log(array) 객체에 요소 추가하기 : 객체에 요소를 추가할 때 obj.key, obj['key']를 사용해 추가할 수 있다. let obj = {}; obj['hello'] = {id:1, name: 'hoho'}; obj.bye = {id:2, n..
2021. 9. 12.

티스토리툴바