Frontend

목표.on('click',function(){}) 함수에 대해 알아보자. 함수.on('click',function(){발생시킬 이벤트 함수 작성})이 함수는 .bind() 함수를 사용하지 않아도 this 값을 쉽게 잡아줄 수 있어 사용하기 편한 함수입니다..on('타입',function(){}) 함수의 '타입' 에는 click 이 아닌 다른 이벤트도 들어갈 수 있습니다.그건 나중에 따로 다루도록 하겠습니다. 학습1. HTML 우리는 스크립트만 다루면 되기 때문에 최소한의 마크업을 해주었습니다. 이 버튼을 클릭 해 보세요. 2. JavaScript이 함수를 입력하고 버튼을 클릭하면 개발자 모드(F12) 로 접속하여 콘솔창에 '클릭 되었어요' 라는 문구가 뜹니다.$(function(){ console.lo..

목표 append, appendTo, prepend, prependTo 함수에 대해 알아보자. 함수 1) append(), appendTo() : 원하는 요소를 '맨 뒤' 에 추가하는 함수. 2) prepend(), prependTo() : 원하는 요소를 '맨 앞' 에 추가하는 함수. 학습 1) HTML 마크업 안녕하세요. 배가고파요. 2) JacaScript A, B 의 위치를 정확하게 파악할것. $(function(){ console.log('연결성공!') //A = 새로 추가할 내용 //B = A가 추가될 요소(태그) //append = B의 맨 마지막에 추가됨. //appendTo //A.appendTo(B) $('이건 뒤에 추가되는 append() ').appendTo('div > ul') //..

목표 J Query 를 이용하여 간단하게 좌우 슬라이드 만들어보겠습니다. 워낙 예전에 배웠던 거라서 기억이 나지 않아 복습 겸, 기록 겸 남깁니다. 마크업 /* part1.html */ slide1 slide2 slide3 slide4 1 2 3 저는 2개의 리스트를 만들었습니다. ul : 슬라이더 (이미지 영역) ol : 페이지네이션 (버튼 영역) 이미지 구하기 이제 실습에 재미를 더하기 위해 본인이 원하는 사진 4장을 가져오도록 합시다. CSS 그리고 가지고 온 이미지들을 slide 1, 2, 3, 4 영역에 각 자 넣어주고, css를 사용하여 보기 좋게 정리 해 줍니다. /* part1.css */ @charset 'UTF-8'; *{ margin:0; padding:0; } ol, ul, li {..