홈

주제설명 html canvas를 JS를 활용하여 그림판 만들기 결과물 See the Pen by hyunwk (@hyunwk) on CodePen. JS const canvas = document.querySelector('#draw'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const ctx = canvas.getContext('2d'); ctx.lineJoin = 'round'; ctx.lineCap = 'round'; ctx.font = '100...

사용할 Array const people = [ { name: 'Wes', year: 1988 }, { name: 'Kait', year: 1986 }, { name: 'Irv', year: 1970 }, { name: 'Lux', year: 2015 } ]; const comments = [ { text: 'Love this!', id: 523423 }, { text: 'Super good', id: 823423 }, { text: 'You are the best', id: 2039842 }, { text:...

CSS 정의 특성 CSS : Cascading Style Sheets Cascading : 작은폭포처럼 연속해서 떨어지는 모습 따라서 style 적용하는 순서가 있다. Author style → .css 파일 User style → darkmode, 글자 크기 조절 브라우저에서 제공한는 스타일 Browser → Browser에서 기본적으로 지정된 스타일 순서 Auther style → User style → Broswer Auther style 이 없으면 User style에서, User style이 없으면 Browser에서 style을 찾는다. 선택자 Universal * Type ...

주제설명 fetch()를 활용하여 도시 정보 가져온 후 검색어에 해당하는 도시 목록 출력 결과물 See the Pen by hyunwk (@hyunwk) on CodePen. JS const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json'; const cities = []; fetch(endpoint) .then(blob => blob.json()) ...

주제설명 flexbox를 활용하여 확대되는 갤러리 생성 결과물 See the Pen by hyunwk (@hyunwk) on CodePen. JS const panels = document.querySelectorAll('.panel'); function toggleOpen() { this.classList.toggle('open'); } function toggleActive(e) { if (e.propertyName.includes('flex')) { this.classList.toggle('open-active'); ...

문제 설명 Programmers 문제 스파이들은 매일 다른 옷을 조합하여 입어 자신을 위장합니다. 예를 들어 스파이가 가진 옷이 아래와 같고 오늘 스파이가 동그란 안경, 긴 코트, 파란색 티셔츠를 입었다면 다음날은 청바지를 추가로 입거나 동그란 안경 대신 검정 선글라스를 착용하거나 해야 합니다. 스파이가 가진 의상들이 담긴 2차원 배열 clothes가 주어질 때 서로 다른 옷의 조합의 수를 return 하도록 solution 함수를 작성해주세요. 제한사항 clothes의 각 행은 [의상의 이름, 의상의 종류]로 이루어져 있습니다. 스파이가 가진 의상의 수는 1개 이상 30개 이하입니다. 같은 이...

1번 justify-content: flex-end; 2번 justify-content: center; 3번 justify-content: space-around; 4번 justify-content: space-between; 5번 align-items: flex-end; 6번 justify-content: center; align-items: center; 7번 justify-content: space-around; align-items: flex-end; 8번 flex-direction: row-reverse; 9번 flex-dire...

사용할 Array const **inventors** = [ { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }, { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 }, { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 }, { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 }, { first: 'Johannes', last: 'Kepler', year: 1571, passed: 16...