인터랙티브한 웹페이지 만들기

수업 영상

html 기본 형식

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

a 요소

HTML

<a href="웹페이지 주소" target="페이지창을 여는 방식">text</a>
   
// ex 구글 웹사이트를 새창에서 연다
<a href="http://google.co.kr" target="_blank">text</a>

img 요소

HTML

<img src="이미지파일 경로">

상대경로와 절대경로

상대경로: 작성중인 파일을 기준으로하는 경로

HTML

<!-- 같은 디렉토리의 이미지파일 -->
<img src="파일명">

<!-- 하위 디렉토리 안에 있는 이미지파일 -->
<img src="디렉토리명/파일명">

<!-- 상위 디렉토리 안에 있는 이미지파일 -->
<img src="../파일명">
    
<!-- 응용 - 상위 디렉토리에 있는 photo 디렉토리 안에 있는 cat.jpg 불러오기 -->
<img src="../photo/cat.jpg">

절대경로: 하드디스크 드라이브 혹은 웹상에서 파일이 가지고 있는 고유한 경로

HTML

<!-- 구글 웹사이트 경로 -->
<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">

script 요소와 JavaScript

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>my sketch</title>
        
        <script>
            // 경고창을 통해 '안녕!'이라는 메세지를 출력한다.
            alert("안녕!");
        </script>
    </head>
    <body>
    </body>
</html>

alert: 웹브라우저에서 경고창을 통해 메세지를 출력하는 함수

JavaScript

// 숫자출력
alert(12);

// 숫자의 연산 출력
alert(5+3);

// 문자열 출력
alert("문자열을 출력합니다");

함수(function)

함수는 특정한 기능, 기능들을 모아 정리하고 여러번 재사용할 수 있는 코드의 묶음이다.

JavaScript

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

P5.js는 웹상에서 영상, 인터랙션등을 코딩으로 쉽게 구현할 수 있도록 기능을 제공하는 JavaScript 라이브러리이다. Processing 제작진이 만들어 비슷한 명령어 체계를 가지고 있다.

P5.js 라이브러리를 내 페이지에 연동하기

HTML

<!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>

HTML

<!-- 라이브러리를 내서버에 직접 올리거나 CDN을 통해 외부에서 끌어다 쓸 수 있다. -->
    
<!-- 같은 디렉토리에 있는 라이브러리 불러오기 -->
<script src="p5.js"></script>

<!-- 웹에 공유되어있는 라이브러리 불러오기 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.js"></script>

setup 함수와 draw 함수

setup 함수: 페이지가 실행될때 맨처음 한번만 실행되는 함수

JavaScript

function setup(){
    // 배경색을 검은색으로 칠해라
    // 0~255 사이의 값으로 grayscale을 적용할 수 있다
    background(0)
    
    // x,y 좌표 50,50 위치에 가로,세로 40,40의 사각형을 그려라
    rect(10, 20, 40, 40)
};

draw 함수: 페이지가 실행될때 매 프레임마다 실행되는 함수

JavaScript

function draw(){
    // 배경색을 검은색으로 칠해라
    background(0)
    
    // x좌표는 10 으로부터 현재 frameCount 만큼 위치시키고
    // y좌표는 20 위치에 가로,세로 40,40의 사각형을 그려라
    rect(10 + frameCount, 20, 40, 40)
};

frameCount: 현재 프레임이 몇번째 프레임인지를 숫자로 가져오는 P5.js의 시스템변수 이다

canvas 요소 크기 조절하기

P5.js는 기본적으로 가로세로 100, 100 크기의 canvas요소를 생성한다. createCanvas 함수를 통해서 원하는 크기의 canvas요소를 생성할 수 있다.

JavaScript

function setup(){
    // 가로 500, 세로 500 픽셀의 캔버스요소를 만들어라
    createCanvas(500, 500);
    
    // 배경색을 검은색으로 칠해라
    background(0);
};

마우스 위치 읽어오기

mouseX: 마우스의 x좌표값을 가져오는 P5.js의 시스템변수 이다
mouseY: 마우스의 x좌표값을 가져오는 P5.js의 시스템변수 이다

JavaScript

function setup(){
    // 가로 500, 세로 500 픽셀의 캔버스요소를 만들어라
    createCanvas(500, 500);
};

function draw(){   
    // 배경색을 검은색으로 칠해라
    background(0);
    
    // 마우스 x, y 좌표에 50, 50 크기의 사각형을 그려라
    rect(mouseX, mouseY, 50, 50);
};