목록front (32)
Coding Planet
1. DOM(Document Object Model)이란? HTML(웹문서, 웹페이지) 문서를 객체 기반으로 표현한 것이다. HTML을 객체 기반으로 표현함으로써 프로그래밍이 용이해진다. (불러오기 등등) DOM의 객체 구조는 '노드 트리'라고도 불린다. HTML 문서에 작성된 내용을 트리구조(계층형으로 표현)로 나타냈을 때 각각의 태그, TEXT, COMMENT 등을 Node라고 한다. 아래와 같은 트리 구조를 띄고 있다. 2. Node와 Element의 차이 Node: 태그(요소 노드), 속성, 주석, 내용(텍스트 노드)를 모두 표현 Element: Node의 하위 개념으로 요소 노드만을 표현한다. 즉, 속성, 주석, 내용은 해당하지 않는다. 3. Node 탐색방법 1) 부모 Node 탐색 요소.pa..
1. JSON(Java Script Object Notation, 자바스크립트 객체 표기법)이란? JSON은 데이터 오브젝트를 전달을 하기위한 텍스트 형식의 개방형 표준 포맷이다 즉, JavaScript 객체를 텍스트화 시킨 것이다. 예시) JS 객체 : {"memberID":"user01", "memberPw":"pass01", "age":20} JSON 문자열: '{"memberID":"user01", "memberPw":"pass01", "age":20}' 2. 왜 JSON이 필요할까? JSON은 매우 간단한 형식을 가지고 있다. 괄호{} 내에 key:value 쌍으로 구성 {"key":value}되어 있다. 이 때, key는 반드시 문자열이다. value는 String, Number, Boolea..
1. 객체(요소) 삽입 메서드 1) 선택자 요소 기준(A): 새로운 객체나 요소를 삽입하는 것에는 여러 방법이 있다. 삽입의 기준으로 삼은 요소(A)에 자식으로 대입하거나 형제요소로 대입할 수 있는데, 이를 삽입 전 명확히 해야한다. 2) 새로 생성할 요소 기준(B): 혹은 새로 삽입하려는 요소(B)를 기준으로 매개변수로 지정한 선택자(A) 요소에 자식이나 형제로 대입할 수 있다. 이러한 생성방법은 위의 방법과 그 순서가 반대이다. 2. 선택자 요소 기준(A) : append(), prepend(), after(), before() $(A).append(B): A요소 내 뒷 부분에 B를 추가(자식) $(A).prepend(B): A요소 내 앞 부분에 B를 추가(자식) $(A).after(B): A요소 뒷..
1. is() 메소드란? 지정된 범위 내에 매개변수로 지정된 선택자와 일치하는 요소가 존재하는지 확인하는 메소드 존재하면 true, 없으면 false 반환 회사 개발팀마다 클린코드를 위해 사용하는 메서드가 상이, 확인할 것( has()도 많이 사용) 2. is() 메소드의 사용 is("CSS 선택자") 🎊코드확인하기 : h2 태그 이전에 있는 모든 형제 요소 중 p태그가 있는지 확인 더보기 div(parent) p span h2 h3 p 위p 1 2 3 4 5 테스트용 span 태그 테스트용 h2 태그
지금까지 배운 jQuery를 사용해서 사용자의 입력값에 따라 박스의 색이 변하는 transition-box를 구현해보자 단계별로 풀어보자 1. 입력값에 따라 박스 색이 변하는 기능 색상명을 입력하고 버튼을 누르면 박스색이 입력값에 따라 바뀐다. 🎊코드 확인하기 더보기 색 변경 2. 입력값에 따라 색이 변하는 여러개의 박스 색상명을 모두 입력하고 버튼을 누르면 모든 박스색이 한번에 바뀐다. 힌트! 배열을 사용할 것 🎊코드 확인하기 더보기 색변경 3. 입력값에 따라 색이 변하는 여러개의 박스2 색상명을 입력할때마다 박스색과 input 입력창의 색이 변한다 힌트! 이벤트 "keyup", input이 입력된 해당 박스만 색이 바뀌어야 한다: 이전 요소를 선택하는 prev() 사용하기 🎊코드 확인하기 더보기
1. 순회(탐색) 메서드란? ancestors(조상 메서드): 선택된 요소의 상위 요소들을 선택할 수 있는 메서드이다. 2. 조상 탐색 메서드 $('요소명').parent() - 선택된 요소의 바로 위 상위 요소 리턴 $('요소명').parents(["매개변수"]) - 선택된 요소의 모든 상위 요소 리턴, - 매개변수가 있으면 매개변수가 일치하는 부모만 리턴 $('요소명').parentsUntil(["매개변수"]) - 선택된 요소부터 매개변수 요소까지 범위의 요소 리턴 div(greate-grand parent) ul(grand parent) li (direct parent) span div(grand parent) p(direct parent) span 3. 자식, 후손 탐색 메서드 $("요소명").c..
1. attiribute와 property의 차이 attribute: type, name, class, id, value 등과 같이 속성값을 별도로 입력해야 하는 속성 property: checked, selected, readonly와 같이 별도로 속성값을 입력하지 않아도 되는 속성 2. prop() 메서드 prop("속성명"): 해당 속성이 요소에 존재하면 true, 아니면 false prop("속성명", true|false): 해당 속성을 checked 또는 selected 상태로 변경(true)/해체(false) 호텔의 무료 서비스를 선택할 수 있는 요소를 만들고 고객이 선택한 서비스를 alert창으로 보여준다. 무료 서비스 조식 포함 무료 주차 무료 인터넷 무료 취소 선택하기 😂Whyrano....
1. 파일 -> 기본 설정 -> 사용 코드 조각 구성 선택 2. 열려진 편집창에서 단축키를 사용하고자하는 언어선택 3. 언어선택 : 아래와 같이 코드 복사해서 붙여넣기 "console.log print": { "prefix": "cg", "body": ["console.log()"], "description": "Log output to console" } 4. 사용하기: 단축키를 입력하면 console.log()를 쓸 수 있다. ** 단축키를 직관적으로 cl로 설정하려고 했지만 class를 워낙 자주 쓰기 때문에 사용의 편리성을 위해 "prefix":"cg"로 설정했다. 사용자가 편한 단축키로 설정하면 된다~~~
jQuery의 선택자는 기본적으로 CSS 선택자와 동일하다. 여기서는 jQuery에서 선택자를 이용한 다양한 예시를 살펴보도록 하겠다. 더불어, JS에 대응되는 다양한 함수를 알아본다. 1. 태그 선택자 jQuery에서는 CSS와 동일한 형식으로 선택자를 사용 할 수 있다. 태그는 태그명을 그대로 사용하여 요소를 선택할 수 있다. 형식: $(".클래스명").css("스타일 속성", "스타일 값"); 두가지 클래스를 동시에 가지고 있는 요소를 선택하는 경우에는 클래스간 띄어쓰기를 하지 않고 바로 붙여쓴다 클래스 선택자 test1 test2 test3 test4 2. 아이디 선택자 형식: $("#아이디명") 아래 예시에서 on()은 자바스크립트에서 addEventListener()와 동일한 기능을 수행한다...
1. html 문서 해석 순서 html 문서는 항상 위에서 아래 순서로 해석된다. 만약 해당 코드의 함수가 실행코드보다 밑에 있다면 undefined에러가 발생한다. 즉 아래쪽에 작성되어 아직 해석이 안된 코드는 사용 할 수 없다. 아래와 같은 경우 2. window.onload() 함수 html(현재창)이 모두 로딩이 되었을 때라는 이벤트 리스너 일단 html 문서 내용을 모두 다 해석한 후 마지막에 onload 옆에 작성된 함수가 수행된다 즉, 화면에 필요한 모든 요소(css,js,image..)들이 웹 페이지 메모리에 모두 올려진 다음에 실행된다. *window.onload의 단점: 한 페이지 내에서 한번만 사용할 수 있다. 여러번 작성되면 마지막 내용이 수행된다. 아래 코드는 정상적으로 실행된다...