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

결과 스타일 변경 초기화 기능을 추가 Font Awesome 아이콘은 fontawesome 위 사이트를 통해 받아왔다. 코드 [ timer.html ] 00:00:00 [ style.css ] 간단한 배치와, 크기만 설정해 주었다. .timer-box { display: flex; flex-direction: column; align-items: center; margin-top: 125px; } .timer { font-size: 60px; margin-bottom: 30px; transition: all 1s; } .timer-form__Btn { display: flex; flex-direction: row; justify-content: center; text-align: center; paddi..

개발 동기 타이머 어플을 사용하여 공부 시간을 측정하고 있는데, 배우고 있는 JavaScript를 통해 타이머를 직접 만들고 싶다는 생각이 들어서 만들게 되었다. 계획 매초 1씩 증가하는 타이머 기능을 만들 예정이다. 버튼(button)을 이용하여 타이머의 시작, 정지, 초기화 기능을 나타내 줄 예정이다. 타이머 기능 let TIME = 0; // 타이머 실행 버튼 function startButton() { updateTimer(); stopButton(); setInterval(updateTimer, 1000); // 매 초당 updateTimer 반복 } //... 생략 // 타이머 증가 함수 function updateTimer(){ const hours = Math.floor(TIME/3600)..