반응형

lang 502

Web Component 를 만드는 모든 방법 - 2021-11-18

All the Ways to Make a Web Component - Nov 2021 Update web components base libraries - @open-wc 컨텐츠용 디자인 웹컴포넌트 라이브러리 Content Component Libraries - @open-wc const template = document.createElement('template'); template.innerHTML = ` - +`; class MyCounter extends HTMLElement { constructor() { super(); this.count = 0; this.attachShadow({ mode: 'open' }); } connectedCallback() { this.shadowRoot.appe..

lang/front 2021.11.18

Build a Website Accessibility Tester With JavaScript & Pa11y

Node.js 웹 접근성 테스트 도구 npm i express pa11y # index.js const pa11y = require('pa11y') async function run() { const response = await pa11y('https://bluebreeze.co.kr') console.log(response) } run() $ node index.js { documentTitle: 'Blue Breeze', pageUrl: 'https://bluebreeze.co.kr/', issues: [ { code: 'WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.InputText.Name', type: 'error', typeCode: 1, message: 'Thi..

lang/node 2021.11.10

css 가상 클래스(Pseudo classes), 가상 엘리먼트(Pseudo Elements)

가상 클래스 :active 사용자가 요소를 활성화 (예 클릭) 일치합니다. /* 활성화된 모든 `` 태그를 선택 */ a:active { color: red; } :active 가상 클래스는 대개 , 과 함께 사용합니다. 다른 흔한 대상으로는 활성화된 요소를 포함한 다른 요소와 연결된 로 선택한 입력 폼 요소 등이 있습니다. :active 가상 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 가상 클래스(:link, :hover, :visited)가 덮어씁니다. 링크를 적절히 디자인하려면 LVHA-순서(:link — :visited — :hover — :active)를 따라, :active 규칙을 다른 모든 링크 규칙들보다 뒤에 배치하세요. 참고: CSS3 명세에 따르면 ..

lang/css 2021.10.16

javascript: 교집합(Union), 합집합(Intersection), 여집합(difference, minus)

ECMAScript 6 sets: union, intersection, difference [itertools — Functions creating iterators for efficient looping](https://docs.python.org/3/library/itertools.html] Union let a = new Set([1,2,3]); let b = new Set([4,3,2]); let union = new Set([...a, ...b]); // {1,2,3,4} Intersection let a = new Set([1,2,3]); let b = new Set([4,3,2]); let intersection = new Set( [...a].filter(x => b.has(x))); //..

lang/node 2021.01.21

Javascript Promise

Promise MDN: Promise Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다. Promise는 다음 중 하나의 상태를 가집니다. 대기(pending): 이행하거나 거부되지 않은 초기 상태. 이행(fulfilled): 연산이 성공적으로 완료됨. 거부(rejected): 연산이 실패함. 생성자 Promise() 이미 프로미스를 지원하지 않는 함수를 감쌀 때 주로 사용합니다. 속성 Promise.length 값이 언제나 1인 길이 속성입니다. (생성자 인수의 수) Promise.prototype Promise 생성자의 프로토타입을 나타냅니다. 메서드 Promise.all(iterable) iterable 내의 모든 프로미스가 이행한 뒤 이행하고, 어떤 프로..

lang/js 2021.01.04

Element.scrollIntoView()

Element.scrollIntoView() Element.scrollIntoView() Syntax element.scrollIntoView(); element.scrollIntoView(alignToTop); // Boolean parameter element.scrollIntoView(scrollIntoViewOptions); // Object parameter Parameters alignToTop Optional Value: Boolean true: default 요소의 상단이 스크롤 가능한 상위 항목의 표시 영역 상단에 정렬됩니다. scrollIntoViewOptions: {block: "start", inline: "nearest"}. false 요소의 하단이 스크롤 가능한 상위 항목의 표시..

lang/js 2020.11.06
반응형