제로원:활동자료/2020-04-24
통진고위키
2020년 4월 24일 금요일 ZERO-ONE 활동 자료입니다. HTML, CSS, Javascript로 웹사이트를 만들어봅시다.
미리 준비할 것
몇 가지 개념
- WWW: 월드 와이드 웹(World Wide Web)의 약자로, 우리가 크롬이나 엣지와 같은 웹브라우저로 이용하는 인터넷 서비스의 일종이다. 줄여서 웹이라고도 하며, 우린 컴퓨터에서 주로 웹을 통해 검색을 하거나, 뉴스를 보거나, 위키를 편집하거나, 동영상을 보는 등 다양한 활동을 할 수 있다.
- HTTP: 하이퍼텍스트 전송 규약(HyperText Transfer Protocol)의 약자로, WWW에서 웹사이트를 전송하기 위한 규약이다.
- HTML: 하이퍼텍스트 마크업 언어(HyperText Markup Language)의 약자로, 우리가 보는 웹사이트의 정보와 구조를 표현하는 마크업 언어[1]이다.
- CSS: 캐스캐이딩 스타일 시트(Cascading Style Sheet)의 약자로, 웹사이트에서 대부분의 서식(글꼴, 테두리, 색상, 크기, 배치 등)을 표현하는 언어이다.
- Javascript: 자바스크립트는 간단히 말해 웹사이트에서 프로그램을 실행하기 위한 언어이다.
이 사이트도 HTML, CSS, Javascript로 이루어졌는데, 이는 웹브라우저의 개발자 도구를 통해 확인할 수 있다. 개발자도구는 보통 <F12>를 누르면 나온다.
Javascript 사용해보기
자바스크립트는 다음 방법들을 통해 실행할 수 있다.
- 개발자도구 콘솔을 통해 자바스크립트 코드를 실행할 수 있다.
- HTML에 <script> 태그를 통해 자바스크립트를 넣을 수 있다.
- 태그 안에 코드를 직접 넣을 수 있다.
<script> alert("Hello, world!"); </script>
- 외부 파일을 태그를 통해 불러올 수 있다.
<script src="script.js"></script>
- 태그 안에 코드를 직접 넣을 수 있다.
document.getElementById("ID") 함수를 쓰면 된다. 다음 예제를 참고하라.<html>
<head>
<title>예제</title>
</head>
<body>
1부터 100까지 더하면 <span id="result">???</span>입니다.
<script>
a = 0;
for (i = 1; i <= 100; i++)
a += i;
elem = document.getElementById("result");
elem.textContent = a;
elem.style.color = "red";
</script>
</body>
</html>
<html>
<head>
<title>예제</title>
</head>
<body>
숫자: <input id="n" type="number"><br>
1부터 <span id="number-show">10</span>까지 더하면 <span id="result">55</span>입니다.
<script>
document.getElementById("n").addEventListener("change", function(ev) {
n = this.value;
document.getElementById("number-show").textContent = n;
a = 0;
for (i = 1; i <= n; i++)
a += i;
elem = document.getElementById("result");
elem.textContent = a;
elem.style.color = "red";
});
</script>
</body>
</html>
Canvas 맛보기
오늘은 맛만 볼 것이다. 요리는 나중에 해보자. http://tjhswiki.com/voidnservice/. 여기에서는 2000년대를 뜨겁게 달구었던 Avoid n Survive의 아류작을 만나 볼 수 있다. 사실 하늘에서 떨어지는 공을 피할 뿐이다. 주목할 점은 이 게임은 Avoid n Survive와 달리 플래시를 쓰지 않았다는 것이다. 오직 HTML과 JS[2]만 사용해서 만들었다. 안중원이 아직 CSS를 잘 모를 때 만들어서 CSS는 일체 안 쓰였다. 이러한 화려한 그래픽을 가능하게 하는 것은 바로 <canvas>라는 태그인데, 이번 활동에 모두 담기엔 분량과 난이도가 있기에 맛만 보기로 한다.
