GPD2021

Element.addEventListener('이벤트명:String', 콜백함수:Function()); 이벤트명은 아래에 자세히 나와있다. https://developer.mozilla.org/ko/docs/Web/Events 이벤트 참조 | MDN 이벤트 참조 DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 developer.mozilla.org 콜백함수는 이벤트가 발생했을 때 실행하고 싶은 함수명을 쓰면 된다. let layerBtn= document.querySelector('#btn'); let closeBtn= document.querySelector('.close'..

html과 css 로 대충 뼈대만 잡고 자바스크립트 작성하면서 조금씩 채워넣기로 했다. html css 구성할 때 내가 중요하게 생각한 것은 쓸모 없는 태그 안 만들기 한 번 쓰는 거는 id . 여러 번 쓰는 거는 class 쓸모 없는 태그를 만들지 않는 건 여렵지 않은데 필요한 태그를 만들지 않은 게 나중에 좀 문제가 되었다. 이 단계에서는 어떤 영역에 대한 이름을 짓는 거라 별로 안 어려웠다. 그런데 자바스크립트 들어가면서부터 갑자기 뭔가 html 구조가 마음에 안들어서 싹 갈아 엎을까?? 한 시간정도 고민하다가 그냥 하기로 했다. 뭐가 마음에 안들었던건지는 기억이 안난다. 자바스크립트 작성하면서 제일 귀찮았던 건 이름 짓는 거였다. 함수 이름이나 변수 이름이나 관련있는 것으로, 이름만 보면 이게 뭐..

아이디 엘리먼트에 label을 붙여준다고 생각하면된다. for 속성을 이용해서 연결하고 싶은 엘리먼트의 아이디와 연결한다. label 부분에 작성된 텍스트인 아이디를 클릭해도 인풋박스를 클릭한 것과 같은 효과를 줄 수 있다. 모든 사람들이 웹에 쉽게 접근할 수 있도록 해준다.

자식선택자 : ">" 선택자1>선택자2{ } : 선택자 1의 하위요소인 선택자2를 선택 자손선택자: " " 선택자1 선택자2{ } :선택자 1에 들어있는 모든 선택자2를 선택 , 자식과 자손의 차이를 생각하면 됨. 인접선택자: "+" 선택자1+선택자2{ } : 선택자 1 옆에 있는 선택자2를 선택. 선택자1의 동생인 선택자2를 선택. 그룹선택자:"," 선택자1, 선택자2{ } : 선택자1과 선택자2 모두를 선택 전체선택자: "*" *{ } : 모든 요소를 선택. 보통 margin:0; padding:0;을 줄 때 사용. 선택자1 *{ } : 이렇게 쓰면 선택자1의 모든 자식요소에 해당 속성을 부여할 수 있다.

뚝딱 만들면 될 줄 알았는데 생각보다 어렵다. 메인페이지를 헤더 메인 풋터로 나누고 메인을 5개의 섹션으로 나눴다. 일단 큰 그림은 그렸으니까 헤더나 풋터, 각 섹션에 들어갈 하위 요소들은 만들면서 생각하자는 마음으로 임했다. 제일 만들기 쉬운 풋터나 헤더를 만들고 css를 입히고, 다음 섹션으로 넘어갔다. 그런데 이렇게 하다보니 각 섹션을 만들 때마다 구조의 일관성이 없이 생각나는대로 만들게 되서 필요없는 div를 계속 추가로 만들게 된다. 싹 엎고 다시해야겠다. 우선 html을 전부 작성한 다음에 css로 넘어가야겠다.

var: 구식. let : 변수를 선언할 때 사용, 사용한 위치에 따라 사용 범위가 달라짐. const: 변하지 않는 값, 상수를 선언할 때 사용. var는 과거의 문법이니까 앞으로는 let과 const를 사용.

숫자 카운터. 0부터 99까지, 숫자가 증가되는 모습이 화면에 출력. 99

@keyframes 을 추가로 만들기 싫어서 이미 만들어 놓은 거에 animation-direction: reverse; 썼다가 헤멨다. 그냥 @keyframes 추가해주자. javascript는 이상이 없는데 여기서 문제를 찾으려다가 시간을 많이 썼다. 개발자 도구 콘솔창에 문제가 없다면 요소창에 가서 css를 살펴서 문제를 발견할 수도 있다. 그냥 @keyframes 추가해주자. 그런데 여기서 var sIndex=0; autoslide=setInterval(slider,2000); function slider(){ li=document.querySelectorAll('.box> li'); onNum = sIndex+1; if(onNum==li.length){ onNum=0;} for(i=0; i