본문 바로가기
반응형

분류 전체보기126

:focus-within :focus-within은 포커스를 받은 요소와 그 요소를 포함하는 요소까지 나타냅니다. 필드내에서 하나가 포커스 된 경우 전체를 강조하거나 접근성을 위해 tab키로 메뉴 이동시 메뉴의 하위메뉴가 계속 나타날 수 있게 해줍니다. 메뉴1 뎁스2 - 메뉴1 뎁스2 - 메뉴2 뎁스2 - 메뉴3 뎁스2 - 메뉴4 메뉴2 뎁스2 - 메뉴1 뎁스2 - 메뉴2 뎁스2 - 메뉴3 메뉴3 .depth2 { display: none; } .depth1 li:focus-within .depth2 { display: block; } jsfiddle에서 보기 jsfiddle.net/hyuckjin/vhxqtwjL/ 2020. 10. 12.
javascript 클립보드 복사 execCommand 메서드를 이용하여 클립보드에 복사를 구현할 수 있습니다. 복사 function copyToClipboard(val) { var t = document.createElement("textarea"); document.body.appendChild(t); t.value = val; t.select(); document.execCommand('copy'); document.body.removeChild(t); } const btn = document.getElementById('btn1'); btn.addEventListener('click', () => { copyToClipboard('복사된 텍스트'); alert('복사 완료!'); }); 모든 브라우저에서 호환되기 위해서 clipb.. 2020. 9. 23.
배열에서 원하는 객체 찾기 find() 메서드를 이용해 배열안에 원하는 객체를 찾습니다. find()는 일치하는 첫번째 요소만 반환해줍니다. const arr = [{ a: 1, b: 2 }, { a: 3, b: 4 }, { a: 5, b: 6 }, { a: 7, b: 8 } ]; const result = arr.find(obj => { return obj.b === 6; // { a: 5, b: 6 } }); 원하는 값을 가진 모든 객체를 반환하려면 filter()를 이용하면 됩니다. filter()는 새 배열을 만들어 리턴해줍니다. const arr = [ { name: 'string 1', value: '1,2' }, { name: 'string 2', value: '2' }, { name: 'string 2', value.. 2020. 9. 10.
AngularJS $watch $watch 메서드는 모델에 변경이 있는지 감시하고 변화가 있으면 콜백을 실행하는 메서드입니다. 아래는 간단한 예제입니다. $scope.name = ''; $scope.$watch('name', function(newValue, oldValue) { console.log('값이 ' + $scope.name + '로 바뀌었습니다!'); }, true); 'name'은 스코프에 있는 모델 변수의 이름입니다. name 이란 변수를 감시하고 싶다면 저 첫번째 파라미터에 변수명을 입력하면 됩니다. $watch가 무조건 실행되는 것을 막기위해 newValue와 oldValue를 받아 비교하여 조건을 만들어 줍니다. $scope.$watch('name', function(newValue, oldValue) { if(.. 2020. 8. 28.
Array의 메서드 some, every some some 메서드는 배열 안의 어떤 요소가 하나라도 주어진 조건을 통과하는지 테스트합니다. 하나라도 true가 있으면 수행을 중단하고 true를 리턴하고, 전체를 돌아도 true가 없으면 false를 리턴합니다. const test1 = [2, 5, 8, 1, 4].some(elem => elem > 10); // false const test2 = [12, 5, 8, 1, 4].some(elem => elem > 10); // true ... const fruits = ['apple', 'banana', 'mango', 'guava']; function checkAvailability(arr, val) { return arr.some(arrVal => val === arrVal); } check.. 2020. 8. 24.
ui-router 인증 ui-router.github.io/ng1/ UI-Router for AngularJS (1.x) The defacto standard for routing in AngularJS ui-router.github.io ui-router 는 AngualrJS의 라우팅 모듈입니다. 기본적으로 ng-route를 제공하지만 ui-router가 사실상의 표준이라고 합니다. AngularJS같은 SPA방식은 브라우저에서 라우팅 처리를 하기때문에 인증처리를 구현할 수 있습니다. 아래는 라우팅 코드 예제입니다. angular .module('APP', ['ui.router']) .config(function ($stateProvider) { var userAuth = JSON.parse(localStorage.getIt.. 2020. 8. 18.
반응형