🔥 Web

[JavaScript] Event Handler 사용하기

Event Handler는 HTML Tag에 Event를 주는것과, JavaScript에서 Event Handler를 설정하는것으로 크게 두 분류로 나뉘어 져 있습니다. HTML Tag에 Event를 주는 것은 이전에 onClick Event를 사용하며, 공부를 했으니 이론적인것만 간단히 짚고 JS에서 Event Handler를 설정하는걸 알아보겠습니다. 일단 웹 브라우저에서 발생하는 Event종류는 4가지로 나뉩니다. form Event, window Event, mouse Event, key Event로 이루어져 있는데 말 그대로 form Event는 form 내부에 어떠한 변화가 일어났을경우(submit 버튼을 누르는경우)이고, window Event는 웹 페이지가 로드가 완료되며 발생하는 이벤트,..

[JavaScript] Element의 추가와 삭제

우선 메소드부터 간단하게 설명 드리겠습니다. Document API document.createElement() : 문자열 인자로써 괄호안에 Tag를 입력할시, 해당 Element가 반환되게 됩니다. Element API .appendChild() : 괄호안에 입력된 Element를 호출된 Element의 자식으로 추가합니다. .removedChild() : 괄호안에 입력된 Element를 호출된 Element의 자식으로 추가합니다. .insertBefore(A, B) : 괄호안에 입력된 A Element가 B Element 바로 앞으로 추가되게 됩니다. .cloneNode() : 호출된 Element를 복사(clone)합니다. document.createElement()를 이용하여 선을 만들고 Elem..

[JavaScript] Element의 선택과 변경

Element를 선택하는 방법은 getElement 메소드를 사용해서 선택을 할 수 있습니다. getElementBy~ 는 단일 Element를 선택하는 방법이고, getElementsBy~ 는 다중 Element를 선택하는 방법입니다. 다중 Element를 찾는 방법에는 아래 5가지가 있습니다. 우선 id를 이용하여 단일 Element를 찾는 방법을 해보겠습니다. getElement 메소드는 인자로써 태그의 id를 전달할 경우 해당 element가 반환이 되게 됩니다. 콘솔 창에서 getElementById를 이용하여 찾아보겠습니다. 처음에 document에 있는 poet이란 Id를 검색하였을때, poet의 코드가 나오게 됩니다. 이것을 변수 x에 저장을 한 후, 안에 들어있는 Text를 검색하였을때,..

[JavaScript] DOM이란?

DOM이란? Document Object Model 의 약자입니다. 컴퓨터가 문서를 잘 처리할 수 있도록, 문서의 구조를 약속한 것입니다. DOM은 Tree 형태를 따르고 있습니다. Document Object는 JavaScript에서 document로 접근이 가능하며, 부모, 자식 노드를 확인 할 수 있습니다. 위의 사진을 보시면, Tree 형태를 띄고있는 DOM을 보여 주는데, html 코드와 tree 형태를 띄고 있는 사진과 상당히 유사한 구조를 가지고 있습니다. 위 사진은 html DOM Tree를 보여줍니다. 태그 안의 element, attribute 등 나와있는데 이해 안가실수도 있으니, 코드로 직접 확인해 보겠습니다. 우선 저번에 작성했던 코드로 예를 들겠습니다. 우선 가장 상위 오브젝트인..

[JavaScript] CSS 란? CSS 다루기

css란? Cascading Style Sheet HTML 문서의 요소가 어떻게 표시될지 정의 즉, 간단히 HTML로 이루어진 웹 페이지를 디자인하고 꾸미는 것입니다. JavaScript에서 태그 안에는 항상 JavaScript가 와야한다. 라는 약속처럼 css에서는 style="" 안에는 항상 css가 와야한다. 라는 약속이 있습니다. 그리고 style을 적용할 element를 선택 해야합니다. tag, id, class를 선택할 수 있습니다. 그럼 코드에서 확인해 보겠습니다. 여행 명언이고 마음에 와닿는말이라 써보았습니다. 현재 html로 코딩되어있고, 이것을 조금 더 css를 이용하여 꾸며보겠습니다. 현재 실행 화면입니다. 저는 첫번째로 css 사용을 링크 참조를 이용해 외부에서 파일을 들여오는 방..

[JavaScript] Console 창 사용법, window 객체

콘솔 창이란? 크롬 웹브라우저를 기준으로 웹 브라우저 실행 후 F12를 누르면 나오는 개발자 툴에 있는 바로 웹 페이지에 적용할 수 있게 만들어져 있는 도구입니다. 저희는 오늘 Javascript를 에디터를 사용하지 않고 콘솔을 이용해 바로 웹 페이지에 적용을 해보겠습니다. 아래 사진에서는 콘솔창에 코드를 입력하여 웹페이지의 변화를 보는 사진입니다. 저희는 콘솔창을 이용해 보다 수월하게 웹 페이지의 변화를 줄 수 있습니다. 두번째로 window 객체입니다. window 객체는 JavaScript를 실행 했을시 가장 상위의 객체입니다. 예를들어 변수를 선언하거나, 함수를 선언할 시 모두 window 객체 안에 선언이 됩니다. 또한 상위 객체이기 때문에, html, css에도 보다 쉽게 접근이 용이합니다. ..

[JavaScript] script 태그, event 주기

JavaScript는 웹 페이지에서 사용할 수 있는 유일무이한 프로그래밍 언어입니다. 또한 웹에 기초하기 때문에 html과의 밀접한 관련이 있습니다. JavaScript의 가장 큰 요소는 사용자와 상호 작용을 한다는 것입니다. 사용자의 반응에 따라 결과값이 달라집니다. 웹 페이지는 실행이 될경우, 스스로 변화를 주지 못합니다. 하지만 JavaScript는 html를 제어하는 언어이기 때문에, 웹 페이지에 변화를 줄 수 있습니다. CSS는 웹 페이지를 좀 더 꾸미고, 디자인에 치우쳐 있다면, JavaScript는 웹 페이지를 좀 더 사용자에게 최적화시키고, 동적으로 만들어 줄 수 있다고 생각 할 수 있겠습니다. JavaScript는 정적인 웹 페이지를 동적으로 만들어 줍니다. 웹 페이지는 HTML, CSS..

[HTML] HTML <Video> 태그, <Table> 태그

태그란?? html의 태그는 html5에서만 지원이 되는 태그입니다. mp4, webm, ogg의 세가지 확장자가 지원되며, 사용법은 아래와 같습니다. 태그에는 여러 속성이 있습니다. autoplay, controls, height, loop, muted, width, src..등등 이중 몇가지만 보도록 하겠습니다. 1. Autoplay autoplay는 비디오가 로드 될 경우 자동으로 시작되도록 하는 속성입니다. 2. Controls controls 속성은 동영상에 재생, 볼륨조절, 전체화면, 뒤로가기등 창을 띄울수 있게됩니다. 3. loop loop 속성은 비디오를 반복해서 재생하는 속성입니다. 4. src src 속성은 페이지에 삽입할 동영상의 주소를 나타냅니다. 5. widght, height 동..