jQuery - 요소 선택하기, $("") / $(#"") / $(."") / $("[]") 의 차이점

구문 $() : 제이쿼리 객체 생성 $() 제이쿼리 객체 생성하는 구문 반드시 쌍따옴표(")를 사용한 문자열 형태여야 함 $("") : css 선택자 사용 $("p") css 선택자를 사용하여 html 요소 선택하는 구문 자바스크립트의 'getElementByTagName' 메소드와 동일 위의 예시 구문에서는 p태그를 선택한다는 의미를 가짐 $("#") : id 사용 $("#pId") id를 사용하여 html 요소 선택하는 구문 자바스크립트의 'getElementById' 메소드와 동일 위의 예시 구문에서는 'pId' 라는 ID를 가진 요소를 선택한다는 의미를 가짐 $(".") : 클래스 사용 $(".pClass") 클래스를 사용하여 html 요소 선택하는 구문 자바스크립트의 'getElementByCl..

• format_list_bulleted Web/Javascript
• · 2023. 4. 20.
• textsms

jQuery - 제이쿼리의 기초, 구문, 사용 방법, 샘플 코드

제이쿼리란? (jQuery) HTML의 클라이언트 조작을 단순화하도록 설계된 자바스크립트 라이브러리 한 개의 자바스크립트 파일로 존재 개발을 쉽게 할 수 있도록 디자인 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 상호작용 등 jQuery 호출하기 jQuery 를 사용하기 위해 jQuery 라이브러리가 담겨있는 자바스크립트 파일을 호출하여야 함 CDN 사이트에서 링크 참조 가능 CDN : 사용자에게 콘텐츠를 제공하는 분산 서버 네트워크 jQuery CDN 확인 링크 : https://releases.jquery.com/ 설계하는 페이지에 따라 jQuery의 종류를 적절히 배치하는 것이 좋음 Uncompressed : 라이브러리 표준 비압축 버전, 주석과 서식이 있는 전체 ..

• format_list_bulleted Web/Javascript
• · 2023. 4. 11.
• textsms

JS - 요소 추가하기(createElement, appendChild), 요소에 스타일 적용하기(className)

예시다음과 같은 div 태그가 있습니다. parent child : hello child 요소 아래에 새로운 div를 추가하여 메시지를 입력하려면 어떻게 해야 할까요?물론, html 태그에 를 정의하여 추가할 수 있지만,정적인 페이지가 아닌 동적인 페이지를 표현하고자 할 때에는 자바스크립트를 사용하여야 합니다.자바스크립트로 요소 생성하기구문createElement(태그이름) : HTML 문서에서 지정한 태그의 요소 생성예시) document.createElement("div") : 페이지에 div 태그 생성단, 요소는 생성되었으나 어디에 위치할지를 지정하지 않았기 때문에 문서 내에서 보이지 않음document.createElement("HTML태그명"); 예시 코드 parent child ..

• format_list_bulleted Web/Javascript
• · 2023. 3. 24.
• textsms

JS Error) Uncaught TypeError: Cannot read properties of null, Cannot set properties of null

Error Uncaught TypeError: Cannot read properties of null 페이지가 로드되기 전에 해당 요소를 호출 할 때 발생하는 에러 Uncaught TypeError: Cannot set properties of null 페이지가 로드되기 전에 해당 요소의 값을 설정할 때 발생하는 에러 해결 방법 해결 방법은 크게 두가지로 나뉨 가장 맨 밑에 위치 시켜서 페이지의 요소가 로드 된 후 호출 window.onload 를 이용하여 웹 페이지가 로드가 끝나면 스크립트 실행 기존 코드 hello 해당 요소 밑에 자바스크립트 코드 위치 div가 온 코드 밑에 위치를 해도 되고 최하단으로 이동해도 됨 스크립트 관리의 가독성을 위해 최하단으로 위치하는 것이 보편적임 hello 자바스크립..

• format_list_bulleted Web/Javascript
• · 2023. 3. 24.
• textsms

CSS - CSS3 Cheet Sheet

폰트 관련 속성 font : 속성 font-family : 폰트 종류 font-size : 폰트 크기 font-style : 폰트 형태 font-variant : 폰트 변형 font-weight : 폰트 두께 변환 관련 속성 transform : 변환 transform-origin : 변환 중심 transform-style : 변환 형태 perspective : 투시 수치 perspective-origin : 투시 중심 backface-visibility : 후면 가시성 변형 관련 속성 transition : 변형 transition-property : 변형 대상 transition-duration : 변형 진행 시간 transitiontiming-function : 변형 수치 변환 함수 transiti..

• format_list_bulleted Web/html & css & xml
• · 2023. 3. 23.
• textsms

HTML - HTML5 Cheat Sheet

주석 태그 설명 : 부가 설명 HTML 구조 태그 표시 형태 : block 설명 : 문서 형태 표시 형태 : none 설명 : 문서 자체 표시 형태 : none 설명 : 문서 머리 표시 형태 : none 설명 : 문서 제목 표시 형태 : none 설명 : 문서 추가 정보 표시 형태 : block 설명 : 문서 본문 파일 태그 표시 형태 : none 설명 : 외부 파일 추가 표시 형태 : none 설명 : 스타일시트 표시 형태 : none 설명 : 스크립트 공간 태그 표시 형태 : block 설명 : block 형식의 공간 표시 형태 : inline 설명 : inline 형식의 공간 시멘틱 구조 태그 표시 형태 : block 설명 : 본문 표시 형태 : block 설명 : 수직 목록 표시 형태 : bloc..

• format_list_bulleted Web/html & css & xml
• · 2023. 3. 23.
• textsms