제로원:활동자료/2020-04-24

통진고위키

2020년 4월 24일 금요일 ZERO-ONE 활동 자료입니다. HTML, CSS, Javascript로 웹사이트를 만들어봅시다.

미리 준비할 것

  • 웹브라우저(크롬이나 엣지, 파이어폭스 등등..): 설마 없진 않겠지. 만일 익스플로러를 쓸 생각이라면 이 동아리를 나가도 좋다. (익스플로러 혐오는 인의예지에 더불어 인간의 필수 덕목 중 하나이다)
  • 편집기: Sublime Text이나 Atom, Notepad++ 등을 추천한다. 메모장을 써도 되긴 하지만 코드 편집기를 한번 쓰고나면 프로그래밍할 때 메모장은 다시는 못 쓸 것이다. 참고로 안중원이 쓰는 건 vim이다.

몇 가지 개념

  • 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>
HTML 요소의 내용이나 서식을 바꾸고 싶은가? 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>
사용자에게서 입력을 받고 싶다면 <input> 태그를 사용해보자.
<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>
http://tjhswiki.com/fakeaphorism/에 안중원이 만든 웹사이트가 있는데, HTML, CSS, Javascript에서 가장 기초적인 것들로 만들었으니 참고해도 좋겠다. 링크로 들어가서 <F12>를 눌러보자. 또는 SFTP로 내려받아서 편집기로 열어보아도 된다.

Canvas 맛보기

오늘은 맛만 볼 것이다. 요리는 나중에 해보자. http://tjhswiki.com/voidnservice/. 여기에서는 2000년대를 뜨겁게 달구었던 Avoid n Survive의 아류작을 만나 볼 수 있다. 사실 하늘에서 떨어지는 공을 피할 뿐이다. 주목할 점은 이 게임은 Avoid n Survive와 달리 플래시를 쓰지 않았다는 것이다. 오직 HTML과 JS[2]만 사용해서 만들었다. 안중원이 아직 CSS를 잘 모를 때 만들어서 CSS는 일체 안 쓰였다. 이러한 화려한 그래픽을 가능하게 하는 것은 바로 <canvas>라는 태그인데, 이번 활동에 모두 담기엔 분량과 난이도가 있기에 맛만 보기로 한다.

만들기

웹사이트(아주 간단한 거라도 좋다)를 하나씩 만들어보자. 그냥 줄글에 몇가지 서식 적용한 것이라도 좋고, 자바스크립트와 CSS를 추가하면 각각 가산점 0점이 부여된다. 자기 컴퓨터에서 만들어서 크롬으로 열어서 잘 실행되는지 확인한 뒤, SFTP로 올리도록 하자.

다음 경로에 올리도록 한다:

  • /var/www/html/clubactivity/2020-04-24/
    • 자기사이트이름/ 영문자와 하이픈(-)으로 이루어진 이름을 추천한다. 예: bob-dodug
      • index.html HTML 파일명은 반드시 이렇게 하도록 하자.
      • script.js 자바스크립트나 CSS 파일이 있으면 같은 폴더에 넣어준다. 없으면 굳이 안 만들어도 된다. 파일 이름은 자기 맘대로 해도 된다.
      • style.css

각주

  1. ↑ 마크업 언어란 쉽게 말해 정보를 텍스트 파일로 구조화하는 언어이다.
  2. ↑ JavaScript의 약어
원본 주소 "http://wiki.tjhswiki.com/w/index.php?title=제로원:활동자료/2020-04-24&oldid=3102"