GPD2021

#banner>ul>li.fadein{ animation: fadein 3s; } @keyframes fadein{ from{ opacity:0; } to{ opacity: 1; } } animation 다수의 스타일을 전환하는 애니메이션을 적용. animation 속성 /* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */ animation: 3s ease-in 1s 2 reverse both paused slidein; /* @keyframes duration | timing-function | delay | name */ animation: 3s lin..

저번에 만든 이미지 슬라이드에서 버튼으로 setinterval을 켜고 끌 수 있게 하는 기능을 추가해봤다. 버튼을 만들고 isStop = true; function onoffInterval(){ if(isStop==true){ isStop=false; x=setInterval(changelist,500); } else{ isStop=true; clearInterval(x); } } boolean타입 변수와 함수를 만들었다. 최초 isStop은 true다. 버튼을 누르면 onoffInterval 함수가 실행된다. onoffInterval은 제일 먼저 if-else문을 통해 isStop이 true인지 false인지 검사한다. 검사 결과 isStop은 true이기 때문에 if문 안의 내용이 실행된다. 우선 실..

https://poiemaweb.com/js-array

https://developer.mozilla.org/ko/docs/Web/API/Node Node 여러 가지 DOM 타입들이 상속하는 인터페이스이며 그 다양한 타입들을 비슷하게 처리할 수 있게 한다. 예를 들어, 똑같은 메서드를 상속하거나 똑같은 방식으로 테스트를 할 수 있다 Node 속성 element.childNodes 주어진 노드의 자식 노드를 배열로 반환한다. 배열의 항목은 개체 element.firstChild 첫 번째 자식 노드를 반환 element.lastChild 마지막 자식 노드를 반환 Node.nextSibling 부모 노드의 childNodes 목록에서 지정된 노드 바로 다음에 있는 노드를 반환. 지정된 노드가 해당 목록의 마지막 노드면 null 반환. 다음 형제 노드 반환. Nod..

오늘 수업 막바지에 이미지 슬라이드 만들었다. 우선 이미지를 준비했다. 고양이, 소, 여우, 쥐 사진이름 붙이기 쉽게 알파벳 3개짜리 동물을 찾아봤다. 그런데 쥐 사진은 좀 귀여워서 mouse로 붙여줬다. html과 css는 어렵지 않게 만들었다. ul,li{ list-style: none;} #frame{ width: 500px; height: 500px; overflow: hidden; } #frame>li>img{ display: inline-block; width: 500px; height: 500px; } 그 다음 자바스크립트를 작성하면 되는데, 어떻게 해야할지 감을 못 잡아서 일단 그냥 손이 가는대로 타이핑했다. 아무렇게나 막 쓰고 지우고 해서 뭘 했는지 기억도 안 난다. 그 짧은 시간 동안 ..

Document.querySelector() : 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환한다. 일치하는 요소가 없으면 null을 반환한다. 예) document.querySelector(selectors); 여기서 selectors는 하나 이상의 선택자를 포함한 DOMstring var el = document.querySelector(".myclass"); DOMString - Web API | MDN DOMString DOMString은 UTF-16 문자열입니다. JavaScript의 String도 UTF-16 문자열이기 때문에 DOMString은 String으로 연결됩니다. DOMString을 받는 매개변수에 null을 전달하면, 보통 문자열로 변환해 "nu..

to do list 인삿말 모음 sample2 sample3 to do list 인삿말 모음 오늘 배운거 정리 to do list 하위^^ 함수 이름이 생각 안나서 정리할 겸 대충 그려봤다. 이렇게 대충 그리고 보니까 괜히 선을 그려서 포인터처럼 보인다. ㅡㅡ 참고로 java script는 call by value (포인터 같은 call by reference가 아님) 아 정리할게 많았는데 졸려서 생각이 안 난다. 내일 일찍 가서 정리해야겠다.

프로그래머스의 html을 베끼던 중에 애먹었던 사다리꼴과 삼각형. 저 진행중이라는 글씨가 적혀있는 부분이다. 경계선 border를 이용하여 사다리꼴이나 삼각형 모양을 만들 수 있다. 몇 번 쓰다보면 이해가 되는데 쉽게. 딱지 모양을 생각하면된다. #triangle{ width: 0; height: 0; border-top: 10px solid yellow; border-bottom: 10px solid red; border-left: 10px solid blue; border-right: 10px solid green; } triangle div를 생성하고, 그 크기는 0으로 맞춰주었다. 그 다음은 경계선을 사용하여 그림을 그린다. 아래는 빨간색, 좌우는 transparent를 통해 투명한 속성을 부여한..