팡팡

마우스로 스크롤을 내리면 위치는 유지되면서 페이지만 자연스럽게 넘어가도록 구현하였다. 여러 방법들을 접해보고 있는 중이다. See the Pen pXeXor by pangpangman (@pangpangman) on CodePen.

flex 를 적극 이용하여 구현 하였다. See the Pen qzrGoK by pangpangman (@pangpangman) on CodePen.

모든 수업내용 자료는 tcpschool의 자료임을 밝힙니다. 이벤트 리스너(event listener) 이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러(event handler)라고도 합니다. 지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킵니다. 이벤트 리스너 등록 작성된 이벤트 리스너는 먼저 해당 객체나 요소에 등록되어야만 호출될 수 있습니다. 객체나 요소에 이벤트 리스너를 등록하는 방법은 다음과 같습니다. 1. 이벤트의 대상이 되는 객체나 요소에 프로퍼티로 등록하는 방법 2. 객체나 요소의 메서드에 이벤트 리스너를 전달하는 방법 객체나 요소에 프로퍼티로 등록하는 방법 객체나 요소에 프로퍼티로 이벤트 리스..

모든 수업내용 자료는 tcpschool의 자료임을 밝힙니다. HTML DOM을 이용하면 HTML 요소의 내용(content)이나 속성 값 등을 손쉽게 변경할 수 있습니다. HTML 요소의 내용을 변경하는 가장 쉬운 방법은 innerHTML 프로퍼티를 이용하는 것입니다. 즉 js로 HTML 내용을 수정할수있다는 말이 된다. 바로 해보자. See the Pen RmXLKW by pangpangman (@pangpangman) on CodePen. 변수 str 에 document.ElementById("text"); 을 이용하여 id 가 text 인 요소에서 string 값을 가져온 후 str.innerHTML 을 이용하여 string 내용을 바꿔주었다. 다음으로 href 속성 값 또 한 바꿀 수 있습니다. ..

전 시간까지는 각 개별적으로 사용할 수 있는 1. HTML 태그 이름(tag name)을 이용한 선택 --> document.getElementsByTagName("TYPE"); 2. 아이디(id)를 이용한 선택 --> document.getElementById("TYPE"); 3. 클래스(class)를 이용한 선택 --> document.getElementsByClassName("TYPE"); 4. name 속성(attribute)을 이용한 선택 --> document.getElementsByName("TYPE"); 을 배웠다. 위의 메서드는 개별적으로 사용할수 밖에 없다는 단점이 있다. 하지만 querySelectorAll() 은 다르다. querySelecto메서는 CSS 선택자(아이디, 클래스, ..

모든 수업내용 자료는 tcpschool의 자료임을 밝힙니다. DOM 요소의 선택 HTML 요소를 다루기 위해서는 우선 해당 요소를 선택해야만 합니다. 자바스크립트에서 특정 HTML 요소를 선택하는 방법은 다음과 같습니다. 1. HTML 태그 이름(tag name)을 이용한 선택 2. 아이디(id)를 이용한 선택 3. 클래스(class)를 이용한 선택 4. name 속성(attribute)을 이용한 선택 5. CSS 선택자(selector)를 이용한 선택 6. HTML 객체 집합(object collection)을 이용한 선택 본격적으로 javascript을 이용하여 어떻게 html 요소와 css 요소에 접근할 수 있는지에 대해 공부해보겠다. HTML 태그 이름(tag name)을 이용한 선택 getEle..

Document객체에 접근하기. 모든 수업내용은 Tcpschool 자료인 것을 밝힙니다. Document 메서드 Document 객체는 HTML 요소와 관련된 작업을 도와주는 다양한 메서드를 제공합니다. - HTML 요소의 선택 - HTML 요소의 생성 - HTML 이벤트 핸들러 추가 - HTML 객체의 선택 => javascript에서 css 요소 또는 html 요소에 접근하기 위해서는 document메서드를 이용해야 한다. HTML 요소의 선택 HTML 요소를 선택하기 위해 제공되는 메서드는 다음과 같습니다. 메서드 설명 document.getElementsByTagName(태그이름) 해당 태그 이름의 요소를 모두 선택함. document.getElementById(아이디) 해당 아이디의 요소를 선택..

190429 기준 진격의 거인 3기 2 쿨이 시작되었습니다. 대박.. 이에 여기에서 감명받고 얼마 전에 유튜브에서 공부한 hover를 응용하여 페이지를 만들어보겠습니다. 처음에는 인간일 때 모습을 보여주고 마우스가 올라갔을 때 해당하는 거인으로 변신한 모습이 보이도록 해주겠습니다. See the Pen pmXwdv by pangpangman (@pangpangman) on CodePen. HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 ..