tell a story & pixel artsoftware.kr/main/upload/tchmtr/attfile/1576035096365.pdf ·...

Tell a Story &Pixel art

Simple coding for total beginners

HTML & CSS

{c

ode club}

www.codeclub.org

{c

ode club}

www.codeclub.org

{c

ode club}

www.codeclub.org

CodingIw

ww.codeclub.org

{code club}

Coding

Star

{c

ode club}

www.codeclub.org

{code club}

www.codeclub.orgFirst published in 2018 by Raspberry Pi Trading Ltd, Station Road, Cambridge, CB1 2JH

Writers: Rik Cross, Tracy Gardner

Illustrator: Timothy Winchester • Design: Critical Media

Editor: Phil King • Sub Editor: Nicola King

Publisher: Russell Barnes • CEO: Eben Upton

Projects tested by: Alexander King & the Code Club community

ISBN: 978-1-912047-67-3

Printed in China

The publisher, and contributors accept no responsibility in respect of any omissions, errors or issues relating to goods, software, viruses, or exposure to harmful web content on websites other than its own. Except where stated, the content of this book is licensed

under Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported (CC BY-NC-SA 3.0)

COPYRIGHT ⓒ2019 CODE CLUB Republic of KOREA.

발행일

Nov 2019

발행처

04789 서울특별시 성동구 왕십리로 130, 10층

(사)코드클럽한국위원회

교육문의

Tel. +82-2-792-0615Fax. +82-2-6213-0615Email. [email protected]

개념알고넘어가기HTML&CSS

1

“HTML 이란?

Hyper Text Mark up Language 약어로

Hyper Text(웹 페이지에서 다른 페이지로 이

동할 수 있도록 하는 것)기능을 가진 문서를 만

드는 언어이다. 다시 말해, 구조를 설계할 때

사용되는 언어로 Hyper Link(연결) 시스템을

가지고 있으며, 흔히 말하는 웹페이지를 위한

마크업 언어라고 할 수 있다.

*Mark up Language: 문서에 포함된 문장이나

그림, 표 소리 등과 같은 문서 내용에 대한 정보가

아니라 그 문장과 그림, 표는 어떻게 배치되고 글자

는 어떤 크기와 모양을 가지며, 들여쓰기와 줄 간격,

여백 등에 대한 정보를 의미한다.

코딩이란?

특정한프로그래밍언어를작성하는행위를의미한다. Code(코드) + ing(~중)의합성어로, 코드를작성하는것을의미하며, ‘프로그래밍한다’ 라는말과동일하다.

퍼블리싱이란?

웹/앱분야중최종단말(ex:브라우저)에서표현되는내용을작성하는행위를말한다. 주로 HTML, CSS, JAVAscript와같은언어를이용하여브라우저에보여지는최종적인형태를만들어내는것을의미한다.

1

{c

ode club}

www.codeclub.org

{c

ode club}

www.codeclub.org

{c

ode club}

www.codeclub.org

CodingIw

ww.codeclub.org

{code club}

Coding

Star

{c

ode club}

www.codeclub.org

{code club}







ISBN: 978-1-912047-67-3

Printed in China



개념알고넘어가기HTML&CSS

2

“CSS 란?

CSS(Cascading Style Sheet)는

마크업 언어가 실제 표시되는 방법을

기술하는 언어로서, HTML과 XHTML

에 주로 쓰이며, XML에도 사용할 수

있다. 다시 말해, HTML 문서를 스타

일링 하는 언어로 HTML 문서에서

Link 요소를 사용해 CSS파일을 읽어

들이면 HTML 문서의 구조를 CSS를

통해 스타일링 하게 됩니다.

“HTML은구조(모델)에해당하고, CSS는비주얼(표현)에해당된다.그리고이러한구조, 비주얼은분리하여인지해야한다.자바스크립트까지포함한다면크게구조, 표현, 제어가분리되어사용되는것이다.

“2

{c

ode club}

www.codeclub.org

{c

ode club}

www.codeclub.org

{c

ode club}

www.codeclub.org

CodingIw

ww.codeclub.org

{code club}

Coding

Star

{c

ode club}

www.codeclub.org

{code club}







ISBN: 978-1-912047-67-3

Printed in China



소개이�프로젝트에선�웹페이지를�만들어�이야기나�농담, 시를�전할�것입니다.

Activity Checklist

Test your Project

Save your Project

Follow these INSTRUCTIONS one by one

Click on the green flag to TEST your code

Make sure to SAVE your work now

이야기 해주세요HTML &CSS

SOUTH KOREA

1

All Code Clubs must be registered. By registering your club we can measure ourimpact, and we can continue to provide free resources that help children learn tocode. You can register your club at code clubworld.org.

모든 Code Club회원에게 회원 가입을 추천합니다. 우리는 가입자 수를 체크하여 우리 의 기여

도를 판단하고, 이를 바탕으로 계속해서 어린이들이 무료로 코딩을 배울 수 있 는 컨텐츠를 제

공할 수 있습니다. 가입은 codeclubworld.org 에서 할 수 있습니다.

33

모든 Code Club회원에게 회원 가입을 추천합니다. 우리는 가입자 수를 체크하여 우리의 기여



1단계 : 줄거리를 정해주세요

2단계 : 이야기 수정하기

코딩�하기�전에�먼저�전해줄�이야기를�정해야�합니다.

이야기를�담을�웹페이지의 HTML 콘텐츠와 CSS 스타일을�수정하는�것으로�시작합시다.

전하고�싶은�이야기에�대해서�생각해보세요. 다음�중�하나일�수�있습니다:

혹은�이야기일�필요도�없이�농담이나�시�혹은�원하는�무엇이던�괜찮습니다!

유명한�이야기;

단계별�체크리스트

이�트링켓을�여세요 : http://jumpto.cc/web-story 혹은�온라인으로�읽고�있다면 아래의 embed 된�트링켓을�사용하세요.

2

직접�만든�이야기;

당신이나�알고있던�사람이�겪었던�이야기.

44










2



4










2



란 __division__의�줄임�말이며�몇가지를�뭉쳐�구분하는데�사용됩니다. 이�웹페이지에선 div를�사용해�이야기의�부분들을�뭉쳐�구분할�것입니다;

란 __헤딩__입니다. 1에서 6 사이의�숫자를�사용해�다른�크기의�헤딩을�만듭니다;

3

'Happy Birthday' 프로젝트에서�배웠듯이�웹페이지의�내용은 HTML 문서의 안으로�들어갑니다.

코드의 7번째�줄로�가면 와 태그�안에�들어있는웹페이지�콘텐츠가�보일�것입니다.

웹페이지의�부분들을�만들기�위해�어떤�태그가�사용되고�있는지�알�수�있겠�나요?

<body>

<body>

<h1>

<img>

<p>

<div>

</body>

란 __이미지__입니다;

는�텍스트 __문단__ 입니다.

55

4

도전과제 : 수정해보세요

HTML 과 CSS 코드를�수정해�웹페이지를�수정해보세요.

웹페이지에�사용되는�색을�바꾸거나�다음의�폰트들을�사용해볼�수�있습니다.Arial, Comic Sans, Impact, Tahoma

도움이�필요하다면 'Happy Birthday' 프로젝트를�참조하세요.

프로젝트를�저장하세요

66

4






64






5

3단계 : 이야기 전하기

이야기의�두번째�부분을�더해봅시다.


코드의 17번쨰�라인으로�간�후 와 태그를�한�개씩�더해주세요.이것으로�이야기의�다음부분을�전할�새�박스가�만들어�질것입니다.

<div> </div>

태그�안에�문단을�더하세요. <div>

77

6

마지막으로�이�박스에�다음�코드를 태그�안에�더해서�이미지를더할�수�있습니다:

태그는�다른�태그와는�다르게�마침�태그가�없다는데�유의해주세요.

<div>

<img>

HTML 이미지는�이미지의 source 를 speech marks안에�더해야�합니다.이야기에�넣을�이미지를�찾아봅시다.

http://jumpto.cc/web-images 로�간�후�이야기에�더하고�싶은�이미지를�찾아보세요.

이미지를�오른쪽�클릭�하고 'Copy image URL'을�클릭하세요. URL이란�이미지의�주소입니다.

< i m g s rc = " " >

88

6



<div>

<img>




< i m g s rc = " " >

86



<div>

<img>




< i m g s rc = " " >

트링켓�계정이�있다면�웹페이지에�직접�이미지를�업로드�할�수�있습니다!트링켓�상단의�이미지�아이콘을�클릭하고 'upload'를�클릭하세요.

7

<img>URL을 tag 안의 speech marks 에�붙여�넣으세요.이미지가�나타날�것입니다!

컴퓨터에서�원하는�이미지를�찾아서�트링켓으로�드래그�해�넣으세요.

99

그리고�다음과�같이�이미지의�이름을 태그의 speech marks 사이에넣으면�됩니다:

8


도전과제 : 계속�하세요!

이�프로젝트에서�배운�것을�사용해�이야기를�끝마치세요!다음은�예시입니다:


<img>

< i m g s rc = " b u i l d i n g s . p n g " >

1010

그리고�다음과�같이�이미지의�이름을 태그의 speech marks 사이에넣으면�됩니다:

8


도전과제 : 계속�하세요!

이�프로젝트에서�배운�것을�사용해�이야기를�끝마치세요!다음은�예시입니다:


<img>

< i m g s rc = " b u i l d i n g s . p n g " >

10

소개이�프로젝트에선�픽셀�미술�편집기를�만들�것이고 HTML과 CSS를�사용하는것과더불어�자바스크립트를�사용하여�프로젝트에�상호작용을�넣는�방법을�배울�것입니다.

편집기�사용하는�방법: 팔레트에서�색깔을�클릭하여�펜�색을�선택하고�픽셀들을�클릭해서색을�바꾸세요.

Activity Checklist

Test your Project

Save your Project




픽셀 미술HTML &CSS

SOUTH KOREA

10


모든 Code Club회원에게 회원 가입을 추천합니다. 우리는 가입자 수를 체크하여 우리 의 기여



1111



Activity Checklist

Test your Project

Save your Project





2 SOUTH KOREA

10


1단계 : 픽셀 격자 만들기

픽셀�그림을�그리는데�사용될�픽셀�격자를�만들어�봅시다.CSS에선�격자와�테이블�배치를�위한�테이블�스타일이�제공됩니다.

테이블엔�칸들이�포함되는�행들이�있습니다. 검은색�배경의�테이블을�만들고�흰색�픽셀을�집어넣죠.

다음�트링켓을�여세요: http://jumpto.cc/web-pixel 만약�온라인에서읽고�있다면�아래의 embedded 된�트링켓을�사용하세요.


다음 html을 파일의 로�넣어서�픽셀미술의�컨테이너로사용될 를�만들고 id를�줘서�스타일�할�수�있게�만드세요.

이제 파일로�가서 art 의�테이블�스타일링을�넣으세요.픽셀�줄�셋이�모두�같다는데�유의하세요. 첫번째를�타자�쳐�넣고�나머지는�복사하고�붙여�넣어�만드세요.

이걸로�경계선이�있는�테이블이�만들어지고�격자�안의�크기를�정합니다.

아직�별로�재미있어�보이지�않습니다. 픽셀�행을�안에�넣어야�합니다.

<div>

<div>

<body>art

style.css

index.html

111212



Activity Checklist

Test your Project

Save your Project





2 SOUTH KOREA

10


1단계 : 픽셀 격자 만들기

픽셀�그림을�그리는데�사용될�픽셀�격자를�만들어�봅시다.CSS에선�격자와�테이블�배치를�위한�테이블�스타일이�제공됩니다.

테이블엔�칸들이�포함되는�행들이�있습니다. 검은색�배경의�테이블을�만들고�흰색�픽셀을�집어넣죠.

다음�트링켓을�여세요: http://jumpto.cc/web-pixel 만약�온라인에서읽고�있다면�아래의 embedded 된�트링켓을�사용하세요.


다음 html을 파일의 로�넣어서�픽셀미술의�컨테이너로사용될 를�만들고 id를�줘서�스타일�할�수�있게�만드세요.

이제 파일로�가서 art 의�테이블�스타일링을�넣으세요.픽셀�줄�셋이�모두�같다는데�유의하세요. 첫번째를�타자�쳐�넣고�나머지는�복사하고�붙여�넣어�만드세요.

이걸로�경계선이�있는�테이블이�만들어지고�격자�안의�크기를�정합니다.

아직�별로�재미있어�보이지�않습니다. 픽셀�행을�안에�넣어야�합니다.

<div>

<div>

<body>art

style.css

index.html

1112

이제 파일로�돌아가서 art 안에 3행의�픽셀을�더하세요: <div>index.html

다음�스타일을�행과�칸에�넣어주세요:

이제�픽셀�두�행을�더하여 3x3 격자를�만드세요. 복사�붙여넣기로�시간을아끼는�걸�잊지�마세요.

이번엔�여러�개가�있기�때문에 class를�사용하여 div들을�스타일�합니다.

이제�픽셀들은�검은색�줄�테두리가�있는�격자�안으로�정리될�것입니다.

121313






12

도전과제 : 격자�크기�재설정하기

3x3 은�픽셀그림을�그리기엔�꽤나�작은�크기입니다. 더�크게�만들�수�있나요? 8x8이�픽셀�그림을�그리는데�적당한�크기입니다.

전부�타자�쳐�넣는�것보다�복사�붙여넣기를�활용해보세요.


2단계 : 픽셀을 색칠하세요

HTML 콘텐츠를�정리하고 CSS 는�스타일�하는데�사용됩니다. 자바스크립트는�웹페이지에�상호작용을�넣어주는�프로그램�언어입니다.

HTML & CSS를�사용하여�각�배경�픽셀의�색깔을�정해줄�수�있지만�그건�느린�방법입니다! 대신�자바스크립트�코드를�사용하여�클릭하면�픽셀을�자동으로�색칠하게�만들�것입니다.

131414






12

도전과제 : 격자�크기�재설정하기

3x3 은�픽셀그림을�그리기엔�꽤나�작은�크기입니다. 더�크게�만들�수�있나요? 8x8이�픽셀�그림을�그리는데�적당한�크기입니다.

전부�타자�쳐�넣는�것보다�복사�붙여넣기를�활용해보세요.


2단계 : 픽셀을 색칠하세요

HTML 콘텐츠를�정리하고 CSS 는�스타일�하는데�사용됩니다. 자바스크립트는�웹페이지에�상호작용을�넣어주는�프로그램�언어입니다.

HTML & CSS를�사용하여�각�배경�픽셀의�색깔을�정해줄�수�있지만�그건�느린�방법입니다! 대신�자바스크립트�코드를�사용하여�클릭하면�픽셀을�자동으로�색칠하게�만들�것입니다.

1314

자바스크립트에선�코드를�돌리려고�할�때�부를 안에�넣습니다.

라는�함수를�만들�것입니다.

함수�어느�픽셀의�색을�바꿀지�알아야�합니다. 이것이 입니다.

다음�코드를 파일에�더해�픽셀의�배경색을�정하게�만드세요:

이제�픽셀을�클릭하면�그�함수를�불러와야�합니다.

HTML 은 을�사용해서�요소를�클릭했을�때�함수를�불러옵니다. 'this'를 input으로�지정해서�함수가�어느�픽셀의�색을�바꿀지�알�수�있게�만드세요.

으로�간�후�다음�코드를�첫번째�픽셀에�더해주세요:

function(함수)

setPixelColour

setPixelColour input

script.js

onclick

index.html

141515








function(함수)

setPixelColour


script.js

onclick

index.html

14

첫번째�코드를�클릭해서�코드를�시험해보세요. 검은색이�되야�합니다.

지금은 코드를�첫번째�픽셀에만�더했으므로�다른�픽셀�들에는�아직�없습니다.onclick

151616








function(함수)

setPixelColour


script.js

onclick

index.html

14

첫번째�코드를�클릭해서�코드를�시험해보세요. 검은색이�되야�합니다.

지금은 코드를�첫번째�픽셀에만�더했으므로�다른�픽셀�들에는�아직�없습니다.onclick

1516

3단계 : 색깔 팔레트 추가하기

실수하면�픽셀�색을�다시�흰색으로�못�돌리는게�짜증나지�않으셨�나요?색�팔레트를�만들어서�색을�클릭하면�펜�색을�바꾸게�만들어�그�문제를�고쳐봅시다.

도전과제 : 모든�픽셀들�클릭�가능하게�만들기

모든�픽셀들이�클릭�가능하게�만들�수�있나요?복사�붙여넣기로�더�빠르게�작업하세요.

픽셀그림을�빠르게�그려보세요.

팁: Autorun 을�클릭해서�모든�픽셀들을�지울�수�있습니다.

먼저�펜�스타일을�만드세요.

파일�맨�아래에�다음�코드를�넣으세요:style.css

161717









16

이제�그�스타일을�사용할�검은색과�흰색�펜을�만드세요.

다음�코드를 에서 뒤에�넣으세요:

HTML 안에 CSS 넣게�해줍니다, 여기�선�유용하죠.

팔레트에서�펜�색을�클릭하면�펜의�색이�바뀌게�만들어야�됩니다.변수는�정보를�저장하기�위해�사용됩니다. 에�펜�색깔�변수를�만들어보죠.다음코드를�파일�맨�위에�넣으세요.

그리고�펜�색깔을�바꿀�함수를�더하세요:

index.html <body>

script.js

style=

171818









16

이제�그�스타일을�사용할�검은색과�흰색�펜을�만드세요.

다음�코드를 에서 뒤에�넣으세요:

HTML 안에 CSS 넣게�해줍니다, 여기�선�유용하죠.

팔레트에서�펜�색을�클릭하면�펜의�색이�바뀌게�만들어야�됩니다.변수는�정보를�저장하기�위해�사용됩니다. 에�펜�색깔�변수를�만들어보죠.다음코드를�파일�맨�위에�넣으세요.

그리고�펜�색깔을�바꿀�함수를�더하세요:

index.html <body>

script.js

style=

1718

또한�픽셀의�색을�바꿀�때�펜�색깔도�필요할�것입니다.

함수을 대신 변수를�사용하게�만드세요:

이제�펜�색을�눌렀을�때 함수를�불러오게�해야�합니다.

강조된 코드를�펜�색에�더하세요:

이제�픽셀에�색을�넣었다�지울�수�있는지�펜�색을�바꿔가면서�확인해보세요.


setPixelColour

setPenColour

penColourblack

onclick

181919







setPixelColour

setPenColour

penColourblack

onclick

18 19

도전과제 : 팔레트에�색�더�더하기.

팔레트에�색을�더�더할�수�있나요? 픽셀그림을�그리고�싶은�색을�정해서�넣어보세요.

그리고�멋진�픽셀�그림을�그리세요.

힌트: 밝은�초록색은 란�이름입니다.

클럽�리더에게 Windows Snipping Tool이나�다른�방법으로�오늘�그린�픽셀�그림을저장할�수�있는지�물어보세요.

chartreuse


2020







setPixelColour

setPenColour

penColourblack

onclick

18 19

도전과제 : 팔레트에�색�더�더하기.

팔레트에�색을�더�더할�수�있나요? 픽셀그림을�그리고�싶은�색을�정해서�넣어보세요.

그리고�멋진�픽셀�그림을�그리세요.

힌트: 밝은�초록색은 란�이름입니다.

클럽�리더에게 Windows Snipping Tool이나�다른�방법으로�오늘�그린�픽셀�그림을저장할�수�있는지�물어보세요.

chartreuse


20

w

ww.codeclub.org

{code club}

{c

ode club}

www.codeclub.org

code!I can

www.codeclub.org

{code club}

{code club}

www.codeclub.org

whenclickedsay I can code!

{code club}

w

ww.codeclub.org

‘코드 클럽(Code Club)’은 영국 라즈베리파이재단에서 운영하는 무료 소프트웨어 교육

프로그램으로, 전 세계 어린이들이 처해진 환경에 상관없이 누구나 동일하게 소프트웨

어 교육을 받을 수 있도록 선생님과 자원 봉사자들에게 교육 커리큘럼과 운영 시스템

을 무상으로 제공하고 있습니다.

“모든 아이들이 열정과 디지털 메이킹 능력을 갖출 수 있는 세상을 만듭니다.”

“소프트웨어 교육의 로컬 에듀를 실현합니다.”

*로컬 에듀(LOCALEDU): 아이들에게 자신들이 나고 자란 지역을 가르 피고, 그 지역의 주민들과 상생할 수

있는, 그리고 나아가 그 지역에서 살아갈 수 있게 하는 교육을 의미, 즉, 학교(교사, 학부모, 학생), 교육청, 그

리고 지자체가 소통할 수 있는 통로를 만들어 협력하는 관계를 구축한다는 뜻.

LEARN

모든 아이들이 디지털 메이커로

서의 잠재력을 실현해 가는SW

교육 환경을 만들어갑니다

TEACH

교육봉사자들이 지속적으로 전

문성을 키워나갈 수 있도록 가

르치기좋은환경을만들어갑니다

SHARE

디지털 메이커들이 더 나은 교

육을 제공받을 수 있도록 정보

를나누는 환경을 만들어갑니다

코드클럽한국위원회 소개

Misson

Vision

핵심전략

후원 문의

코드클럽은 어린이를 위해 sw 교육기부를 실천하는 비영리 단체입니다.

여러분의 따뜻한 관심과 지원이 우리 아이들이 디지털 메이킹 능력을 갖출 수 있는 저변 확대를 위한

소중한 지지대가 됩니다.

코드클럽에서는 도움을 주실 후원 단체, 개인을 찾고있습니다. 많은 관심과 지원을 부탁합니다

문의 전화 : 02-792-0615

메일 : [email protected]

tell a story & pixel artsoftware.kr/main/upload/tchmtr/attfile/1576035096365.pdf ·...

Documents