👾

자바스크립트에서 오디오 재생하기 HTML5부터는 자바스크립트에서 Audio 객체를 이용해 오디오를 재생할 수 있다. 자바스크립트에서 오디오 파일을 불러와 재생하는 방법은 다음과 같다. 1 2 var audio = new Audio('audio_file.mp3'); audio.play(); cs audio라는 변수를 선언해 Audio 객체를 생성하고, play() 메소드를 사용해서 음악을 재생하는 방법이다. new Audio('audio_file.mp3')에 ()안에는 자신이 넣고 싶은 음악 파일의 src를 적어주면 된다. 만약 HTML 파일에 Audio 객체가 있고, 자바스크립트에서 이를 불러와 재생하고 싶다면 다음 방법을 쓸 수 있다. 1 document.getElementById('myAudio')...

jQuery를 이용해 애니메이션 효과 추가하기 jQuery에는 다양한 애니메이션 효과를 제공한다. https://www.w3schools.com/jquery/jquery_ref_effects.asp 위 사이트에서 다양한 종류의 Effect Method를 확인할 수 있다. Effect Method는 간단하게 selector에 적용할 수 있다. $(selector).effectMethod() 예를 들어 h1요소를 화면에서 사라지게 하고 싶다면 $("h1").hide(); 라고 작성하면 된다. Effect Methods(애니메이션 효과 설명) 간단한 설명을 위해 h1요소에 애니메이션을 적용한다고 가정했다. $("h1").animate() // h1이 설정한 애니메이션으로 실행됨 // ex) $("h1").an..

html 요소 삽입하기 jQuery를 이용해 요소를 삽입하는 메소드는 before, after, prepend, append 등이 있다. 각각의 메소드마다 요소가 삽입되는 위치가 조금씩 다르니 자신이 원하는 위치에 따라 알맞게 사용해야 한다. $(selector).before(content) // 이때 content에 들어갈 수 있는 값은 HTML elements, jQuery objects, DOM elements이다. .before()는 selector 이전에 content를 삽입하는 메소드이다. $("h1").before("Hello"); // 이전에 Hello 삽입 $(selector).after(content) .after()는 selector 이후에 content를 삽입하는 메소드이다. $("..

Event Listener 추가하기 jQuery에는 다양한 이벤트가 존재하는데, 이런 이벤트를 추가하는 방법엔 2가지가 있다. 방법1) 이벤트 메서드 이름을 이용하기 예시로 을 클릭했을때 요소의 색을 빨간색으로 바꾸는 이벤트를 추가해보자. 클릭했을 때 이벤트가 발생하는 메소드는 .click()이다. 따라서 위의 예시를 실행하기 위한 코드는 다음과 같이 작성하면 된다. 1 2 3 $("h1").click(function () { $("h1").css("color", "red"); }); cs .click()내에 이벤트가 발생했을 때 호출될 콜백함수를 작성해서 이벤트를 추가하는 방식이다. 방법2) .on() 이용하기 .on("eventMethod", function(){}) .on()의 첫 번째 인자로는 이..

attr()을 이용해 요소의 속성 변경하기 .attr()을 이용하면 요소의 속성 값을 가져오거나(get) 변경(set)할 수 있다. $("elementName").attr("attributeName"); // 요소의 속성 값 get $("elemetName").attr("attributeName", "attributeValue"); // 요소의 속성 값 set 사용 예시 예시 1) 의 src 속성 값 변경하기 공부한 것을 정리한 내용입니다. 수정할 부분이 있다면 알려주시면 감사하겠습니다 :)

jQuery를 이용해 html 요소의 텍스트 변경하기 jQuery를 이용해 html 요소의 텍스트를 변경하는 방법에는 2가지가 있다. 방법1) .text() 이용하기 $("h1").text("new text"); 위와 같이 텍스트를 변경할 요소를 선택해서 .text 내에 변경하고 싶은 텍스트를 작성해 주면 된다. 방법2) .html() 이용하기 $("h1").html("new text"); .text()는 html 요소 내의 텍스트만 변경 가능하지만 .html()을 이용하면 텍스트뿐만 아니라 html 코드를 변경하는 것도 가능하다. 위와 같은 코드를 실행하면 new text 과 같은 형태로 h1 요소의 content가 바뀌게 된다. 사용 예시 예시1) .text() 이용 $("button").text("..

jQuery와 CDN 설명 jQuery는 자바스크립트의 라이브러리로, 짧은 코드를 이용해서 효율적으로 자바스크립트 코드를 작성할 수 있도록 해준다. jQuery를 이용하는 방법에는 https://jquery.com/에서 라이브러리를 다운받아서 사용하는 방법과 CDN을 이용하는 방법이 있다. CDN(Content Delivery Network)이란 온라인 상의 대용량 콘텐츠를 저렴한 비용으로 빠르게 전송하는 기술을 말한다. 주요 ISP의 CDN 서버에 콘텐츠를 분산시켜 놓는 방식이다. 이를 이용해서 최종 사용자가 콘텐츠를 전송받을 때 여러 CDN 서버 중에서 가장 가까운 네트워크 경로를 선택할 수 있다. 이로써 트래픽이 특정 서버에 몰려 과부하가 발생하는 것을 막을 수 있다. 또한 사용자 입장에서는 자신과..

배열은 데이터들을 저장할 수 있는 리스트와 비슷한 객체입니다. 인덱스(index)를 통해 배열의 원소에 접근할 수 있기 때문에 데이터들을 순차적으로 저장하거나 접근할 때 유용합니다. 배열 생성 및 원소 접근 방법 var arr = []; // 길이가 0인 배열 arr 생성 var arr = [1, 2, 3]; // 길이가 3인 배열 arr를 생성하고 원소를 1, 2, 3으로 초기화 arr.length; // 배열 arr의 길이 반환 arr[i]; // 배열 arr의 i번째 원소 접근 // 배열의 인덱스는 0부터 시작함 => 첫번째 원소: arr[0] 1 2 3 4 5 6 7 8 9 10 11 12 // 배열 생성 var colors = ['빨강', '파랑', '노랑']; // 배열의 길이 var len ..

Math.random( ) Math.random( ) 함수는 [0, 1) 구간에서 부동소수점 의사 난수를 반환합니다. 의사 난수란 처음에 주어지는 초깃값(seed)에 따라 이미 결정되어 있는 메커니즘에 의해 만들어지는 수를 말합니다. 예제와 함께 난수를 생성하는 방법을 알아보겠습니다. 예제 1) 0 이상 1 미만인 난수 생성하기 var n = Math.random( ); // 0 ≤ n < 1 예제 2) 1 이상 10 미만인 난수 생성하기 var n = Math.random( ); // 0 ≤ n < 1 n = n * (10 - 1); // 0 ≤ n < 9 n = n + 1; // 1 ≤ n < 10 위 3줄의 코드는 다음과 같이 한 번에 작성할 수 있습니다. var n = Math.random( ) ..

Media Query (미디어쿼리) 미디어쿼리는 device 유형(print, screen 등)과 어떤 특성이나 수치(화면 해상도, 화면 크기 등) 에 따라 웹사이트나 앱을 수정할 때 유용한 기능입니다. 기본적인 미디어쿼리 문법은 다음과 같습니다. @media ( 조건문 ) { 실행문 } 만약 @media ( max-width: 600px) { background-color: red; } 라는 코드를 작성했다면, 화면의 크기가 600px 이하일 때, 화면의 배경색이 빨간색이됩니다. Breakpoints (중단점) 미디어쿼리의 디바이스마다의 화면 크기 breakpoint는 다음과 같습니다. @media (max-width: 600px) { } 화면의 크기가 600px 이하일 때 { } 안의 코드 실행 ex..