제로원:활동자료/2020-04-24 문서 원본 보기

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

== 미리 준비할 것 ==

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

== 웹사이트의 구성요소 ==

* WWW: 월드 와이드 웹(World Wide Web)의 약자로, 우리가 크롬이나 엣지와 같은 웹브라우저로 이용하는 인터넷 서비스의 일종이다. 줄여서 웹이라고도 하며, 우린 컴퓨터에서 주로 웹을 통해 검색을 하거나, 뉴스를 보거나, 위키를 편집하거나, 동영상을 보는 등 다양한 활동을 할 수 있다.
* HTML: 하이퍼텍스트 마크업 언어(HyperText Markup Language)의 약자로, 우리가 보는 웹사이트의 정보와 구조를 표현하는 마크업 언어<ref>마크업 언어란 쉽게 말해 정보를 텍스트 파일로 구조화하는 언어이다.</ref>이다.
* CSS: 캐스캐이딩 스타일 시트(Cascading Style Sheet)의 약자로, 웹사이트에서 대부분의 서식(글꼴, 테두리, 색상, 크기, 배치 등)을 표현하는 언어이다.
* Javascript: 자바스크립트는 간단히 말해 웹사이트에서 프로그램을 실행하기 위한 언어이다.

이 사이트도 HTML, CSS, Javascript로 이루어졌는데, 이는 웹브라우저의 개발자 도구를 통해 확인할 수 있다. 개발자도구는 보통 <F12>를 누르면 나온다.

== Javascript 사용하기 ==
자바스크립트는 다음 방법들을 통해 실행할 수 있다.

* 개발자도구 콘솔을 통해 자바스크립트 코드를 실행할 수 있다.
* HTML에 <script> 태그를 통해 자바스크립트를 넣을 수 있다.
** 태그 안에 코드를 직접 넣을 수 있다.<syntaxhighlight lang="html">
<script>
    alert("Hello, world!");
</script>
</syntaxhighlight>
** 외부 파일을 태그를 통해 불러올 수 있다.<syntaxhighlight lang="html">
<script src="script.js"></script>
</syntaxhighlight>

HTML 요소의 내용이나 서식을 바꾸고 싶은가? <code>document.getElementById("ID")</code> 함수를 쓰면 된다. 다음 예제를 참고하라.<syntaxhighlight lang="html">
<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>

</syntaxhighlight>