제로원:활동자료/2020-04-24 - 편집 역사

2020년 4월 23일 (목) 12:05에 안중원님의 편집

2020-04-23T12:05:43Z

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

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

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

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

	==각주==		==각주==
	<references />		<references />
	[[분류:제로원 활동자료]]		[[분류:제로원 활동자료]]

2020년 4월 23일 (목) 11:52에 안중원님의 편집

2020-04-23T11:52:37Z

← 이전 판		2020년 4월 23일 (목) 11:52 판
73번째 줄:		73번째 줄:
	</syntaxhighlight>http://tjhswiki.com/fakeaphorism/<nowiki/>에 [[안중원]]이 만든 웹사이트가 있는데, HTML, CSS, Javascript에서 가장 기초적인 것들로 만들었으니 참고해도 좋겠다. 링크로 들어가서 <F12>를 눌러보자. 또는 [[제로원:SFTP\|SFTP]]로 내려받아서 편집기로 열어보아도 된다.		</syntaxhighlight>http://tjhswiki.com/fakeaphorism/<nowiki/>에 [[안중원]]이 만든 웹사이트가 있는데, HTML, CSS, Javascript에서 가장 기초적인 것들로 만들었으니 참고해도 좋겠다. 링크로 들어가서 <F12>를 눌러보자. 또는 [[제로원:SFTP\|SFTP]]로 내려받아서 편집기로 열어보아도 된다.

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

	== 각주 ==		==각주==
	<references />		<references />
			[[분류:제로원 활동자료]]

2020년 4월 23일 (목) 11:51에 안중원님의 편집

2020-04-23T11:51:02Z

← 이전 판		2020년 4월 23일 (목) 11:51 판
1번째 줄:		1번째 줄:
	2020년 4월 24일 금요일 [[ZERO-ONE]] 활동 자료입니다. HTML, CSS, Javascript로 웹사이트를 만들어봅시다.		2020년 4월 24일 금요일 [[ZERO-ONE]] 활동 자료입니다. HTML, CSS, Javascript로 웹사이트를 만들어봅시다.

	== 미리 준비할 것 ==		==미리 준비할 것==

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

	== ~~웹사이트의 구성요소~~ ==		==몇 가지 개념==

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

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

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

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

	</syntaxhighlight>		</syntaxhighlight>사용자에게서 입력을 받고 싶다면 <input> 태그를 사용해보자.<syntaxhighlight lang="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>

			</syntaxhighlight>http://tjhswiki.com/fakeaphorism/<nowiki/>에 [[안중원]]이 만든 웹사이트가 있는데, HTML, CSS, Javascript에서 가장 기초적인 것들로 만들었으니 참고해도 좋겠다. 링크로 들어가서 <F12>를 눌러보자. 또는 [[제로원:SFTP\|SFTP]]로 내려받아서 편집기로 열어보아도 된다.

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

			== 각주 ==
			<references />

안중원: 새 문서: 2020년 4월 24일 금요일 ZERO-ONE 활동 자료입니다. HTML, CSS, Javascript로 웹사이트를 만들어봅시다. == 미리 준비할 것 == * 웹브라우저(크롬이...

2020-04-23T11:25:07Z

새 문서: 2020년 4월 24일 금요일 ZERO-ONE 활동 자료입니다. HTML, CSS, Javascript로 웹사이트를 만들어봅시다. == 미리 준비할 것 == * 웹브라우저(크롬이...

새 문서

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>