템플릿 리터럴 // console.log(`x 값은 ${x}이고 y값은 ${y}이고 두개를 곱한 값은 ${x * y}입니다.`); 권장하지 않습니다. const x = 10 const y = 20 const result = x * y console.log(`x 값은 ${x}이고 y값은 ${y}이고 두개를 곱한 값은 ${result}입니다.`); 백틱(`)으로 감싸고, $ { example } 의 형태로 사용한다. Template literals - JavaScript | MDN 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문 developer..

단락회로평가 논리 연산자 (&& , ||) 를 사용하여 연산을 진행 할 때 좌측 식의 값에 따라 우측 식의 실행 여부를 판단하는 동작을 '단락회로평가' 라고 한다. 3항 연산자 (조건식) ? (참일 경우 진행되는 표현식) : (거짓일 경우 진행되는 표현식) const sale = true; const price = sale ? 1000 : 2000; // sale이 true이므로 1000이 price에 할당됨. console.log(price) // 1000 const value = 2500; console.log((value>5000) ? '5000 위' : '5000 아래') // 2500 > 5000 = false 이므로 5000 아래가 출력 드모르간의 법칙 드 모르간의 법칙 - 위키백과, 우리 모..

DOM / BOM DOM Document Object Model HTML 문서를 컨트롤한다. 문서 객체 모델(DOM) - Web API | MDN 문서 객체 모델(DOM)은 메모리에 웹 페이지 문서 구조를 표현함으로써 스크립트 및 프로그래밍 언어와 페이지를 연결합니다. 이때 스크립트는 주로 JavaScript를 의미하나 HTML, SVG, XML 객체를 문서로 developer.mozilla.org BOM Browser Object Model 브라우저 자체를 컨트롤한다. Window - Web API | MDN Window 인터페이스는 DOM 문서를 담은 창을 나타냅니다. document 속성이 창에 불러온 DOM 문서를 가리킵니다. developer.mozilla.org // DOM document.w..

SASS Syntactically Awesome Style Sheets 스타일시트가 점점 더 복잡해지고 유지관리가 어려워지고 있는데, sass를 사용하여 기존의 css보다 라이트하고 엄격한 관리가 가능해졌다. sass에는 변수, 네이스팅(중첩), 믹스인 등의 편리한 기능들도 포함하고 있어, 개발 시간을 단축할 수 있다는 장점이 있다. 반복되는 코드를 최소화하고, 재사용 가능한 코드들을 만드는 것이 주된 목적이라고 볼 수 있다. sass는 css로 컴파일되는 스타일 시트 확장 언어이다. sass는 웹 브라우저가 읽을 수 없으므로, 단독 사용이 불가능하기 때문에, vscode의 live sass compiler 확장을 사용하거나, node sass를 사용해서 css파일로 컴파일해야 한다. 확장자는 .sass..

input 커스텀 윈도우, 맥, IOS, 안드로이드 등 운영체제에 따라, 또 크롬, 사파리, 파이어폭스, 오페라, 웨일 등의 브라우저에 따라 input 요소를 표현하는 방식이 약간씩 차이가 있다. 이러한 차이를 없애고 일관적인 디자인을 위해서, 즉 크로스 브라우징을 원활하게 구현하기 위해서 input 요소를 초기화하고, 공통된 디자인으로 커스텀 할 수 있다. 이 글은 윈도우 환경의 크롬 브라우저에서 작성했다. 체크박스1 라디오1 input 요소를 커스텀하려면, 초기화를 해줘야 한다. input 요소는 css 속성으로 appearance: none; 을 주면 된다. appearance는 네이티브 요소의 디자인을 해제/변경하기 위해 사용하는 속성으로, 크로스 브라우징에 유용한 속성이다. 위의 input 요소..

srcset srcset은 img 태그의 속성이다. 간단하게 말해서, 브라우저에게 이미지의 선택권을 위임할 수 있다. srcset 속성을 사용하면 여러 해상도에 대응하여 브라우저가 최상의 이미지를 로딩하는데 도움을 줄 수 있다. x 서술자 x 서술자는 화소의 밀도에 따른 이미지를 렌더링 하도록 브라우저에게 알려준다. 크롬 브라우저 개발자 도구에서 콘솔창을 열고, window.devicePixelRatio 명령어를 입력하면 사용자의 화소 밀도를 알 수 있다. 위의 코드에서, 2x는 이 화소 밀도가 2일때를 뜻하고 3x는 화소 밀도가 3일때를 뜻한다. 그리하여 위 코드를 해석해보면 화소 밀도가 2일때 logo_1.png, 3일때 logo_2.png, 그외에는 src값인 a.png를 브라우저가 선택하여 보여주..