link 속성 :link 방문하지 않은 링크 :visited 이미 방문한 링크 :hover 링크에 마우스 포인트럴 올려 놓았을때 (mouseover) :active 링크를 클릭하는 순간 보여지는 속성 코드

text 속성 속성 설명 color 텍스트의 색상을 지정 direction 텍스트가 쓰이는 방향을 설정 letter-spacing 텍스트 내에서 문자 사이의 간격을 설정함 word-spacing 텍스트 내에서 단어 사이의 간격을 설정함 text-indent 단락의 첫 줄을 들여쓰기할지 안 할지를 설정 text-align 텍스트의 위치를 설정 text-decoration 텍스트에 효과를 설정 (밑줄, 윗줄, 가운데줄) text-shadow 텍스트에 그림자 효과를 설정 text-transform 글자를 대문자 또는 소문자로 바꾸는 설정 예제코드 [class=p1] Hello World1 [class=p2] Hello World2 [class=p3] Hello World3 [class=p4] Hello Wor..

CSS? ( Cascading Style Sheet ) HTML, XHTML, XML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어. 즉, HTML로 문서가 단순히 집을 만드는 과정이라면, CSS는 HTML 문서의 인테리어, 페인팅하는 작업이라고 생각하면 된다. 문자의 컬러, 종류, 형태 지정, 배경화면 설정, 이미지 지정, 테두리 넣기 등등.. 각종 tag에 이미지 형태 라인 형태로 설정 p tag p 태그 입니다 id=p1 h3 태그 입니다 id=p1 p 태그 입니다 class=cls h3 태그입니다 class=cls p tag p 태그 입니다 id=p1 h3 태그 입니다 id=p1 p 태그 입니다 class=cls h3 태그입니다 class=cls CSS 적용하는 방법 태그명 접근 "태그..

예제코드 1 json의 경우 xml과는 다르게 단순하게 .(dot)을 통해서 접근이 가능하다. options의 경우처럼 여러개의 value가 있는 경우 배열의 인덱스를 통해서 접근이 가능하다. 예제코드 2 번호제목(title)저자(author)가격(price) book.json [ { "title":"자바의 정석", "author":"남궁성", "price":30000 }, { "title":"모던 자바스크립트 Deep Dive", "author":"이응모", "price":45000 }, { "title":"하루 10분 SQL", "author":"한상일", "price":24000 }, { "title":"지쳤거나 좋아하는 게 없거나", "author":"강한별", "price":13500 }, { ..

JSON ( Java Script Object Notation ) JSON 그 자체는 단순히 데이터 포맷일 뿐이다. 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법이다. "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식 JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 적다. XML을 대체해서 데이터 전송 등에 많이 사용 된다. JSON은 데이터 포맷팅중 하나이며, 데이터를 표시하는 표현 방법이다. Client(Ajax) Server(java) Json ArrayList,HashMap .... Json 은 key와 valu..

예제코드 XML문서 1 홍길동 서울시 2020/03/23 2 성춘향 남원시 2021/01/31 3 일지매 부산시 2019/07/11 let xhttp = new XMLHttpRequest(); 통신 하기 위해서는 객체가 필요하다 순서 함수 -> open -> send -> 함수 요청 readyState : 진행 상태 0 -> open 메소드를 수행하기 전 상태 1 -> loading 중..... 2 -> loading 완료 3 -> Server 처리중 4 -> Server 처리 완료 status : 상태 200 -> 성공(success) 403 -> 접근금지 404 -> 없음. 못찾는 경우. ex) test.txt가 없는 경우 500 -> 구문에러(문법 에러) responseText 다 읽었을때 txt를..

참고 : https://developer.mozilla.org/ko/docs/Web/API/DOMParser

XML (EXtensible Markup Language) 데이터를 설명하는 태그(Tag)를 사용자 마음대로 정의할 수 있다. XML은 HTML과 비슷한 문자 기반의 마크업 언어 이다. 하지만 명백한 차이가 있다. XML은 다른 시스템끼리 다양한 종류의 데이터를 손쉽게 교환할 수 있도록 해주며, 새로운 태그를 만들어 추가해도 계속해서 동작하므로 확장성이 좋다. XML은 텍스트 데이터 형식의 언어로 모든 XML 문서는 유니코드 문자로만 이루어진다. XML의 목적 HTML처럼 데이터를 보여주는 목적이 아닌, 데이터를 저장하고 전달할 목적으로만 만들어졌다. XML의 목적 = 데이터 저장, 데이터 전달.. XML vs HTML XML은 데이터를 전달하는 데에 포커스를 맞춘 언어 HTML은 데이터를 표현하는 데에..

hello world i can do it Never change my mind Nodelist document.getElementsByTagName('p')를 통해서 모든 p태그를 배열로 반환을 받아서 배열의 길이만큼 반복하여 모든 p태그의 배경색을 변경해보는 예제이다. hello world i can do it Never change my mind Nodelist

DOM? (Document Object Model) 각 tag를 접근하기 위한 object, 그 object를 접근하기 위한 함수들 Document = 문서 -> 문서안의 tag에 접근하도록 만들어진 Object Object = 객체 문서 객체 모델 DOM은 HTML, XML 문서의 프로그래밍 interface이다. DOM은 문서의 구조화된 표현(Structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕니다. DOM은 구조화된 nodes와 property와 method를 갖고 있는 object로 문서를 표현한다. getElementById() - id 속성을 가진 요소를 찾고, 이를..