서론 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처럼 쇼핑할 물건들을 적는 리스..

API 풀 네임은 Application Programming Interface API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체 API는 Private API, Public API, Partner API로 분류됨 "프로그램을 위한 인터페이스" 장점 구현 방식을 알지 못해도 서비스를 사용 가능 완성된 기능을 내 코드로 불러와 사용할 수 있기 때문에 시간과 비용을 절약 API 사용을 위한 방식이 정해져 있기 때문에 표준화를 제공 역할 1. API는 Server(사용자)와 DataBase(제공자) 사이에서 연결해준다. - 정보를 제공하는 측 DB 접근 권한을 확인해줌 - 출입구 역할이랑 비슷 2. API는 기기(Device)와 애플리케이션(App) 간에 원활한 통신을 할 수 있도록 해준다. - 애플..

1. Library소프트웨어 개발 시 사용되는 프로그램의 구성요소로, 공통으로 사용될 수 있는 특정한 기능(들)의 모임이다.응용프로그램이 능동적으로 라이브러리를 사용한다 : 기능을 사용자가 원할때 불러서 사용 가능사용자의 코드 흐름을 통제하지 않는다.2. Framework- 프로그래밍에서 특정 운영 체제를 위한 응용 프로그램 표준 구조를 구현하는 클래스와 라이브러리 모임이다.응용프로그램이 수동적으로 프래임워크에 의해 사용된다 : 정해진 규칙에 따라 코딩을 해야한다.사용자의 코드 흐름을 통제한다.3. Library vs Framework Library와 Framework의 구분은 코드의 Flow(흐름)의 권한을 누가 가지고 있는지에 따라 구별이된다. Library : 내 코드상에 Library를 호출하여 ..

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..