일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- 초코맘
- 설날
- 신혼
- 출산휴가
- 1일 1패턴
- 스타일 가이드
- javascript
- 영어공부
- 자바스크립트 스타일 가이드
- 결혼
- css
- 1일 1단어
- 청첩장
- 가을
- 달리기
- 산책
- 영어회화
- effect
- HTML
- 영어 회화
- 1일 1영어회화
- 신혼생활
- event
- 1일 1독서
- 업무
- 재택근무
- 용산아이파크몰
- 결혼준비
- 예비맘
- animation
- Today
- Total
목록코딩물고기의 IT월드 (169)
코딩물고기
경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다. 36. animation * animation 관련 메소드 - 요소의 스타일을 변경해 마치 요소가 움직이는 것처럼 보이게 함 - 요소의 크기나 배경색, 글자의 폰트 등 다양한 속성값을 변경 할 수 있음 $("요소").animation({변경할 스타일}); * animation() 이용해 글자 이동 및 커지는 효과 - 이벤트를 발생시킬 버튼과 애니메이션이 적용될 문장을 생성하고 문장의 position 속성의 기본값을 지정함 animation 방가워! - 버튼을 클릭할 때마다 오른쪽으로 50px만큼 움직이고, 글자가 2em만큼 커지는 코드블록을 작성함 $(document).ready(function(){ $("button").click(..
경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다. 35. slide와 fade * slide() 메소드 - slideUp() : 요소 영역을 위로 올림 - slideDown() : 요소 영역을 아래로 내림 $("요소").slideUp(); $("요소").slideDown(); * fade() 메소드 - fadeIn() : 요소 영역이 나타나게 함 - fadeOut() : 요소 영역이 사라지게 함 $("요소").fadeIn(); $("요소").fadeOut(); * slideUp()과 slideDown()메소드 이용 효과 - 이벤트를 발생시킬 버튼과 슬라이드 될 문장을 정의 위로 아래로 안녕! - 문장이 올라가고 내려가는 코드 블록을 정의한다 $(document).ready(funct..
경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다. 34. show와 hide 관련 메소드 * hide() 메소드 - 노출되어 있는 요소 영역을 숨김 $("요소").hide(); * show() 메소드 - 노출되어 있는 요소 영역을 보여줌 $("요소").show(); * show()와 hide() 메소드 이용 효과 - 이벤트를 발생시킬 버튼과 사라질 문장을 생성함 이 버튼을 누르면 아래 글이 사라집니다 위 버튼을 누르면 이 글이 나타납니다. - 버튼을 클릭하면 문장이 사라지는 메소드를 추가함 $(document).ready(function(){ $("p").hide(); $("button").click(function(){ $("p").show(); }); });
경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다. 33. 이벤트 연결 * 이벤트 - 마우스를 해당 객체에 올리거나 클릭, 또는 키보드를 치는 등의 브라우저에서 발생하는 모든 동작을 의미 - 주요 메소드 mouseup : function(){} mousedown : function(){} mouseenter : function(){} mouseleave : function(){} click : function(){} * 클릭 이벤트 처리 - 클릭 이벤트 대상이 될 요소들을 생성한다 클릭하면 사라집니다 클릭해 보세요! 클릭! - 클릭하면 요소가 사라지면서 경고 창을 출력하는 함수를 정의함 $(document).ready(function(){ $("p").on("click", functi..
경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다. 32. 스타일 조작 * css() 메소드 - 선택된 요소의 스타일을 조작한다 기본 상태 : hello world! 메소드 사용 : $("p").css("color","blue"); 결과 : Hello world! * addClass()와 removeClass() 메소드 - 선택자에 의해 선택된 요소에 클래스 스타일을 추가하거나 제거할 수 있다 기본상태 : hello world! 스타일지정 : .red{color : red} 메소드사용 : $("p").addClass("red"); 결과 : hello world! * css() 메소드 이용 스타일 조작 - css()를 적용할 요소들과 이벤트를 발생시킬 버튼을 생성함 빨간색 배경요소 주황..
경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다. 31. 문자 조작 방법 * text()와 html() 메소드 - 선택 연산자로 선택한 요소에 대해서 text() 메소드를 이용해 문자를 변경하거나 html() 메소드를 이용해 선택된 요소의 HTML 요소를 변경함 기본상태 : hello world! 메소드사용: $("p").text("Thank you!"); $("h1").html("Thank you!"); 결과 : Thank you! "Thank you!" * val()와 attr() 메소드 - 선택 연산자로 선택한 요소의 value 값을 val() 메소드를 사용하여 얻어오거나 변경할 수 있고, attr() 메소드를 사용하여 속성값을 얻어오거나 변경할 수 있다. 기본상태 : 메소드 ..