본문 바로가기

공부기록169

3월 20일 (2) JavaScript - jQuery event, effect ready() html 요소가 모두 로드된 뒤에 처리될 수 있도록 js 코드는 ready() 함수 내에 작성한다. $(document).ready(function() { 여기에 모든 자바스크립트 코드를 작성 }); -> 단축형태 $(function(){ 여기에 모든 자바스크립트 코드를 작성 }); $(document).ready(function() { $("#btn").click(function(){ alert("버튼을 눌렀습니다."); }); }); 단축 $(function() { $("#btn").click(function(){ alert("버튼을 눌렀습니다."); }); }); 버튼 jQuery 이벤트 키워드 이벤트는 ~ 할 때, ~될 때 시점을 말한다. 1. 마우스 이벤트 click : 클릭이벤트.. 2023. 3. 20.
3월 20일 (1) JavaScript - 예제, jQuery p 620 light box 예제 사용자 정의 속성 : 사용자(개발자)가 어떤 목적으로 사용하기 위해 임의의 이름으로 작성한 속성. 자바스크립트, CSS에서 활용할 수 있다. 라이트박스 예제에서는 썸네일 이미지와 연결할 본 이미지의 정보를 저장하기 위해 'data-src'라는 임의의 이름으로 작성하였다. html 5에서 새로 생긴 일종의 메타 데이터 속성 data-XXX 사용자 정의 속성은 CSS 부트스트랩을 사용할 때 자바스크립크과 같이 많이 사용된다. 이벤트에서의 this 이벤트가 발생된 html 요소 . html 문서 CSS 문서 @charset "UTF-8"; .row { width: 420px; margin: 0 auto; } .row ul { list-style: none; margin: 0;.. 2023. 3. 20.
3월 17일 (2) JavaScript - locatoin, history location [window.]location : 현재 보이는 페이지의 정보 locaion.href : 페이지의 url(a 태그의 href와 같음) 태그가 아닌 다른 곳에 주소 입력 시 사용 location.hostname : 서버의 주소(Domain mane) location.pathname : 페이지의 경로와 파일명 location.protocol : 사용 중인 웹 프로토콜(http) history window.history : 방문한 페이지 이동 관련 정보 방문한 페이지가 있어야 활성화 history.back() : 이전 페이지로 이동 history.forward() : 다음 페이지로 이동 history.go(n) : back과 forward를 합친 메서드 back -> history.go(-1).. 2023. 3. 17.
3월 17일 (1) JavaScript - Screen BOM(Browser Object Model) - window 객체 Screen 관련 1. 화면크기 구하기 [window.]screen.width/height : 화면의 너비/높이 디스플레이 해상도를 의미(픽셀) window.screen.availWidth/avilHeight : 유효 화면 너비/높이(작업표시줄 제외) window.innerWidth/Height : 창 내부 너비/ 높이 화면의 변경에 따라서 자바스크립트로 처리할 수도 있도록 생각해 보는 것도 필요! 대부분 'window.' 키워드는 생략한다. + 네비게이션 브라우저에 따라서 개발자 소스에 따라 앞부분에 처리할 수 있는 것들이 붙기도 한다. 페이지(문서)의 크기 페이지의 너비 : docment.body.clientWidth 페이지의 높이 .. 2023. 3. 17.
3월 16일 (2) JavaScript - 브라우저 객체 모델 p576 BOM(Browse Object Model) 브라우저 객체 모델 window를 기반으로 함 브라우저 프로그램에서 제공하는 기능을 자바스크립트로 제어할 때 사용하는 객체 묶음 동일하게 제공하는 기능들이 있다, 이런 객체를 모아서 만든 모델, 브라우저 window command 입력 방식 CUI - 직접 명령어를 입력해서 사용사용자 인터페이스 GUI - 그림을 띄워서 명령어를 사용하게 하는 스크린 - 화면 효과로케이션 - a link와 같음히스토리 - 경로 이동, 방문기록내비게이터 - 브라우저의 정보, 브라우저에 따라서 제어하는 기능이 다르다.다큐멘트 body 1. window alert 등의 대화창, 화면의 크기, 스크롤 등을 처리 화면의 크기는 3가지로 모니터 크기, 유효영역(실제 프로그램 크기.. 2023. 3. 16.
3월 16일 (1) JavaScript - node 활용 제어 노드 관계를 통한 요소 제어 HTML 요소 간의 관계를 활용(계층) 노드(Node) = HTML 요소 부모요소 > 자식요소 부모요소에서 자식요소 찾기 : 요소.childNodes; 자식요소는 반드시 복수(배열)이다. const subnodes = htmlnodes.childNodes; //부모입장에서 자식 노드 찾아가기 console.log(subnodes); 자식요소에서 부모요소 찾기 : 요소.parentElement; 부모요소는 반드시 하나다. const elem_b = document.querySelector("#bo"); console.log(elem_b.parentElement); // 자식 입장에서 부모 노드 찾아가기 elem_b.parentElement.style.backgroundColor.. 2023. 3. 16.

티스토리툴바