text-shadow 적용하기

html의 텍스트를 강조하기 위한 스타일로 text-shadow를 사용할 수 있다. text-shadow : none | text-shadow : text-shadow : hi // css .hi { text-shadow: 1px 1px 5px red; } 참고 자료 : https://developer.mozilla.org/ko/docs/Web/CSS/text-shadow text-shadow - CSS: Cascading Style Sheets | MDN text-shadow CSS 속성은 텍스트에 그림자(shadow)를 추가합니다. 텍스트와 그 장식에 적용 할 쉼표로 구분 된 그림자 목록을 허용합니다. 각 그림자는 요소, 흐림 반경 및 색상의 X 및 Y 오프셋 조합으로 developer.mozilla..

• format_list_bulleted JavaScript
• · 2022. 11. 3.
• textsms

간단한 calc() 사용하는 법

calc는 css함수로 css 속성값에 계산식을 지정할 수 있게 해준다. 더하기, 빼기, 곱하기, 나누기 연산이 가능하다. 연산자 좌우에 공백이 필요하다. 0으로 나누면 HTML 구문분석기에서 오류가 발생한다. 곱셈과 나눗셈에는 피연산자에 하나 이상의 숫자가 있어야 한다. 중첩해서 사용할 시 내부의 calc()은 ()로 취급된다. width: calc(50% - 8px); scss에서 calc 내부에 변수를 넣고 싶다면, #을 사용해야 한다. $len: 8px; width: calc(50% - #{$len});

• format_list_bulleted JavaScript
• · 2022. 11. 1.
• textsms

forEach와 async await (for of 사용하기)

🥝 forEach는 promises를 기다리지 않기에 async await 구문 역시 동작하지 않는다. const setTimeoutPlus = (num1, num2) => { return new Promise((resolve, reject) => { try { setTimeout(() => { resolve(num1 + num2); }, 3000); } catch (e) { reject("ERROR", e); } }) } const asyncForEachFuc = (data) => { let tmp = []; console.log("start", tmp); data.forEach(async function(element,index,array){ tmp.push(await setTimeoutPlus(el..

• format_list_bulleted JavaScript
• · 2022. 10. 29.
• textsms

FormData 객체, Blob 객체

FormData 객체는 서버로 바이너리 데이터를 전달할 때 사용될 수 있다. Blob 객체는 파일 데이터를 저장할 수 있다. 클라이언트에 바이너리 데이터를 저장할 때, blob 객체에 저장할 수 있다. 서버에서 바이너리 데이터를 받기 위해서는 responseType을 blob으로 설정할 필요가 있다. const obj = {hello: 'world'}; const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'}); const url = window.URL.createObjectURL(blob); // 파일을 다운로드하는 url 서버에서 blob 타입으로 파일을 받아 해당 파일을 다운로드하는 URL을 생성할 수도 있다...

• format_list_bulleted JavaScript
• · 2022. 10. 26.
• textsms

자바스크립트 깊은 복사 structuredClone()

Object.assign()과 spread operator, slice()를 사용한 복사는 얕은 복사이다. 깊은 복사를 위해서 JSON.parse, JSON.stringify를 사용할 수 있으나 한게점이 있다. JSON.parse, JSON.stringify를 사용하면, 객체 내부의 함수 등 일부 타입의 데이터가 소실될 수 있다. 이런 문제점을 해결하는 새로운 문법이 structuredClone이다. const a = [1, 2, 3]; const b = [...a]; console.log(a, b); // [1, 2, 3] [1, 2, 3] const c = {a: "a", b: "b", c: "c"}; const d = {...c}; console.log(c, d); // { a: "a", b: "b..

• format_list_bulleted JavaScript
• · 2022. 10. 25.
• textsms