Programming/Javascript91 [Javacript] 스타일 시트 접근 지난번 포스트들까지 해서 자바스크립트에서 html문서에 접근했습니다. 보통 구조를 구성하는 html위에 스타일 시트를 덧씌워서 우리 눈에 보기 좋도록 디자인을 하게됩니다. 그래서 우리는 이번 포스트에서 스타일 시트에 접근하여 디자인을 바꾸는 방법들을 살펴보려고 합니다. 1. style 첫 번째 방법은 style 프로퍼티를 이용하는 방법입니다. style프로퍼티는 스타일을 인라인 형식으로 넣어줍니다. 인라인 형식은 다음과 같이 요소 태그 내부에 스타일을 추가하는 방법입니다. 초록색 그리고 style 프로퍼티의 이용법은 다음과 같습니다. 요소.style.속성 = "속성 값" 요소에 style 프로퍼티를 넣고 속성과 속성값을 집어넣으면 완성되는 형태를 가졌습니다. 만약 속성 값이 없는(의 readonly같은 .. 2021. 3. 31. [Javascript] 노드 변경과 삭제 이번에는 노드를 변경할건데, 특정 노드를 지정하고 그 노드의 자식노드를 교체하고 삭제하는 방법입니다. 1. 노드 교체 - replaceChild 이름에서 느껴지듯이 자식 노드를 교체해주는 메소드입니다. 요소.replaceChild(변경해줄 노드, 변경하는 노드);//(after, before) 사용법은 여태 나온 메소드들과 유사합니다. 첫번째 인자로 교체해줄 노드를 적고, 두번째 인자로 교체시킬 자식 노드를 선택합니다. 이때 주의점은 반드시 변경하는 노드는 지정된 노드의 자식 노드여야만 합니다. 2. 노드 삭제 - removeChild 이번에는 노드를 삭제하는 메소드입니다. 이때도 마찬가지로 지정한 노드의 자식 노드만 삭제할 수 있습니다. 요소.removeChild(삭제할 노드); 참고로 removeCh.. 2021. 3. 30. [Javascript] 노드 추가하기 이전 포스트들에서 계속해서 자바스크립트에서 html의 요소에 접근하는 방법들을 다뤘었습니다. 이번에는 자바스크립트 파일에서 요소들을 추가하는 방법을 다뤄볼려고 합니다. 1. 노드 생성 - create~ 메소드 노드를 생성하는 create~ 메소드 입니다. 이 메소드는 추가하려는 노드에 따라 create뒤에 붙는 접미사가 달라집니다. 주의해야하는 점은 단순히 노드를 추가하는 기능만 하기 때문에 따로 명시적으로 추가하는 과정을 거쳐야 합니다. 우선 create~메소드들은 다음과 같습니다. create~메소드 메소드가 생성하는 노드 createElement(요소) 요소 createAttribute(속성) 속성 createTextNode(텍스트) 텍스트 createComment(텍스트) 주석 이 외에도 crea.. 2021. 3. 29. [Javascript] 폼 요소 접근 html 요소들을 접근 하는 방법들을 알아왔는데 그 중에서 폼(form) 요소에는 접근하는 방법이 또 따로 있습니다. 폼은 사용자로부터 직접 정보를 입력받는 공간이기때문에 따로 관리하면 편해지는 것이죠. 폼에 대한 설명은 이포스트에서 따로 다루지 않고 여기서는 접근법만 다루도록 하겠습니다. 2020.08.24 - [Programming/HTML,CSS] - [HTML] 폼 태그 1, 폼 요소 태그들 - 1 2020.08.25 - [Programming/HTML,CSS] - [HTML] 폼 태그 2, 폼 요소 태그들 - 2 2020.08.27 - [Programming/HTML,CSS] - [HTML] 폼 요소 3, 폼 요소의 속성들 2020.08.27 - [Programming/HTML,CSS] - [H.. 2021. 3. 26. [Javascript] 속성 값 다루기 지난 포스트에서 노드를 취득했다면 이번에는 취득한 노드의 속성을 다루어볼려고 합니다. 0. 요소 노드의 속성명으로 접근하기 제일 기초적인 방법이자 직관적인 방법입니다. 바로 요소의 속성명을 프로퍼티로 접근하는 방법인데요 . 예를 들면 요소에는 href라는 링크를 지정하는 속성이 있습니다. 이 태그로 예시를 들며 설명해나가겠습니다. let linkA = document.getElementBtId('myBlog'); let url = linkA.href;//로 취득하거나 linkA.href = "";//로 설정하기 이처럼 속성의 이름을 가지고 직접 접근할 수 있습니다. 직관적이지만 주의할점이 있는데요. 몇몇 키워드의 혼용으로 인해 속성명이 일치하지 않는 경우가 있습니다. 대표적으로 class인데요. clas.. 2021. 3. 25. [Javascript] 이벤트 우리가 웹 페이지에 들어가면 보통 클릭을 하거나, 마우스 커서를 올리거나 하는 행동을 합니다. 이처럼 웹 상에서 일어나는 상황들을 이벤트라고 합니다. 그리고 대다수는 이 이벤트가 발생함에 따라 처리를 실행하게 됩니다. 1. 클라이언트측 이벤트 자바스크립트는 클라이언트측에서 프로그래밍하게 되므로 클라이언트측 이벤트를 다루게 됩니다. 이들은 다음 표로 정리할 수 있는데, 외운다기 보다는 읽어보면 당연하고, 이런 동작이 있었지 정도로 이해해도 충분합니다. 분류 이벤트 이름 이벤트 설명(이벤트가 발생) 페이지 읽기 abort 이미지의 로딩이 중단되는 경우 load 페이지+이미지의 로딩이 완료된 경우 unload 다른 페이지로 이동 키 조작 keydown 키를 누름 keypress 키를 누르고 있음 keyup 키.. 2021. 3. 24. 이전 1 ··· 3 4 5 6 7 8 9 ··· 16 다음 300x250
