본문 바로가기

WEB

 (88)
[WEB] 아파치 톰캣 ,이클립스 설치하기 / 한글 인코딩 설정 아파치 톰캣 ,이클립스를 설치한 후 한글 인코딩 설정을 해봅시다. https://tomcat.apache.org/download-80.cgi Apache Tomcat® - Apache Tomcat 8 Software Downloads Welcome to the Apache Tomcat® 8.x software download page. This page provides download links for obtaining the latest versions of Tomcat 8.x software, as well as links to the archives of older releases. Unsure which version you need? Specification versions tomcat.apac..
[JavaScript] audio를 사용하는 방법들 / currentTime / play audio를 사용해봅시다 😃 html은 오디오 객체를 지원합니다. 오늘은 이 오디오 객체를 조작하는 다양한 방법에 대해 알아보려고 합니다. html에서 제공하는 오디오 버튼을 사용하여 재생하는 방법 버튼을 생성하여 재생하는 방법 키보드를 사용하여 재생하는 방법 이렇게 3가지를 알아보겠습니다! 1. html에서 제공하는 오디오 버튼을 사용하여 재생 html에서 제공하는 버튼을 사용하려면 src에 재생하고자하는 소리를 넣어주면 됩니다. 2. 버튼을 생성하여 재생 버튼을 사용하여 html에서 src에 넣은 소리를 다시 재생할 수 있는 방법이 있고 새로운 소리를 재생할 수 도 있습니다. let pianoSound = document.querySelector("#one"); // html 상의 소리 재생 let ..
[JavaScript] canvas 요소의 모든 것 #3 - 이미지 회전 시키기 / save / restore / rotate / translate canvas 요소의 모든 것! #3 오늘은 커서를 따라오면서 무한으로 회전하는 이미지를 만들어봅시다! [JavaScript] canvas 요소의 모든 것 #1 - translate / rotate / lineWidth / strokeStyle / lineCap / lineJoin / beginPath / moveTo / lineTo / stroke / closePath 보러가기 [JavaScript] canvas 요소의 모든 것 #2 - 이미지 그리기 / 커서로 이미지 조작하기 / drawImage / clearRect 보러가기 [JavaScript] canvas 요소의 모든 것 #3 - 이미지 회전 시키기 / save / restore / rotate / translate 보러가기 1. 커서를 따라오는..
[JavaScript] canvas 요소의 모든 것 #2 - 이미지 그리기 / 커서로 이미지 조작하기 / drawImage / clearRect canvas 요소의 모든 것! #2 오늘은 canvas에 이미지를 활용해 봅시다. [JavaScript] canvas 요소의 모든 것 #1 - translate / rotate / lineWidth / strokeStyle / lineCap / lineJoin / beginPath / moveTo / lineTo / stroke / closePath 보러가기 [JavaScript] canvas 요소의 모든 것 #2 - 이미지 그리기 / 커서로 이미지 조작하기 / drawImage / clearRect 보러가기 [JavaScript] canvas 요소의 모든 것 #3 - 이미지 회전 시키기 / save / restore / rotate / translate 보러가기 // canvas 의 참조값 얻어오기 l..
[JavaScript] canvas 요소의 모든 것 #1 - translate / rotate / lineWidth / strokeStyle / lineCap / lineJoin / beginPath / moveTo / lineTo / stroke / closePath canvas 요소의 모든 것! #1 오늘은 canvas 기초를 알아봅시다! [JavaScript] canvas 요소의 모든 것 #1 - translate / rotate / lineWidth / strokeStyle / lineCap / lineJoin / beginPath / moveTo / lineTo / stroke / closePath 보러가기 [JavaScript] canvas 요소의 모든 것 #2 - 이미지 그리기 / 커서로 이미지 조작하기 / drawImage / clearRect 보러가기 [JavaScript] canvas 요소의 모든 것 #3 - 이미지 회전 시키기 / save / restore / rotate / translate 보러가기 canvas 요소를 사용하면 웹페이지에 그래픽을..
[JavaScript] JSON 사용하기 / JSON.parse() / JSON.stringify() JSON을 사용하는 방법을 알아봅시다! 😋 JSON이란, 키 - 값 쌍으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷입니다. JSON 문자열 작성 형식 { } [ ] 두가지가 존재합니다. { "키값" : value, "키값2":value2, ... } 여기서 키값은 반드시 double quotation ""로 감싸야 합니다. value가 될 수 있는 형식에는 여러가지가 있습니다. 숫자 : 10 또는 10.1 같이 숫자를 작성하면된다. 문자 : "xxx" double quotation 으로 감싸면 된다. 논리값 : true or false 를 작성하면 된다. object : { } array : [ ] 빈값 : null function은 존재하지 않습..
[JavaScript] Math 활용하기 / round, ceil, floor, random, sin, abs 자바스크립트에서 Math는 어떻게 사용될까요? 🤔 자바스크립트에서 math는 여러 함수들을 제공합니다. 여기서 몇가지만 살펴보겠습니다. 1. Math.round() Math.round(10.6) >> 11 Math.round(10.3) >> 10 Math.round() 는 반올림 값을 리턴해줍니다. 2. Math.ceil() Math.ceil(10.6) >> 11 Math.ceil(10.3) >> 11 Math.ceil()은 올림 값을 리턴해줍니다. 3. Math.floor() Math.floor(10.6) >> 10 Math.floor(10.3) >> 10 Math.floor()은 내림 값을 리턴해줍니다. 4. Math.random() Math.floor(Math.random()*10); >> 9 Ma..
[JavaScript] 난수 생성하기 / random 함수 사용하기 random 함수를 사용해봅시다 😎 자바스크립트에서 난수를 생성하기 위해서는 random함수를 사용합니다. 어떻게 사용하는지 알아봅시다! 1. 랜덤함수의 기본 형식 Math.random() 랜덤함수의 기본 형식은 이렇습니다. Math.random() >> 0.8884619588085902 Math.random() >> 0.22529327510750785 Math.random() >> 0.02286337270354788 Math.random() >> 0.6717817297020712 Math.random() >> 0.1569530396045069 이렇게 Math.random()을 사용하면 0~1(1은 미포함) 사이의 수를 반환합니다. 이제 1 보다 큰 범위의 난수는 어떻게 생성하는지 알아봅시다! 2. 범위..

티스토리툴바