수업 영상

인터랙티브 웹이란?

일방적으로 정보를 받는데에 그치지 않고, 접속자가 페이지안에서 상호작용, 데이터 교류를 하는 동적인 웹을 이야기한다.

기존의 웹페이지
Wikipedia

인터랙티브한 웹페이지
Drag and Drop Interaction Ideas
Chrome Experiments

웹페이지는 어떤 언어로 만들어질까

Front-End : 웹 브라우저에서 구현되는 표면적인 부분
- 일반적으로 보여지는 웹페이지를 생각하면 된다.
- HTML & CSS & JavaScript

HTML : 정보를 담고 구조화
CSS : HTML문서의 요소들을 디자인적으로 꾸며줌
JavaScript : 웹페이지의 동적인 부분을 담당. 요소와 정보의 추가와 제거, 수학적인 계산, 이벤트

Back-End : 서버안에서 실질적인 정보를 담은 데이터를 다루는 부분
- SNS, 커뮤니티, 게시판 등 외부에서 정보를 새로 받아 저장할 수 있는 페이지들
- PHP, JSP, ASP, Node.js 등
ex) 서버에 Data 저장하기

HTML 파일

Mac에서 텍스트 에디터로 html파일 만들기
열기 찾기> 어플리케이션> 텍스트 편집기
또한 제대로 파일을 저장하도록 응용 프로그램을 얻기 위해 몇 가지 기본 설정을 변경한다.
환경 설정> 형식> 선택 "일반 텍스트"
그런 다음 "열기 및 저장"에서, "HTML 파일에서 서식있는 텍스트 명령 무시"라는 상자를 선택한다.
그런 다음 코드를 삽입하는 새로운 문서를 연다.

※인코딩방식은 꼭 'utf-8'로 설정한다.

HTML 문법

HTML - 하이퍼텍스트 마크업 언어는 Hyper Text(링크태그)라는 특징을 가지고 있는 Markup Language이다. 마크업 언어는 우리가 글을 쓸 때 " ", ' ', ( ), [ ] 등의 부호를 이용해 문장의 성격을 표현하듯 태그를 이용해 정보의 의미와 구조를 표현한다.

“……”
“으응, 또 대답이 없네, 정말 죽었나보이.”
이러다가 누운 이의 흰 창이 검은 창을 덮은, 위로 치뜬 눈을 알아보자마자,
“이 눈깔! 이 눈깔! 왜 나를 바루 보지 못하고 천정만 바라보느냐, 응” 하는 말끝엔 목이 메이었다. 그러자 산 사람의 눈에서 떨어진 닭똥 같은 눈물이 죽은 이의 뻣뻣한 얼굴을 어룽어룽 적시었다. 문득 김첨지는 미친 듯이 제 얼굴을 죽은 이의 얼굴에 한데 비벼대며 중얼거렸다.
“설렁탕을 사다 놓았는데 왜 먹지를 못하니, 왜 먹지를 못하니……괴상하게도 오늘은 운수가 좋더니만……”

현진건의 '운수 좋은 날' 中
Markup 언어
<대화>……</대화>
<대화>으응, 또 대답이 없네, 정말 죽었나보이. </대화>
<서술>이러다가 누운 이의 흰 창이 검은 창을 덮은, 위로 치뜬 눈을 알아보자마자,</서술>
<대화>이 눈깔! 이 눈깔! 왜 나를 바루 보지 못하고 천정만 바라보느냐, 응</대화>
<서술>하는 말끝엔 목이 메이었다. 그러자 산 사람의 눈에서 떨어진 닭똥 같은 눈물이 죽은 이의 
뻣뻣한 얼굴을 어룽어룽 적시었다. 문득 김첨지는 미친 듯이 제 얼굴을 죽은 이의 얼굴에 한데 비벼대며 
중얼거렸다. </서술>
<대화>설렁탕을 사다 놓았는데 왜 먹지를 못하니, 왜 먹지를 못하니……괴상하게도 오늘은 운수가 
좋더니만……</대화>

<글설명>현진건의 '운수 좋은 날' 中</글설명>

ex) h1 태그는 제목을 p 태그는 텍스트 단락을 표현한다.

HTML
<h1>거북이손가락의 웹사이트</h1>
<p>태그를 통해서 정보사이의 위계를 정하고 성격을 구분할 수 있습니다.</p>

HTML 태그안에는 속성을 이용해서 해당요소에 대한 추가정보를 정의할 수 있다.

HTML
<태그명 속성명="속성값">...</태그명>

<div class="header">...</div> <!-- div 태그에 class속성을 이용해서 요소의 class명을 지정했다. -->
<img src="img/thumbnail.jpg">  <!--  img 태그에 src속성을 이용해서 불러올 이미지경로를 지정했다. -->

HTML 문서의 구조

HTML문서는 html요소를 최상위 요소로 head요소와 body요소로 나눠진다. head는 문서자체에 대한 정보를 body는 접속자가 보게될 컨텐츠를 담는다.

HTML
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>사이트제목</title>
    </head>
    <body>
        여기 컨텐츠가 들어간다
    </body>
</html>

CSS 문법

CSS (Cascading Style Sheets)는 HTML로 작성된 문서의 디자인적인 표현을 기술하기 위해 쓰이는 스타일시트 언어이다.

CSS
선택자 { 속성 : 속성명 ; }

/* ex */

p { text-decoration:underline; }

div {
        width:500px;
        height:100px;
        font-size:15px;
        line-height:25px;
        color:white;
    }

선택자란 말 그대로 선택을 해주는 요소이다. 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 된다.

가상 클래스(pseudo-class)

선택한 요소가 특정한 상황일때 스타일을 적용한다.

선택자:hover - 마우스를 오버했을 때
선택자:active - 마우스를 클릭할 때

선택자:link - 방문 전 링크
선택자:visitied - 방문 후 링크

HTML
<a>마우스 오버</a>
CSS
/* 마우스를 올리면 배경색이 회색에서 빨간색으로 변한다 */
a { background-color : gray; }
a:hover { background-color : red; }

캔버스 요소 (canvas element)

스크립트를 이용하여 그래픽을 표현할 수 있는 HTML5의 요소이다. 앞으로 P5.js라는 JavaScript 라이브러리를 이용해 Canvas요소에 그래픽을 표현하고 인터랙션을 구현하는 법을 배운다.

HTML
<canvas></canvas>
JavaScript
function setup(){
    // 가로 700, 세로 489 픽셀의 캔버스요소를 만들어라
    createCanvas(700, 489);
    
    // 다음에 오는 도형들은 테두리를 없애라
    noStroke();
};
    
function draw(){
    // 배경색을"#282c34"으로 칠해라
    background("#282c34");
    
    // 마우스버튼이 눌렸다면 RGB(255,100,0)를, 아니라면 grayscale(245)를 도형에 칠해라
    if( mouseIsPressed ) fill(255,100,0);
    else fill(245);
    
    // mouseX, mouseY위치에 가로 70, 세로 70 픽셀의 원을 그려라
    ellipse(mouseX, mouseY, 70, 70);
};
Canvas