CSS39 3월 21일 (2) JavaScript - jQurey 요소 추가, 속성값 가져오기/ 변경하기 + 메서드 체이닝(Method Chaining) 기능들이 연결된 것처럼 연속적으로 처리된다. 동일한 요소에 여러 명령을 차례로 실행할 수 있는 연결 기술 기존명령 + .새메서드() + .새메서드() + ....... $("선택자").css("color", "red").slideUp().slideDown(); 3. 형제 요소 선택 $("선택자").siblings() : 모든 동일 계층 요소 $("선택자").prev() : 선택자 이전요소(하나) 선택요소 위쪽 $("선택자").prevAll() :이전의 모든 요소 $("선택자").prevUntil("지정요소") : 선택자와 지정요소 사이의 모든 요소 (선택자와 지정요소 제외) $("선택자").next() : 선택자 요소의 다음 요소(하나) 선택요소 아래쪽 $.. 2023. 3. 21. 3월 21일 (1) JavaScript - jQurey 선택자(기본, 조합, 관계) 어제 이어서 slidetoggle 예제 수정 부분 $("#flip2").click(function () { $("#p2").slideToggle("show", function(){ let view = $("#p2").css("display"); if(view == "none"){ $("#flip2").text("토글 - 다운"); } else { $("#flip2").text("토글 - 업"); } }); }); 기본선택자 1) 태그명 - $("div") 2) class - $(".box") 3) id - $("#d1") 선택자 전체 요소 선택자 - $("*") 현재 요소 선택자 - $(this) 속성 선택자 - $("[]") 조합 선택자 태그명과 class 혼합 - $("p.c1") 같은 형제 태그들 .. 2023. 3. 21. 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. 이전 1 2 3 4 5 ··· 7 다음