프론트엔드(8)
-
[바닐라js로 그림판 만들기] Changing Color
Html 태그에서 각 컬러들에 class를 추가한다. (jsColor) const colors = document.getElementsByClassName("jsColor"); 이것을 자바스크립트에서 가져오고 console.log(colors)해보면 배열이 아니라 HTMLCollection인 것을 알 수가 있는데, HTMLCollection은 HTMLCollection은 리턴 결과가 복수인 경우에 사용하게 되는 객체다. 유사배열로 배열과 비슷한 사용방법을 가지고 있지만 배열은 아니다. console.log(Array.from(colors)); 그러므로 HTML Collection을 array로 바꿔주는 코드를 넣는다. Array.from()은 유사배열을 배열처럼 만들어주는 것이다. Array.from(c..
2021.01.28 -
[명품 웹프로그래밍] Open Challenge 08 겜블링 게임 웹 페이지 만들기
겜블링 게임 각 숫자를 클릭하면 0에서 2사이의 난수로 바뀝니다. 모두 같은 수가 나오면 승리합니다. 0 0 0 문제에 나와있는 기능말고 내가 직접 더 추가해보았다. 처음 숫자가 0으로 세팅되어 있는데 클릭을 했는데도 만약 0이면 이게 클릭이 된건지 아닌지 잘 모르겠어서 클릭이 안 된 숫자는 파란색, 이미 클릭된 숫자는 노란색으로 표시하게 했고 클릭 횟수를 나타내는 변수를 지정하여 한 숫자는 한 번만 클릭이 가능하도록 두번째 클릭부터는 alert 창이 뜨도록 했다. 그리고 각각의 숫자들은 나란히 정렬해야 하므로 div 안에 span으로 놓을 수도 있었지만,CSS에서 flex를 배웠던게 생각나서 한 번 사용해 보았는데 justify-content를 space-around를 통해 간격을 예쁘게 잘 줄 수 있..
2021.01.19