<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<a href="웹페이지 주소" target="페이지창을 여는 방식">text</a>
// ex 구글 웹사이트를 새창에서 연다
<a href="http://google.co.kr" target="_blank">text</a>
<img src="이미지파일 경로">
<!-- 같은 디렉토리의 이미지파일 -->
<img src="파일명">
<!-- 하위 디렉토리 안에 있는 이미지파일 -->
<img src="디렉토리명/파일명">
<!-- 상위 디렉토리 안에 있는 이미지파일 -->
<img src="../파일명">
<!-- 응용 - 상위 디렉토리에 있는 photo 디렉토리 안에 있는 cat.jpg 불러오기 -->
<img src="../photo/cat.jpg">
<!-- 구글 웹사이트 경로 -->
<a href="https://www.google.co.kr">google</a>
<!-- 2017대선 구글두들 이미지 경로 -->
<img src="https://www.google.co.kr/logos/doodles/2017/korea-elections-2017-5500020953448448-l.png">
<!-- 하드디스크 안의 이미지 경로 -->
<img src="D:\OneDrive\사진\프로필\IMG_9534.jpg">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my sketch</title>
<script>
// 경고창을 통해 '안녕!'이라는 메세지를 출력한다.
alert("안녕!");
</script>
</head>
<body>
</body>
</html>
// 숫자출력
alert(12);
// 숫자의 연산 출력
alert(5+3);
// 문자열 출력
alert("문자열을 출력합니다");
함수는 특정한 기능, 기능들을 모아 정리하고 여러번 재사용할 수 있는 코드의 묶음이다.
function myFunc(){
alert("안");
alert("녕");
alert("!");
};
myFunc();
실행 단축키
크롬(Chrome)
윈도우 Ctrl + Shift + J
맥 Cmd + Option + J
파이어폭스(FireFox)
윈도우Ctrl + Shift + K
맥 Cmd + Option + K
사파리(Safari)
윈도우 Ctrl + Alt + C
맥 Cmd + Option + C
인터넷 익스플로러(Internet Explorer11)
윈도우 F12
P5.js는 웹상에서 영상, 인터랙션등을 코딩으로 쉽게 구현할 수 있도록 기능을 제공하는 JavaScript 라이브러리이다. Processing 제작진이 만들어 비슷한 명령어 체계를 가지고 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my sketch</title>
<!-- HTML문서 옆에 p5.js파일을 위치 시킨 후 script요소로 링크시킨다. -->
<script src="p5.js"></script>
<script>
//여기에 p5.js 명령어를 작성한다.
</script>
</head>
<body>
</body>
</html>
<!-- 라이브러리를 내서버에 직접 올리거나 CDN을 통해 외부에서 끌어다 쓸 수 있다. -->
<!-- 같은 디렉토리에 있는 라이브러리 불러오기 -->
<script src="p5.js"></script>
<!-- 웹에 공유되어있는 라이브러리 불러오기 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.js"></script>
function setup(){
// 배경색을 검은색으로 칠해라
// 0~255 사이의 값으로 grayscale을 적용할 수 있다
background(0)
// x,y 좌표 50,50 위치에 가로,세로 40,40의 사각형을 그려라
rect(10, 20, 40, 40)
};
function draw(){
// 배경색을 검은색으로 칠해라
background(0)
// x좌표는 10 으로부터 현재 frameCount 만큼 위치시키고
// y좌표는 20 위치에 가로,세로 40,40의 사각형을 그려라
rect(10 + frameCount, 20, 40, 40)
};
P5.js는 기본적으로 가로세로 100, 100 크기의 canvas요소를 생성한다. createCanvas 함수를 통해서 원하는 크기의 canvas요소를 생성할 수 있다.
function setup(){
// 가로 500, 세로 500 픽셀의 캔버스요소를 만들어라
createCanvas(500, 500);
// 배경색을 검은색으로 칠해라
background(0);
};
function setup(){
// 가로 500, 세로 500 픽셀의 캔버스요소를 만들어라
createCanvas(500, 500);
};
function draw(){
// 배경색을 검은색으로 칠해라
background(0);
// 마우스 x, y 좌표에 50, 50 크기의 사각형을 그려라
rect(mouseX, mouseY, 50, 50);
};