팡팡

전 시간까지는 각 개별적으로 사용할 수 있는 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 ..

Hover를 이용하여 칵테일 느낌이 나는 페이지를 만들어보겠습니다 공부한 영상에서는 display : grid로 처리해주었습니다. 하지만 아직 grid 개념이 많이 미숙하여 flex로 처리해주었습니다. grid 공부하겠습니다. 박스 위에 마우스 커서를 올리면 박스 번호가 올라오고 아래에 CLICK ME라는 버튼이 나오도록 해주었습니다. 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 repl.it 01 Section One CSS Grid Layout is the most ..

오늘은 햄버거 버튼을 누르면 왼쪽에서 사이드바가 나오면서 햄버거 버튼도 동시에 움직이도록 하는 페이지를 만들어 보겠습니다. 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 repl.it Age never to comeback Home About Address Contact etc css 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 5..

여러 사이트에서는 체크박스를 누르면 햄버거 버튼이 X로 변하면서 사이드바가 나오는 것을 볼 수 있습니다. 오늘은 이러한 기능을 가진 페이지를 만들어 보겠습니다. 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 repl.it This is me Home About Group Age Contact In order to make ARIN Meetings the best they can be, we need the support of organizations like yours! We’re seekin..

오늘은 이와 같은 페이지를 만들어보겠습니다. 얼마 전에 유튜브로 sticky를 이용하여 홈페이지 화면을 만드는 영상을 보았습니다. 본영상을 바탕으로 최대한 비슷하게 구현해보겠습니다. wallpaper은 pixabay에 있는 사진을 이용하였습니다. 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 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 ..