일방적으로 정보를 받는데에 그치지 않고, 접속자가 페이지안에서 상호작용, 데이터 교류를 하는 동적인 웹을 이야기한다.
기존의 웹페이지
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 저장하기
Mac에서 텍스트 에디터로 html파일 만들기
열기 찾기> 어플리케이션> 텍스트 편집기
또한 제대로 파일을 저장하도록 응용 프로그램을 얻기 위해 몇 가지 기본 설정을 변경한다.
환경 설정> 형식> 선택 "일반 텍스트"
그런 다음 "열기 및 저장"에서, "HTML 파일에서 서식있는 텍스트 명령 무시"라는 상자를 선택한다.
그런 다음 코드를 삽입하는 새로운 문서를 연다.
※인코딩방식은 꼭 'utf-8'로 설정한다.
HTML - 하이퍼텍스트 마크업 언어는 Hyper Text(링크태그)라는 특징을 가지고 있는 Markup Language이다. 마크업 언어는 우리가 글을 쓸 때 " ", ' ', ( ), [ ] 등의 부호를 이용해 문장의 성격을 표현하듯 태그를 이용해 정보의 의미와 구조를 표현한다.
<대화>……</대화>
<대화>으응, 또 대답이 없네, 정말 죽었나보이. </대화>
<서술>이러다가 누운 이의 흰 창이 검은 창을 덮은, 위로 치뜬 눈을 알아보자마자,</서술>
<대화>이 눈깔! 이 눈깔! 왜 나를 바루 보지 못하고 천정만 바라보느냐, 응</대화>
<서술>하는 말끝엔 목이 메이었다. 그러자 산 사람의 눈에서 떨어진 닭똥 같은 눈물이 죽은 이의
뻣뻣한 얼굴을 어룽어룽 적시었다. 문득 김첨지는 미친 듯이 제 얼굴을 죽은 이의 얼굴에 한데 비벼대며
중얼거렸다. </서술>
<대화>설렁탕을 사다 놓았는데 왜 먹지를 못하니, 왜 먹지를 못하니……괴상하게도 오늘은 운수가
좋더니만……</대화>
<글설명>현진건의 '운수 좋은 날' 中</글설명>
ex) h1 태그는 제목을 p 태그는 텍스트 단락을 표현한다.
<h1>거북이손가락의 웹사이트</h1>
<p>태그를 통해서 정보사이의 위계를 정하고 성격을 구분할 수 있습니다.</p>
HTML 태그안에는 속성을 이용해서 해당요소에 대한 추가정보를 정의할 수 있다.
<태그명 속성명="속성값">...</태그명>
<div class="header">...</div> <!-- div 태그에 class속성을 이용해서 요소의 class명을 지정했다. -->
<img src="img/thumbnail.jpg"> <!-- img 태그에 src속성을 이용해서 불러올 이미지경로를 지정했다. -->
HTML문서는 html요소를 최상위 요소로 head요소와 body요소로 나눠진다. head는 문서자체에 대한 정보를 body는 접속자가 보게될 컨텐츠를 담는다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>사이트제목</title>
</head>
<body>
여기 컨텐츠가 들어간다
</body>
</html>
CSS (Cascading Style Sheets)는 HTML로 작성된 문서의 디자인적인 표현을 기술하기 위해 쓰이는 스타일시트 언어이다.
선택자 { 속성 : 속성명 ; }
/* ex */
p { text-decoration:underline; }
div {
width:500px;
height:100px;
font-size:15px;
line-height:25px;
color:white;
}
선택자란 말 그대로 선택을 해주는 요소이다. 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 된다.
선택한 요소가 특정한 상황일때 스타일을 적용한다.
선택자:hover - 마우스를 오버했을 때
선택자:active - 마우스를 클릭할 때
선택자:link - 방문 전 링크
선택자:visitied - 방문 후 링크
<a>마우스 오버</a>
/* 마우스를 올리면 배경색이 회색에서 빨간색으로 변한다 */
a { background-color : gray; }
a:hover { background-color : red; }
스크립트를 이용하여 그래픽을 표현할 수 있는 HTML5의 요소이다. 앞으로 P5.js라는 JavaScript 라이브러리를 이용해 Canvas요소에 그래픽을 표현하고 인터랙션을 구현하는 법을 배운다.
<canvas></canvas>
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);
};