반응형 분류 전체보기126 :is() 와 :where() CSS에 선택자 구문이 추가되었습니다. :is() 와 :where()로 선택자들을 그룹화할 수 있습니다. :where(header, main, footer) p { color: blue; } section :is(.title, .content) { background: #999; } button:is(.focus, :focus) { border: 2px solid green; } 이 둘의 차이점은 명시도의 차이입니다. :where()는 명시도가 없지만 :is()는 선택자의 명시도를 따라갑니다. :is()-styled links Here is my main content. This contains a link. Here is my aside content. This also contains a link. .. 2022. 5. 2. package-lock.json npm을 사용하면 package.json, package-lock.json 파일이 생깁니다. package-lock.json 파일은 node_modules나 package.json파일을 수정하면 생성되는 파일입니다. package-lock파일은 node_module이나 package.json이 수정되는 경우 생성되거나 업데이트되면서 당시의 의존성에 대한 정보를 가지고 있습니다. 같이 협업을 할때 package.json만 커밋하고 package-lock.json을 커밋하지 않는다면 반대쪽 사람이 npm install을 할때 일부 버전이 다르게 설치되어 오류가 발생할겁니다. 그러므로 package-lock.json 파일도 저장소에 같이 커밋을 해줘야합니다. 2022. 4. 4. 코딩테스트 - 신규 아이디 추천 https://programmers.co.kr/learn/courses/30/lessons/72410 코딩테스트 연습 - 신규 아이디 추천 카카오에 입사한 신입 개발자 네오는 "카카오계정개발팀"에 배치되어, 카카오 서비스에 가입하는 유저들의 아이디를 생성하는 업무를 담당하게 되었습니다. "네오"에게 주어진 첫 업무는 새로 programmers.co.kr function solution(new_id) { const answer = new_id.toLowerCase() .replace(/[^a-z0-9-_.]/gi, '') .replace(/[.]{2,}/gi, '.') .replace(/^[.]|[.]$/gi,'') .padEnd(1, 'a') .slice(0, 15) .replace(/^[.]|[.]$/.. 2022. 3. 7. Broadcast Channel API BroadcastChannel API는 동일한 출처의 다른 창,탭,iframe 간에 통신할 수 있는 API입니다. BroadcastChannel API로 브라우저의 다른 탭에서 현재 사이트를 열었는지 확인하거나, 사용자가 로그인하거나 로그아웃할때와 같이 동일한 출처 내의 다른 탭에서 사용자의 작업을 감지할 수 있습니다. Broadcast Channel API는 호스트가 다르면 작동하지 않습니다. https://www.abc.com/ https://abc.com/ 창 중 하나가 시크릿 모드이거나 여러 브라우저에서 (예: Firefox에서 Chrome으로)브로드캐스트 채널이 작동하지 않습니다. const bc = new BroadcastChannel('my-site'); bc.onmessage = (even.. 2022. 3. 3. js없이 자동완성 만들기 js없이 HTML의 를 이용해 자동완성 기능을 제공해 줄 수 있습니다. 의 list와 의 id를 동일하게 맞춰야합니다. 2022. 1. 18. MutationObserver로 DOM 변화 감지 MutationObserver 는 DOM의 변화를 감시합니다. 특정 Node를 target으로 정해 observe 함수를 실행하여 감시하다가 해당 target에 변경이 일어나면 대상 node의 변화된 정보를 가져옵니다. // 대상 node 선택 const target = document.getElementById('id'); // 감시자 인스턴스 만들기 const observer = new MutationObserver(mutations => { mutations.forEach(m => { console.log(m); }); }); // 감시자 설정 const config = { attributes: true, childList: true, characterData: true } // 감시 시작 obse.. 2021. 12. 7. 이전 1 2 3 4 5 6 7 8 ··· 21 다음 반응형
