1. forEach forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행 [return value는 없음] 배열의 각 요소에 대해 실행. 중간에 break 문을 사용할 수 없음. 종료를 위해선 throw(예외)를 발생시켜야 함. 구문 arr.forEach(callback(element[, index[, array]])[, thisArg]) element : 처리할 현재 요소. index : 처리할 현재 요소의 인덱스 (= 현재 element의 index값). array : forEach를 호출한 배열. thisArg : callback을 실행할때 this로 사용되는 값. 예제 const array = [1,2,3,4,5]; const result1 = array.forEach((eleme..

서론 JavaScript 이용해서 HTML 상에 Font Awesome 아이콘 나타내기 몇 번의 삽질과 미리 경험해보시고 정보를 남겨주신 분들이 있어서 쉽게 해결할 수 있었다. 방법 1. const icon = document.createElement("i"); icon.innerHTML = '' 방법 2. const icon = document.createElement("i"); icon.setAttribute("class","far fa-trash-alt"); 참고자료 https://breathtaking-life.tistory.com/26 [JavaScript] (해결) 동적으로 font awesome 아이콘 추가하기 나는 쇼핑목록 앱을 만들고있다. TO DO LIST처럼 쇼핑할 물건들을 적는 리스..

HTML 태그를 나누고 배열하는데 여러 번 헤매었던 것 같다. 상단 메뉴만 만드는 것은 생각보다 쉬웠는데, 메뉴 안에 하위 메뉴를 출력하려하니 HTML 코드가 이상하게 되어있는 것 같아서 코드를 여러 번 수정했다. [ HTML ] Home Sports Home Sports Food Items Setting Food Home Sports Food Items Setting Items Setting HTML에서 사용된 icon은 Font Awsome에서 받아왔다. https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. Mo..

HTML draggable="true" 속성을 사용해서 드래그를 가능하도록 하고 정해진 div에서 이동이 가능하도록 만들어 보았다. [ HTML ] [ CSS ] body { background-color: rgba(0, 0, 0, 0.3); } .fill { background-image: url("http://source.unsplash.com/random/100x100"); position: relative; height: 100px; width: 100px; top: 5px; left: 5px; cursor: pointer; } .empty { display: inline-block; height: 110px; width: 110px; margin: 10px; border: 3px solid rg..

클릭 시 변경되는 슬라이더를 만들어 보았다. [ HTML ] 1 2 3 4 5 6 6개의 슬라이더 공간(item)을 설정해 주었다. [ CSS ] body { padding: 0; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; } .slider { display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 40px; } .slider__item { width: 80%; height: 300..

[ HTML ] Open Modal --Modal-- Close Open Modal 버튼을 눌렀을 때 Modal이 나오도록 할 것이다. background는 modal창 배경 부분을 나타내고 content는 modal 창 내부를 나타낸다. [ CSS ] body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; margin: 0; padding: 0; display: flex; justify-content: center; } button { all: unset; background-color: mediums..