전체 글
[CSS] 사용자 지정 CSS 속성 (custom properties)
사용자 지정 CSS 속성 (custom properties) CSS에 직접 변수를 만들어 사용할 수 있다. 장점 반복되는 CSS 값을 변수화 하면 일괄적으로 변경할 수 있다. 속성 값에 의미를 부여하기 때문에 코드를 이해하기 쉬워진다. 선언 변수명은 --로 시작하며 뒤에 어떠한 이름이든 올 수 있다. 대소문자를 구분한다. --bg-color와 --Bg-color는 서로 다른 속성으로 취급된다. 어느 곳에서나 사용할 수 있게 하려면 :root에 정의한다. 특정 선택자에 변수를 선언하면 변수를 정의한 요소와 그 하위 요소에서 그 변수를 사용할 수 있다. :root { --main-bg-color: brown; } element { --bg-color: brown; --Bg-color: black; } 사용 ..
[JavaScript / ES6] 화살표 함수 (Arrow function)
Arrow function (화살표 함수) 화살표 함수는 function 키워드 대신 화살표 =>를 사용하여 보다 간략한 방법으로 함수를 선언하는 방법이다. 문법 기본 문법은 다음과 같다. // function let func = function(arg1, arg2, ...argN) { return expression; }; // arrow function let func = (arg1, arg2, ...argN) => expression 인수가 하나밖에 없다면 인수의 괄호는 생략할 수 있다. // function let double = function(n) { return n * 2 } // arrow function let double = n => n * 2; 인수가 없을 땐 빈 괄호를 사용한다. 다..
[Javascript] classList 메서드 종류 (remove, add, item, toggle, contains, replace)
Element.classList classList의 다양한 메서드를 통해 클래스를 간편하게 제어할 수 있다. classList 자체는 읽기 전용 프로퍼티지만 add()와 remove() 메서드를 이용하여 변형할 수 있다. 메서드 먼저 foo 클래스를 가지는 div 상수를 만들고 시작한다. const div = document.createElement('div'); div.className = 'foo'; console.log(div) // 1. remove() 지정한 클래스 값을 제거한다. 존재하지 않는 클래스를 제거해도 에러를 발생시키지 않는다. div.classList.remove("foo"); // 2. add() 지정한 클래스 값을 추가한다. 추가하려는 클래스가 이미 존재한다면 무시한다. div...
[JavaScript] 템플릿 리터럴 (Template literals)
Template literals (템플릿 리터럴) 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 이전 버전의 ES2015 명세서에는 "template strings" (템플릿 문자열)라고 불렸다. 익숙해지면 굉장히 편리한 문법이다! 핵심 기능 여러 줄 표현 문자열에 변수, 표현식 삽입 사용 방법 이중 따옴표"", 작은 따옴표'' 대신 백틱(backtick)``을 이용한다. 물결(~)과 같은 키 버튼이다. 변수나 표현식은 $와 중괄호를 통해 표기한다. - ${var}, ${a + b} 여러 줄 표현 normal strings console.log('string text line 1\n' + 'string text line 2'); [ES6] template literals console.lo..
[HTML] 데이터 속성 (data attribute)
데이터 속성 (data attribute) HTML5가 도입되면서 HTML 태그 내에 데이터를 저장하거나 CSS, JavaScript로 값을 간단하게 가져올 수 있게 되었다. HTML 문법 앞에 data-만 붙인다면 어떠한 키워드든 올 수 있다. data-key, data-color, data-id... CSS에서 접근 article[data-color="blue"] { color: blue; width: 50%; } JavaScript에서 접근 let article = document.getElementById('electriccars'); article.dataset.color // "blue" article.dataset.indexNumber // "12314" article.dataset.pare..
[JavaScript] 자주 사용하는 DOM API 정리
DOM (Document Object Model) 브라우저는 웹 문서를 로드한 후, 파싱하여 DOM을 생성한다. DOM은 모든 요소, 속성, 텍스트를 객체로 만들어 이 객체들을 부자 관계에 따라 트리 구조로 구성한 것을 의미한다. 정적인 웹페이지를 변경하는 유일한 방법은 DOM을 변경하는 것이며, 이때 필요한 것이 DOM API이다. DOM tree 구성요소 문서 노드(Document Node) - 최상위 트리이자 접근의 시작점이다. 요소 노드(Element Node) - HTML 요소를 표현한다. 속성 노드(Attribute Node) - HTML 요소의 속성을 표현한다. 텍스트 노드(Text Node) - HTML 요소의 텍스트를 표현한다. 자식을 가질 수 없다. DOM API DOM을 통해 웹페이지..