Guide to Ireland 2 · 2019. 11. 12. Guide to my country 2.0 | Raspberry Pi Projects

Guide to Ireland 2.0

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-6933-0713Email. [email protected]

2019. 11. 12. Guide to my country 2.0 | Raspberry Pi Projects

https://projects.raspberrypi.org/en/projects/cd-intermediate-html-css-sushi/print 1/27

Projects

Guide to my country 2.0

Take your website design skills further!

HTML / CSS

Step 1 Introduction

Build upon your existing HTML/CSS skills to make a website and gain

more control over how it looks.

What you will make

Here is an example of how your website might look after completing

these Sushi Cards:

What you will learn

How to create your own colours using code

Ways to organise content on your website so that you can apply

styles, and to make it friendly for screen readers

How to use CSS styling to create themes as well as style individual

elements

Controlling the size of elements with di�erent kinds of

measurements

Making things happen when you hover over elements on your

page

Animating elements of your website with CSS

How to use the developer tools to sneak a peek at the code of any

website, and to test out parts of yours

What you will need

Hardware

배운 HTML/CSS 기술을 바탕으로 웹 사이트를 만들고 디자인을 더 발전시켜 보십시오.

무엇을 만들까요?

다음은 Sushi Card를 다 완료하고 난 뒤 웹사이트 모습에 대한 예시 입니다.

● 코드를 사용해서 나만의 색상을 만드는 방법.

● 웹 사이트에서 콘텐츠를 구성하는 방법을 배워 스타일을 적용하고 웹사이트를

보는 사람들에게 친근하게 만드는 방법.

● CSS styling 을 사용하여 테마와 style element를 만드는 방법.

● 여러 방법을 이용해 element의 크기를 조정하는 방법.

● Page에 있는 element위에 마우스를 가져다 대면 무언가 동작하도록 하는

방법.

● CSS를 활용하여 웹 사이트의 element가 움직이도록 하는 방법.

● developer tool을 사용하여 다른 웹 사이트의 코드를 엿볼 수 있는 방법과

내가 만든 코드를 테스트 할 수 있는 방법.

웹 사이트 디자인을 조금 더 발전시켜 봅시다!

아일랜드 안내하기 2.0

개요

무엇을 배울까요?

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}

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)



A computer capable of accessing trinket.io (https://trinket.io)

Software

This project can be completed in a web browser using trinket.io (https://trinket.io).

Step 2 Getting set up

Go to the starter trinket project at dojo.soy/html2-website-start (http://dojo.soy/html2-website-start). The examples in these Sushi

Cards are mainly based on this project.

If you prefer, you can work with a website that you already made.

I have an account on Trinket

Click the Remix button in the top right-hand corner of the project

(if you are not signed in, you will be prompted to do so. Once

you’ve signed in, you will then need to click the Remix button

again). This creates a copy of the project for you to work with.

It should say remixed after you click it:

I don't have an account on Trinket

Even if you don’t have an account, you can still work with Trinket.

Saving your work

You can save your work by using one of the options in the Sharemenu. You can either download the project or get a link that you can

save, for example in a document, or send via email.

● dojo.soy/html2-website-start (http://dojo.soy/html2-website-start)에 있는

starter trinket 프로젝트에 접속하십시오. Sushi Card에 있는 예시들은 위

프로젝트를 기반으로 합니다.

● 만약 직접 만들어 놓은 웹 사이트를 사용하고 싶다면 그렇게 해도 됩니다.

● 프로젝트 오른쪽 위에 있는 Remix 버튼을 누르십시오. 로그인 한 상태가 아니

라면 로그인 하라는 요청을 볼 수 있을 것입니다. 로그인을 하고 나면 Remix

버튼을 다시 눌러야 합니다. 이 버튼을 누르면 프로젝트의 복사본을 생성

합니다.

클릭하고나면 아래와 같이 remixed 라고 적힌 것을 확인 할 수 있습니다.

시작하기

계정이 있는 경우

2



A computer capable of accessing trinket.io (https://trinket.io)

Software

This project can be completed in a web browser using trinket.io (https://trinket.io).

Step 2 Getting set up

Go to the starter trinket project at dojo.soy/html2-website-start (http://dojo.soy/html2-website-start). The examples in these Sushi

Cards are mainly based on this project.

If you prefer, you can work with a website that you already made.

I have an account on Trinket

Click the Remix button in the top right-hand corner of the project

(if you are not signed in, you will be prompted to do so. Once

you’ve signed in, you will then need to click the Remix button

again). This creates a copy of the project for you to work with.

It should say remixed after you click it:

I don't have an account on Trinket

Even if you don’t have an account, you can still work with Trinket.

Saving your work

You can save your work by using one of the options in the Sharemenu. You can either download the project or get a link that you can

save, for example in a document, or send via email.



Note: each time you make a change to the project, you will get a new

link.

How to sign up for an account

If you want to create an account on Trinket, follow the steps below.

This will allow you to access your work easily from any computer, and

to remix projects somebody else has shared with you (meaning save

a copy to which you can make changes).

In browser tab with the starter trinket project, click Sign Up ForYour Free Account. You will need an email address to sign up.

Enter your email address and choose a password, or ask

somebody to do this for you.

You can now access all your saved or remixed projects by clicking

on your username and going to My Trinkets.

Step 3 All the colours!

As you have seen before, you can type in many di�erent colour names

as words, and the browser will recognise them. But a more common way

to set colours is to use something called hex codes (‘hex’ is short for

hexadecimal, a special way of counting).

Take a look at your style sheet. That’s the �le that has .css in the

name.

Inside the CSS rules for body, set the background colour to the hex

code #7B68EE:

background-color: #7B68EE;

계정이 없는 경우

Share 메뉴에 있는 옵션 중 하나를 사용하여 작업을 저장할 수 있습니다.

문서형태나 메일로 보내 저장할 수 있는 링크를 얻을 수 있습니다.

주의: 편집을 할 때 마다 새로운 링크가 생성됩니다.

3




link.

















name.


code #7B68EE:





link.

















name.


code #7B68EE:




Note: If you are using a Mac, you can type # by press the alt and the 3

keys at the same time.

Your website should now have a purple background.

Not a fan of purple? Go to this web page (http://dojo.soy/html2-colors) and choose another colour for your style sheet — instead of

typing the name of the colour, type in the hex code.

Colour codes allow you to create any colour, even if it’s not on any list of

colour names.

Try making up your own colour code. It must start with a #. This tells

the browser that it is a hex code instead of a colour name. The rest of

the code is made up of six characters. They can be any number from

0 to 9 and any letter from A to F.

How does it work?

Every colour is made by mixing dierent amounts of red, green, and

blue. You will sometimes see this written down as RGB. Each of these

colours is represented by two of the six digits in your HEX code. 00 is

the minimum, and FF is the maximum.

Hexadecimal is a way of counting that makes numbers shorter to

write by using the letters A-F as extra digits. The number 255 is

written as FF in hexadecimal. You don’t need to worry about learning

이전에 봤듯이 색상명을 입력하면 브라우저는 매우 많은 종류의 색상을 인식할 수 있습

니다. 그러나 색상을 사용하는 더 일반적인 방법은 hex code (hex는 hexadecimal의

약자로, 16진법을 의미합니다)로 색상을 표현하는 것입니다.

● style sheet를 살펴보십시오. 파일명에 .css를 포함한 파일이 있을 것입니다.

● body의 CSS rule안에 배경색을 hex code (#7B68EE)로 설정 하십시오.

주의: 만약 맥을 사용하고 있다면 # 문자를 alt+3 키를 눌러 입력할 수 있습니다.

웹 사이트 배경색이 보라색으로 바뀌었을 것입니다.

● 보라색을 좋아하지 않나요? http:/dojo.soy/html2-colors 에 접속하여 다른

색상을 골라 보십시오. 색상 이름을 입력하는 대신 hex code를 입력하십시오.

모든 색깔!

색상 코드를 입력하면 목록에 색상명이 없는 색상도 모두 만들어낼 수 있습니다.

● 나만의 색상 코드를 만들어 보십시오. hex code는 반드시 #로 시작해야 합니다.

그렇게 해야만 브라우저가 해당 색상 코드가 색상명이 아닌 hex code임을 인식할

수 있습니다. # 뒤는 6자리 문자로 되어 있습니다. 이 문자는 0에서 9사이의 숫자나

A에서 F 사이의 알파뱃을 사용할 수 있습니다.

4









colour names.





How does it work?







written as FF in hexadecimal. You don’t need to worry about learning2019. 11. 12. Guide to my country 2.0 | Raspberry Pi Projects


to count with hexadecimal numbers. Instead, experiment with

dierent hex codes to get used to using them.

Here are some basic colours to try out on your website. Try putting

in smaller numbers instead of FF to see how the shades change.

R G B Result

# FF 00 00 Red

# 00 FF 00 Green

# 00 00 FF Blue

# FF FF 00 Yellow

# FF 00 FF Magenta

# 00 FF FF Cyan

# FF 8c 00 Dark orange

Mixing the perfect colour can take a lot of experimenting. Luckily, there

are plenty of online colour picking tools that help you get the hex code

for any colour you want.

Try out this colour picker (http://dojo.soy/html2-color-picker) tochoose some hex colour codes to use for the rest of the styles on

your website.

Step 4 Organising your page

So far you’ve used headings and paragraphs to make your contentlook tidy and easy to read. Let’s make it even more organised by

grouping things together.

What is content?

Content is all the stu on your web page, such astext and pictures.

모든 색상은 빨강 (red), 초록 (green), 파랑 (blue)을 섞어 만듭니다. 종종 RGB라고

쓰인 것을 봤을 것입니다. hex code에서 빨강, 초록, 파랑 색상의 양을 표현하기 위

해 각각 두 글자씩 할당됩니다. 00이 가장 작은 값이고 FF가 가장 큰 값입니다.

Hexadecimal은 숫자 외에도 A에서 F까지의 문자를 추가로 사용하여 숫자를 더 짧

게 표현하는 방법입니다. Hexadecimal을 사용하면 255를 FF로 표현할 수 있습니

다. hexadecimal 숫자를 세는 방법을 배울 필요는 없으니 걱정하지 마십시오. 대신

에 서로 다른 hex code를 사용해 보십시오.

● 다음은 웹 사이트에 시도해 볼 수있는 기본적인 색상들입니다. FF대신 작은

숫자를 입력해 음영이 어떻게 변하는지 확인해 보십시오.

어떻게 동작 하나요?







R G B Result

# FF 00 00 Red

# 00 FF 00 Green

# 00 00 FF Blue

# FF FF 00 Yellow

# FF 00 FF Magenta

# 00 FF FF Cyan






your website.




What is content?


완벽한 색상을 조합하기 위해서는 많은 시도를 해야합니다. 운 좋게도 온라인에 우리가

원하는 색상의 hex code를 뽑아내는 것을 도와주는 도구가 있습니다.

● this color picker (http://dojo.soy/html2-color-picker)를 사용하여 웹 사이트의

다른 스타일을 위한 색상의 hex code를 골라 보십시오.









colour names.





How does it work?







written as FF in hexadecimal. You don’t need to worry about learning2019. 11. 12. Guide to my country 2.0 | Raspberry Pi Projects






R G B Result

# FF 00 00 Red

# 00 FF 00 Green

# 00 00 FF Blue

# FF FF 00 Yellow

# FF 00 FF Magenta

# 00 FF FF Cyan






your website.




What is content?


5







R G B Result

# FF 00 00 Red

# 00 FF 00 Green

# 00 00 FF Blue

# FF FF 00 Yellow

# FF 00 FF Magenta

# 00 FF FF Cyan






your website.




What is content?




Go to the attractions.html �le (or one of your own pages if

you’re not using the example project) and, near the top, just belowthe opening <main> tag, type the following on a new line:

<main> <article>

If your editor automatically added in a closing </article> tag for

you, delete it.

At the bottom of the �le, just above the closing </main> tag, add a

new line and close the article element:

</article></main>

Your main element should look something like this now (you might have

di�erent content in between the article tags of course):

<main> <article> <h1>My favourite places to see in Ireland</h1> <h2>The Cliffs of Moher</h2> <p> The Cliffs of Moher are found in County Clare, where I am from. Look how cool they are!</p> <img src="cliffs.JPG" alt="The Cliffs of Moher" height="200px" /> <h2>Achill Island</h2> <p>This is a large island off the coast of County Mayo. It has a wild and beautiful landscape of mountains, bogs and cliffs. </p> <img src="achill.JPG" width="200px" /> </article></main>

Now look at the content in your article and try to break it up into

sections. Put this new pair of tags around each bit: <section>

지금까지는 heading과 paragraph를 사용하여 content를 잘 정리하여 읽기 좋게 만

들었습니다. 이제 그룹을 만들어 좀더 웹 사이트를 잘 정돈해 보십시오.

● attractions.html 파일로 이동하십시오 (만약 예시 프로젝트를 사용하고 있지 않다

면 직접 만든 page 중 하나) 그런 다음 거의 제일 윗 부분 <main> tag가 시작하는 바

로 다음 부분에 다음과 같은 새 줄을 추가합니다.

● 만약 에디터가 자동으로 closing tag </article>을 추가한다면 지우십시오.

● 파일 제일 마지막 부분, closing tag </main>바로 위에 새로운 줄을 추가하고

article element의 closing tag를 추가하십시오.

Content는 텍스트나 사진과 같은 웹 페이지에 있는 모든 것을 의미합니다.

page 구성하기

Content가 무엇인가요?





<main> <article>


you, delete it.



</article></main>






main element는 다음 코드와 비슷해야 합니다 (article tag사이에 아마 다른 content

를 포함하고 있을 것입니다).

6





<main> <article>


you, delete it.



</article></main>






● 이제 article에 있는 content를 확인하고 section으로 나눠 보십시오. 나누는

부분은 각각 <section> </section> tag쌍으로 둘러 쌓여 있습니다. 그렇다면

코드는 다음과 같을 것입니다.



</section>. Here’s an example of what it might look like:

<article> <h1>My favourite places to see in Ireland</h1> <section> <h2>The Cliffs of Moher</h2> <p> The Cliffs of Moher are found in County Clare, where I am from. Look how cool they are!</p> <img src="cliffs.JPG" alt="The Cliffs of Moher" height="200px" /> </section> <section> <h2>Achill Island</h2> <p>This is a large island off the coast of County Mayo. It has a wild and beautiful landscape of mountains, bogs and cliffs. </p> <img src="achill.JPG" width="200px" /> </section></article>

What are the new tags all about?

Think of these new elements as containers. They are used to group

things together. It’s a bit like organising things in boxes and shelves in

your home!

This makes your website friendly for screen readers, gives you more

control over the layout, and, as you’ll see, it allows you to really get

creative with the styling.

Anything can go in between the tags. Usually it will be more than one

element, but it doesn’t have to be. It can be HTML elements of any

kind. What you are doing is telling the browser that everything in

between these tags belongs together.

Article

The article element is a container for a whole piece of content, in

this case a set of information about attractions in Ireland. If you have

dierent bits of content that aren’t related, you should put each one

7



</section>. Here’s an example of what it might look like:

<article> <h1>My favourite places to see in Ireland</h1> <section> <h2>The Cliffs of Moher</h2> <p> The Cliffs of Moher are found in County Clare, where I am from. Look how cool they are!</p> <img src="cliffs.JPG" alt="The Cliffs of Moher" height="200px" /> </section> <section> <h2>Achill Island</h2> <p>This is a large island off the coast of County Mayo. It has a wild and beautiful landscape of mountains, bogs and cliffs. </p> <img src="achill.JPG" width="200px" /> </section></article>

What are the new tags all about?

Think of these new elements as containers. They are used to group

things together. It’s a bit like organising things in boxes and shelves in

your home!

This makes your website friendly for screen readers, gives you more

control over the layout, and, as you’ll see, it allows you to really get

creative with the styling.

Anything can go in between the tags. Usually it will be more than one

element, but it doesn’t have to be. It can be HTML elements of any

kind. What you are doing is telling the browser that everything in

between these tags belongs together.

Article

The article element is a container for a whole piece of content, in

this case a set of information about attractions in Ireland. If you have

dierent bits of content that aren’t related, you should put each one

새로운 element를 container로 생각해 봅시다. 이것 들은 그룹을 만드는데 사용됩

니다. 마치 집에 있는 선반이나 박스에 물건을 정리하는 것과 비슷하다고 생각하면

됩니다!

새로운 element들을 사용하면 웹사이트가 보기 편해지고 레이아웃을 더 조정할

수 있습니다. 이렇게 하면 웹 사이트를 창의적으로 스타일링 할 수 있습니다.

tag 사이에는 무엇이든 들어올 수 있습니다. 일반적으로 element를 하나 이상 포

함할 수 있습니다. 하지만 반드시 그럴 필요는 없습니다. HTML element 무엇이든

상관 없습니다. 우리가 하는것은 단지 브라우저에게 tag 사이에 있는 것들이 함께

처리된다는 것을 알려주는 것입니다.

Article

article element는 모든 content를 포함하는 container입니다. 이 예시에서는 아

일랜드의 명소에 대한 정보들을 의미합니다. 만약 관계 없는 content들을 가지고

새로운 tag가 무엇이 있을까요?



into its own article element instead of putting one set of the tags

around the whole lot.

Section

The section element lets you divide up related content into smaller

chunks and put each chunk into its own container.

Others exist too!

These aren’t the only container elements in HTML. If you’ve ever

created a menu and then put it in between <nav> </nav> tags,

that’s another example of a type of container. So are <main>

</main> and <header> </header> — can you think of any more?

Your web page might not look di�erent yet, but once the content has

been organised into container tags, you’ll be able to do some cool things

to it with CSS. Remember, HTML controls how your website is organised,

and CSS controls how it looks.

Challenge: organise your website

Have a go at organising all of the content on your website using the

article and section containers in this way.

Look at the Food page of the example project. You’ll see that I’ve

added an article with a bunch of section tags into the �le

food.html:

<main> <article> <h1>Food in Ireland</h1> <p> These are some of my favourite Irish foods! </p> <section> <h2>Traditional Irish Breakfast</h2> <p> A "Full Irish" breakfast consists of sausages, rashers (bacon), eggs, black pudding, white pudding and toast. </p> <p> Often there will be a grilled tomato as well

있다면 모두를 하나의 tag로 묶지 말고 각각을 article element에 할당해야 합니다.

Section

section element는 서로 관련이 있는 content를 더 작은 부분으로 나누어 각각의

부분이 container에 포함되도록 합니다.

추가 적인 것들!

이것만이 HTML에 존재하는 container는 아닙니다. 만약 메뉴를 만들고 그것을

<nav> </nav> tag 사이에 넣었다면 이것은 또 다른 타입의 container입니다.

<main> </main>이나 <header> </header>또한 마찬가지입니다. 또 다른 것들

을 생각할 수 있습니까?

우리가 만든 웹 페이지는 아직 별로 달라 보이지 않을 것입니다. 하지만 content를

container tag를 사용해 정돈하면 CSS를 이용해 멋진 일들을 할 수 있습니다. HTML은

웹 사이트를 구성하는데 사용할 수 있고 CSS는 디자인을 조정할 수 있다는 것을 기억하

십시오.

8



cooking the cabbage in the water that the ham was boiled in. </p> <p> If there are any leftovers you can make another one of my favourites: <strong>fried cabbage</strong>! </p> </section> </article></main>

On the next card, you’ll design a di�erent theme for each page that’s

organised into articles and sections!

Step 5 Design some themes

Writing CSS rules for elements such as section and p is great, but

what if you want to make some of them look di�erent from others? On

this card you will learn how to apply di�erent sets of style rules to

elements of the same type and create a di�erent theme for each page

on your website!

Go to your style sheet �le and add the following — be sure to include

the dot in front!

.topDivider { border-top-style: solid; border-top-width: 2px; border-top-color: #F5FFFA; padding-bottom: 10px;}

Now go to attractions.html (or the HTML �le you’re working on if

you’re using your own project), and add the following attribute to

each section tag:

<section class="topDivider">

section이나 p 같은 element를 위한 CSS rule을 기술하는 것은 좋습니다. 하지만 그

중 몇몇을 다른것들과 다른 디자인으로 만들어야 한다면 어떻게 될까요? 이번 단계에

서는 element type마다 다른 style rule을 어떻게 적용하는지, 웹 페이지의 각각의

page마다 어떻게 다른 테마를 만드는지를 배워 볼 것입니다!

● style sheet 파일로 이동하여 다음 코드를 추가하십시오. 제일 앞에 점도 포함해야

하는 것에 주의하십시오!

테마 디자인하기



You should see a line appear above each section on the page.

Congratulations — you’ve just used your rst CSS class!

Look at how your web page looks now and compare it to the other

pages that have section elements. You’ll see that only the ones

where you added the attribute class="topDivider" will have the

line on top.

How does it work?

Remember that when you use a CSS selector such as section or p

or nav ul, the style rules apply to all the elements of that type on

your website.

With CSS classes, you’re able to change the style of just some of the

elements.

Putting a dot in front of your selector makes it into a class selector. A

class can have any name, so it doesn’t have to be the name of a

HTML element. For example:

.myAwesomeClass { /* my cool style rules go here */}



cooking the cabbage in the water that the ham was boiled in. </p> <p> If there are any leftovers you can make another one of my favourites: <strong>fried cabbage</strong>! </p> </section> </article></main>

On the next card, you’ll design a di�erent theme for each page that’s

organised into articles and sections!

Step 5 Design some themes

Writing CSS rules for elements such as section and p is great, but

what if you want to make some of them look di�erent from others? On

this card you will learn how to apply di�erent sets of style rules to

elements of the same type and create a di�erent theme for each page

on your website!

Go to your style sheet �le and add the following — be sure to include

the dot in front!

.topDivider { border-top-style: solid; border-top-width: 2px; border-top-color: #F5FFFA; padding-bottom: 10px;}

Now go to attractions.html (or the HTML �le you’re working on if

you’re using your own project), and add the following attribute to

each section tag:

<section class="topDivider">

● attractions.html (만약 예시 프로젝트를 사용하고 있지 않다면 직접 만든 page

중 하나) 로 이동하여 section tag 마다 다음 attribute를 추가하십시오.

page의 모든 section 마다 위에 선이 나타난 것을 확인할 수 있습니다. 축하합니다 이

제 우리는 처음으로 CSS class를 사용했습니다!








line on top.

How does it work?



your website.


elements.





9








line on top.

How does it work?



your website.


elements.







To choose which elements the style rules apply to, you add the

class attribute to those elements in the HTML code: put the name

of the class in as the value for the attribute, without the dot, like this:

class="myAwesomeClass"

Ready to try another class? Add the following CSS code to

styles.css:

.stylishBox { background-color: #87CEFA; color: #A52A2A; border-style: solid; border-width: 2px; border-color: #F5FFFA; border-radius: 10px;}

Then, on a di�erent page of your website, add the class to some

elements there. I’m going to add it to the section elements on the

Food page of my website, like this: <section

class="stylishBox">.

It looks great, but now my sections are all squashed together.

You can apply as many CSS classes to an element as you like. Just write

the names of all the classes you want to use inside the class attribute

(remember, without the dot!), separating them with spaces.

Let’s make another CSS class to give the sections some margin and

padding. In the styles.css �le, create the following CSS class:

section이나 p 혹은 nav ul 같은 CSS sector를 사용할 때 CSS rule은 웹 사이트에

있는 같은 type의 모든 element에 적용됩니다.

CSS class를 사용하면 모든 element가 아닌 일부 element의 style만 변경할 수 있

습니다.

sector 앞에 점을 찍어 class sector로 만드십시오. class 이름은 아무 이름으로나

지을 수 있어 반드시 HTML element이름일 필요는 없습니다. 예를 들어 다음과 같

습니다.

어떤 element에 style rule을 적용할지 고르기 위해 HTML 코드에 있는 원하는

element에 class attribute를 추가해야 합니다. 다음과 같이 attribute의 value로

점을 제외한 class 이름을 입력하십시오.

● 다른 class를 만들어 볼 준비가 되었나요? 다음 CSS 코드를 style.css에

추가하십시오.


● 우리가 만든 웹 사이트가 이제 어떻게 생겼는지 확인하고 section element를

포함하고 있는 다른 page와 비교해 보십시오. class=”topDivider” attribute를

추가한 section만 위에 줄이 생겼을 것입니다.








styles.css:












10



.someSpacing { padding: 10px; margin-top: 20px;}

In your html code, add the new class to each of the elements you

were working on, like this:

<section class="stylishBox someSpacing">

So CSS classes let you choose which elements to style, and they let you

reuse the same set of style rules on any elements you want.

Go to index.html and add the stylishBox class to the main

element, or another element on the page. You can remove it again

afterwards!

<main class="stylishBox">

Here’s what my home page looks like with the CSS class. I’ve also added

the topDivider class to the img tag with the picture of Tito.

Challenge: make some new classes








styles.css:












● 그런 다음 웹 사이트의 다른 page 에서 특정 element를 고르고 그곳에 class를

추가해 보십시오. 아래 예시에서는 음식 page의 section element에 class를

다음과 같이 추가하였습니다. <section class=”stylishBox”>

결과가 예뻐 보이지만 모든 section이 서로 붙어 있는 것을 확인할 수 있습니다.

우리는 element에 CSS class를 원하는만큼 추가할 수 있습니다. class attribute 내

부에 원하는 모든 class의 이름을 쓰십시오. 각각의 class 이름은 사이에 공백이 있어야

하며 이름에 점을 포함해서는 안된다는것을 기억하십시오!

● 다른 CSS class를 만들어 section 사이에 여백을 넣으십시오. styles.css 파일에

다음 CSS class를 만드십시오.

● html 코드에서 위 class를 적용할 각 element에 다음과 같은 새로운 class를

다음과 같이 추가하십시오.











afterwards!




Challenge: make some new classes

11











afterwards!




Challenge: make some new classes2019. 11. 12. Guide to my country 2.0 | Raspberry Pi Projects


Use CSS classes to de�ne a few di�erent picture sizes for your

website, for example .smallPictures and .mediumPictures.

Then remove the width attribute from each of your img elements

and add the appropriate class instead.

Here’s an img tag with a width attribute:

<img src="tito.png" alt="Tito the dog" width="100px" />

When you remove the width attribute and control the size with the

CSS class instead, it looks like this:

<img src="tito.png" class="smallPictures" alt="Tito the dog" />

By using a CSS class, you can easily change the width of all the

pictures at once by changing only one line of code in your style sheet!

Step 6 Individual style

Let’s jazz up the home page a bit! With another kind of CSS selector, you

can apply a unique set of CSS rules to just one specic element.

Go to index.html and �nd a paragraph (p) element, or add one in if

you don’t have any. Add the following attribute to the tag:

<p id="myCoolText"> My website is about Ireland. </p>

The id is a name you give a particular element to identify it. No two

elements on a page should ever have the same id!

Now go to your style sheet and add the following code:

#myCoolText { color: #003366;

● CSS class를 사용하여 예를 들어 .smallPictures 나 .mediumPictures와 같이

웹 사이트에서 사용할 서로 다른 크기의 사진을 넣을 수 있게 class를 정의해

보십시오.

다음은 width attribute를 포함한 img tag 입니다.

다음은 CSS class를 적용하여 달라진 웹 페이지의 모습입니다. Tito 사진의 img tag

에 topDivider lass도 추가하였습니다.

CSS class는 우리가 어떤 element에 style을 입힐지 고를 수 있게 도와줍니다. 그리고

같은 style rule을 원하는 다른 element에서 재사용할 수 있도록 도와줍니다.

● index.html 파일로 이동하여 stylishBox class를 main element에 추가하거나

page에 있는 다른 element에 추가해 보십시오. 나중에 다시지울 수 있으니

해보십시오!

도전: 새로운 class 만들기

12



border: 2px ridge #ccffff; padding: 15px; text-align: center;}

Your text should look like this now:

A selector with a # in front of it is used to apply CSS rules to one specic

element on your website. You specify the element with the help of the

name that you assigned the element’s id attribute.

Let’s do one for the body of the home page. Go to index.html and

add an id to the body tag.

<body id="frontPage">

In the style sheet, add the following CSS rules:

#frontPage { background: #48D1CC; background: linear-gradient(#fea3aa, #f8b88b, #faf884, #baed91, #baed91, #b2cefe, #f2a2e8, #fea3aa);}

You should get something that looks like this:



Use CSS classes to de�ne a few di�erent picture sizes for your

website, for example .smallPictures and .mediumPictures.

Then remove the width attribute from each of your img elements

and add the appropriate class instead.

Here’s an img tag with a width attribute:

<img src="tito.png" alt="Tito the dog" width="100px" />

When you remove the width attribute and control the size with the

CSS class instead, it looks like this:

<img src="tito.png" class="smallPictures" alt="Tito the dog" />

By using a CSS class, you can easily change the width of all the

pictures at once by changing only one line of code in your style sheet!

Step 6 Individual style

Let’s jazz up the home page a bit! With another kind of CSS selector, you

can apply a unique set of CSS rules to just one specic element.

Go to index.html and �nd a paragraph (p) element, or add one in if

you don’t have any. Add the following attribute to the tag:

<p id="myCoolText"> My website is about Ireland. </p>

The id is a name you give a particular element to identify it. No two

elements on a page should ever have the same id!

Now go to your style sheet and add the following code:

#myCoolText { color: #003366;

home page를 좀 더 매력적으로 만들어 봅시다! 다른 CSS selector를 사용하여 우리

는 유니크한 CSS rule을 하나의 특정한 element에 적용할 수 있습니다.

● index.html 파일로 이동하여 paragraph element (p)를 찾거나 없다면

추가하십시오. 그런 다음 다음 attribute를 tag에 추가하십시오.

CSS class를 사용하여 쉽게 모든 사진의 크기를 style sheet의 코드만 한 줄 수정하여

바꿀 수 있습니다.

width attribute를 삭제하면 CSS class를 대신 사용하여 사진의 크기를 조절할 수 있

습니다. 코드는 다음과 같습니다.

id는 특정 element에 신원을 부여 합니다. 두 개의 element에게 같은 id를 할당할 수

없습니다!

● 이제 style sheet로 이동하여 다음 코드를 추가하십시오.

그 결과 다음과 같을 것입니다.

individual style














13














앞에 #을 포함한 selector는 특정한 하나의 element에 CSS rule을 적용하기 위해 사

용됩니다. element를 특정할 때 id attribute에 할당한 이름을 사용할 수 있습니다.

● home page의 body 중 하나에 적용해 보십시오. index.html 파일로 이동하여

body tag에 id를 추가하십시오.

● style sheet에 다음 CSS rule들을 추가 하십시오.

결과는 다음과 같을 것입니다.

그냥 단지 gradient를 이용했을 뿐입니다! gradient는 하나의 색상이 다음 색상으로 서

서히 변하는 효과입니다. 주의: gradient 위에 있는 첫 번째 background property는

브라우저를 위한 기본 색상이며 gradient를 지원하지 않습니다.

14



You just used a gradient! That’s the name given to the e�ect where one

colour fades into another. Note: The �rst background property above

the gradient one determines a default colour for browsers that don’t

support gradients.

If you typed the code perfectly and you didn’t get the lovely rainbow

e�ect above, it could be that your browser doesn’t support gradients.

You can make lots of di�erent e�ects with gradients. If you want to learn

more, go here (http://dojo.soy/html2-css-gradients).

Challenge: style some more elements

Try giving another element an id and styling that element using the

ID selector with a # as above. How about making one picture have a

border-radius of 100% so that it’s fully rounded? Any other

pictures on the website will stay the same as they are.

To de�ne style rules for a speci�c element, you use the # symbol, and

the name that you gave the element as its id.

#titoPicture { border-radius: 100%;}

Note: the name you type in front of the CSS rules should exactlymatch the name you put in the element’s id attribute.

Step 7 See the code on other websites!

주의: 이번 단계를 완수하기 위해서 우리는 다음 웹 브라우저 중 한 가지가 필요합니다

(Chrome, Firefox, Internet Explorer/Edge). 만약 위 웹 브라우저가 없다면 이번 단

계를 생략하고 다음 단계로 이동하십시오.

주의: CSS rule 앞에 입력한 이름은 반드시 element의 id attribute에 입력한 이름과

일치해야 합니다.

만약 색상을 완벽히 입력했지만 위와 같은 아름다운 무지개 효과가 나타나지 않는다면,

사용한 브라우저가 gradient를 지원하지 않는 것입니다.

gradient를 이용하여 다양한 효과를 만들 수 있습니다. 만약 이에 관해 더 배우고 싶다

면 다음 사이트에 접속해 보십시오 (http:/dojo.soy/html2-css-gradients).

도전: element에 style 추가로 입히기

● 다른 element에 id를 추가로 부여하여 위와 같이 ID selector #을 사용하여 스타

일링을 해보십시오. 사진에 border-radius 100%를 줘서 동그랗게 만들어 보는

것은 어떻습니까? 웹 사이트의 다른 사진은 모두 변하지 않고 그대로일 것 입니다.

특정한 element의 style rule을 정의하기 위해 우리는 # 을 사용하고 element의 이름

인 id를 부여하였습니다.

다른 웹사이트의 코드 보기!

15



Note: To complete this step, you need use one of these web browsers:

Chrome, Firefox, or Internet Explorer/Edge. If you don’t have access to

one of them, you can just continue on to the next card.

On this card you’ll learn how to sneak a peek at the code of any website

using the inspector tool, and you’ll also nd out how to make some

changes that only you can see!

Before you start, make sure your project is saved. Then refresh your

website by clicking the refresh icon in your browser.

On your web page (the actual page, not the code) highlight the text

with the border that you added on the previous card, then right-click

on it and select the option Inspect from the menu that appears. (The

option might be called ‘Inspect Element’ or similar, depending on

what browser you are using. If you’re having trouble nding a menu

option, just ask someone at your Dojo for help.)

A whole new box will appear in your web browser with lots of tabs and

code: the developer tools, or dev tools for short. Here you can see the

code for the thing you clicked on, as well as the code for the whole page!

Inspecting the HTML code

Look for the tab that shows you the HTML code for the page (it might

be called ‘Elements’ or ‘Inspector’). The code should look pretty much

the same as how you typed it in your HTML le! You can click the little

triangles on the right-hand side to expand code that is hidden.

이번 단계에서 우리는 다른 웹 사이트의 코드를 개발자 툴을 사용하여 훔쳐볼 것입니다.

또한 어떻게 나만 볼 수 있게 이것을 수정할 수 있는지 배울 것입니다.

● 시작하기에 앞서 프로젝트가 저장되었는지 확인하십시오. 웹 브라우저의 새로고침

아이콘을 클릭하여 웹 사이트를 새로고침 하십시오.

● 웹 페이지에서 (코드가 아닌 실제 page) 이전 단계에서 추가한 볼드체 텍스트를

드래그하여 선택한 뒤 우클릭 하여 메뉴에서 검사 (inspect)를 선택합니다.

웹 브라우저에 따라 검사 (inspect)가 아니라 그와 비슷한 다른 문구일 수도

있습니다. 만약 메뉴에서 적절한 옵션을 찾는것이 어렵다면 Dojo에서 누군가에게

도움을 구해 보십시오.

많은 탭과 코드를 포함한 새로운 박스가 웹 브라우저에 나타날 것입니다. developer

tools 혹은 짧게 줄여 dev tools라고 부릅니다. 여기서 우리가 클릭한 곳의 코드와 전체

page의 코드를 볼 수 있습니다!

HTML 코드 훔쳐보기

● page의 HTML 코드를 보여주는 탭을 보십시오 (아마도 Elements 혹은 Inspector

라는 탭일 것입니다). 코드는 우리가 작성한 HTML 파일과 매우 유사할 것입니다! 오른

편에 있는 작은 삼각형을 눌러 숨겨진 코드를 볼 수 있습니다.

16



Double-click on the text in between the tags. You should be able to

edit it now! Type something in and press Enter.

Do you see the text update on your website? Note: only you can see

these changes.

Now reload the page and watch what happens. Your changes should

disappear!

In the top left-hand corner of the dev tools box, click the icon that

looks like a tiny rectangle with an arrow. Now you can move your

cursor over the web page, and the HTML inspector will show you the

code describing it.

Inspecting the CSS code

Let’s have a look at the CSS code next. Look for the Styles tab in the

developer tools (it might be called ‘Style Editor’ or similar). You should

see a bunch of CSS rules, including the ones you created for that

paragraph, #myCoolText.

● tag 사이에 텍스트를 더블클릭해 보십시오. 이제 수정할 수 있을 것입니다!

아무 문장이나 입력하고 엔터를 누르십시오.

● 웹 사이트가 업데이트 된 것을 확인할 수 있습니까? 주의: 다음과 같은 변화만

볼 수 있을 것입니다.

● 이제 page를 다시 로드하여 무슨 변화가 일어나는지 확인해 보십시오. 우리가

수정한 것이 사라졌을 것입니다!

● dev tool box 왼쪽 위 모서리에 작은 사각형과 화살표가 있는 아이콘을

누르십시오. 이제 커셔를 웹 페이지 위로 옮길 수 있을 것입니다. 그렇게 하면

HTML inspector는 관련된 코드를 보여줄 것입니다.

CSS code 검사하기

● 다음으로 CSS 코드를 살펴 보십시오. dev tool에서 Styles 탭을 보십시오

(Style Editor 혹은 비슷한 다른 이름일 수 있습니다). 우리가 paragraph에

사용하기 위해 만든 #myCoolText를 포함한 수 많은 CSS rule이 기술되어 있을

것입니다.

17



In the #myCoolText rules, click on the value next to the color

property. Try typing in a dierent value. Watch the text on your web

page change colour straight away!

Note: you can also click the coloured square to change the colour using

a colour picker tool.

Click in the space after the colour. A new line starts, where you can

type more CSS. Type the following and press Enter:

background-color: #660066;

You should see the background change on that piece of text.

● #myCoolText rule에서 color property 옆에 있는 값을 선택하십시오. 다른 값을

새로 입력해 보십시오. 웹 페이지의 색상이 바로 다른 색으로 바뀌는 것을 확인해

보십시오!

주의: 색칠된 사각형을 클릭하여 color picker tool을 사용해 색상을 바꿀 수도

있습니다.

● 색상 아래 빈 공간을 클릭 하십시오. 새로운 줄을 삽입하여 CSS를 좀 더 기술하십

시오. 다음 코드를 삽입하고 엔터를 누르십시오.

해당 텍스트의 배경색이 바뀌는 것을 확인할 수 있을 것입니다.

18



In the #myCoolText rules, click on the value next to the color

property. Try typing in a dierent value. Watch the text on your web

page change colour straight away!

Note: you can also click the coloured square to change the colour using

a colour picker tool.

Click in the space after the colour. A new line starts, where you can

type more CSS. Type the following and press Enter:

background-color: #660066;

You should see the background change on that piece of text.



How does it work?

When you change website code using the developer tools, you are

temporarily changing what it looks like in your browser. You aren’t

actually changing the �les that make up the website.

When you refresh the page, you are loading up the website again

from its �les (on the internet or on your computer). That’s why your

changes disappear.

Now that you know that, you can have some fun messing with the

code on other websites!

Try using these tools to look at the code on another website. You can

even make changes if you like! Remember, only you can see the

changes you make, and everything will reset when you refresh the

page.

Step 8 Automatically adjust the size

Up until now you’ve been using pixels to set the size of things, e.g.

10px. On this card you will learn about other measurements you can

use.

Go to index.html and �nd the img element with the picture of Tito,

or �nd another img tag on your website.

Delete the width attribute if it’s there, and give the element an id if

it doesn’t already have one.

<img src="tito.png" id="titoPicture" alt="Tito the dog" />

In your CSS �le, de�ne the width property for your picture as shown

below (you might need to create the CSS block with the id selector if

you haven’t already done so on a previous card).

지금까지 사이즈 조절을 위해 pixel을 사용하였습니다 (예를 들어 10px). 이번 단계에

서는 우리는 사이즈를 조절할 수 있는 다른 방법을 배워볼 것입니다.

● index.html 파일로 이동하여 Tito 사진의 img element를 찾거나 웹 사이트에

있는 다른 img tag를 찾으십시오.

● width attribute가 있다면 삭제하고 element에 id가 없다면 id를 부여하십시오.

● 이러한 도구들을 사용하여 다른 웹사이트의 코드를 살펴 보십시오. 우리가 원하는

어떤 변경이던 할 수 있습니다! 오직 당신만 수정 결과를 볼 수 있다는 것과 새로고침을

하면 수정 내용이 리셋 되는 것을 기억하십시오.

dev tool을 사용하여 웹 사이트 코드를 변경할 때 사용하고 있는 브라우저에서의 출

력 결과를 임시적으로 변경합니다. 웹 사이트를 실제로 구성하는 파일을 고치는 것

이 아닙니다.

page를 새로고침하면 웹 사이트를 다시 인터넷이나 컴퓨터에 있는 파일로부터 로딩

합니다. 그렇기 때문에 수정한 결과가 사라지는 것입니다.

이제 우리는 다른 웹 사이트의 코드를 마구 바꿀 수 있다는 것을 알게 되었습니다!

자동으로 사이즈 조절하기

어떻게 동작 할까요?

19



How does it work?

When you change website code using the developer tools, you are

temporarily changing what it looks like in your browser. You aren’t

actually changing the �les that make up the website.

When you refresh the page, you are loading up the website again

from its �les (on the internet or on your computer). That’s why your

changes disappear.

Now that you know that, you can have some fun messing with the

code on other websites!

Try using these tools to look at the code on another website. You can

even make changes if you like! Remember, only you can see the

changes you make, and everything will reset when you refresh the

page.

Step 8 Automatically adjust the size

Up until now you’ve been using pixels to set the size of things, e.g.

10px. On this card you will learn about other measurements you can

use.

Go to index.html and �nd the img element with the picture of Tito,

or �nd another img tag on your website.

Delete the width attribute if it’s there, and give the element an id if

it doesn’t already have one.

<img src="tito.png" id="titoPicture" alt="Tito the dog" />

In your CSS �le, de�ne the width property for your picture as shown

below (you might need to create the CSS block with the id selector if

you haven’t already done so on a previous card).2019. 11. 12. Guide to my country 2.0 | Raspberry Pi Projects


#titoPicture { width: 50%; border-radius: 100%;}

Note: 50% (50 percent) is half.

Try resizing your browser window and watch what happens to the

picture.

You should see that the picture gets bigger and smaller when you make

the window bigger and smaller. That is because it is taking up 50% of the

width of the main element (which is roughly the width of the page).

How does it work?

When you set the size of something in pixels, you are setting an exact

size and it doesn’t change. This is called an absolute measurement.

Another way to set the size of things is using relative measurements,

so that size depends on how big elements are compared to each

other. Then, whenever one thing changes size, everything else will

automatically change size as well to keep the same proportions.

When you’re using relative measurements, it’s important to know

what the parent of your element is. The parent is the thing that your

element is inside of, and that’s what the measurement will be in

relation to. For example, the parent of the image above is the

article element, because the img element is in between the

<article></article> tags.

If you set the width of an element to 100%, that will make it be the

same width as the parent container it’s in.

Experiment with di�erent numbers in front of the %.

Step 9 Animation

주의: 50%는 절반입니다.

● 브라우저의 window 크기를 조절하여 사진이 어떻게 변화하는지 확인하십시오.

window를 키우거나 작게 만들면 사진이 커지거나 작아지는것을 확인할 수 있을 것입

니다. 이것은 main element의 50% 크기이기 때문입니다 (대략 page의 너비 입니다).

● CSS 파일에서 width property를 아래와 같이 정의 하십시오. 이전 단계에서 id

selector를 포함한 CSS block을 만들지 않았다면 새로 만들어야 할 수도 있습니다.






picture.




How does it work?
















Step 9 Animation

사이즈를 pixel로 정의한다면 정확한 사이즈를 입력해야하고 바꿀 수 없습니다. 이

런 것을 absolute measurement라고 부릅니다.

사이즈를 조정하는 다른 방법은 다른 element와 비교하여 크기가 결정되는

relative measurement입니다. 그렇게 한다면 하나의 사이즈를 바꾸면 다른 모든

것의 사이즈가 같은 비율로 자동으로 조절될 것입니다.

relative measurement를 사용할 때 해당 element의 parent가 무엇인지 알아

야 합니다. Parent란 element의 measurement가 관련있는, 즉, element가 속

한 element를 말합니다. 예를 들어 위 사진에서 img element는 <article> </

article> tag 사이에 있으므로 img element의 parent는 article element 입니다.

만약 element의 width를 100%로 설정한다면 parent의 width와 같아질 것입니

다.


● %앞의 숫자를 바꾸어 가며 실험해 보십시오.






picture.




How does it work?
















Step 9 Animation

20






picture.




How does it work?
















Step 9 Animation2019. 11. 12. Guide to my country 2.0 | Raspberry Pi Projects


Did you know you can use CSS to make things move around? You’ll learn

how on this card!

Before you get started, make sure you have a picture on your website

with an id and a corresponding CSS block which sets the width to

100px. I’m going with the picture of Tito from before, and my CSS

block looks like this:

#titoPicture { border-radius: 100%; width: 100px;}

Go to the bottom of your CSS �le and add the following code:

@keyframes myFirstAnimation { from { width: 100px; } to { width: 300px; }}

This code creates an animation called myFirstAnimation that you

can add to any element on your website. What do you think it will do?

Find your CSS rules for the picture and add the following three

properties:

animation-name: myFirstAnimation;animation-duration: 2s;animation-iteration-count: 1;

Now watch what happens on your web page! Try di�erent values for

animation-iteration-count to see what it does.

Let’s try another animation! Add the following code to the end of your

CSS �le:

CSS를 활용하여 웹 페이지의 element가 움직이게 만들 수 있다는 것을 알고 있습니

까? 이번 단계에서는 이것을 어떻게 하는지 배울 것입니다!

● 시작하기에 앞서 웹 사이트에 있는 사진이 id를 가지고 있고 width가 100px로 설

정된 CSS block에 속하는지 확인하십시오. 이전과 마찬가지로 Tito 사진을 예시로 사

용하도록 하겠습니다. CSS block은 다음과 같습니다.

애니메이션




how on this card!











properties:





CSS �le:

● CSS 파일 아래에 다음 코드를 추가하십시오.

이 코드는 myFirstAnimation이라는 애니메이션을 생성합니다. 우리는 이것을 웹 사이

트의 아무 element에나 추가할 수 있습니다. 어떻게 그것이 가능할 것 같은가요?

● 사진과 관련된 CSS rule을 찾아 다음 3가지 property를 추가하십시오.




how on this card!











properties:





CSS �le:

21



@keyframes rainbowGlow { 0% { color: #FFD700; } 50% { color: #663399; } 100% { color: #FFD700; }}

Now �nd the #myCoolText CSS rules from earlier and add in the

animation code:

#myCoolText { color: #003366; border: 2px ridge #ccffff; padding: 15px; text-align: center; animation-name: rainbowGlow; animation-duration: 1.5s; animation-iteration-count: 1;}

When you use percentage values instead of from and to, you’re able

to set in-between values as well as just start and end values. You can

set as many in-between values as you like using di�erent percentage

values from 0 all the way up to 100.

Change the value of animation-iteration-count to infinite.

See if you can guess what will happen before you test it!

Try out di�erent values for animation-duration to speed up or

slow down your animation.

One �nal trick! Add this animation code:

@keyframes slide { 0% { background-position-x: 0;

● page가 어떻게 변하는지 확인하십시오! animation-iteration-count의 value를

바꾸어 어떤 역할을 하는지 알아 보십시오.

● 다른 애니메이션을 시도해 봅시다! 다음 코드를 CSS 파일 마지막 부분에

추가하십시오.



@keyframes rainbowGlow { 0% { color: #FFD700; } 50% { color: #663399; } 100% { color: #FFD700; }}

Now �nd the #myCoolText CSS rules from earlier and add in the

animation code:

#myCoolText { color: #003366; border: 2px ridge #ccffff; padding: 15px; text-align: center; animation-name: rainbowGlow; animation-duration: 1.5s; animation-iteration-count: 1;}

When you use percentage values instead of from and to, you’re able

to set in-between values as well as just start and end values. You can

set as many in-between values as you like using di�erent percentage

values from 0 all the way up to 100.

Change the value of animation-iteration-count to infinite.

See if you can guess what will happen before you test it!

Try out di�erent values for animation-duration to speed up or

slow down your animation.

One �nal trick! Add this animation code:

@keyframes slide { 0% { background-position-x: 0;

● 이전에 만든 #myCoolText CSS rule을 찾아 다음과 같이 애니메이션 코드를

추가합니다.

from 과 to 대신 퍼센트값을 사용하면 시작과 끝 값 뿐 아니라 사이 값도 사용할 수 있

습니다. 원하는 만큼 0에서 100사이의 사이 값을 사용할 수 있습니다.

● animation-iteration-count 의 value를 infinite로 바꾸십시오. 어떤 일이

벌어질지 추측해 보십시오!

22

● animation-duration의 value를 바꾸어 애니메이션의 속도를 느리게 만들거나

빠르게 만들어 보십시오.

애니메이션을 활용하여 할 수 있는 더 많은 일들은 다음 웹 페이지를 참조하십시오

(http://dojo.soy/html2-css-animation). 즐기세요!

다음 단계에서는 마우스 커셔가 위를 지날때 무언가 멋진 일들이 일어나도록 하는 방법

에 대해 배워볼 것입니다!


https://projects.raspberrypi.org/en/projects/cd-beginner-html-css-sushi/print 4/30

<h1>Welcome to Ireland!</h1>

HTML and tags explained

HTML is the code that makes a webpage.

The .html in the �le name tells the browser that the �le is a

webpage, so the browser knows to look for tags telling it what to

display. (A browser is the program you use to look at websites, for

example Chrome or Firefox.)

HTML tags such as <p> and </p> de�ne di�erent pieces of a page,

for example paragraphs, headings, or the body. The pieces are all

called elements. Think of them as building blocks.

Why do I need two tags?

You need an opening and a closing tag to tell the browser where

elements start and end. So for a paragraph, the opening <p> tag

says “Here comes some text that I want you to display as a

paragraph.” The closing </p> tag tells the browser where the

paragraph ends.

Everything in between the <body> and </body> tags is your

webpage.

Notice how the closing tag always has a forward slash /.

Try changing the numbers in your heading tags to see the

di�erent sizes they give you. They can go from <h1> all the way up

to <h6>. Remember to change both the opening and closing tag

so that they match.

Find the code for the paragraph that says My website is

about Ireland. and change it so that it looks like this:

<p> <em>My website</em> is about <strong>Ireland</strong>. It is going to have the following pages:

메모

23



} 100% { background-position-x: 600vw; }}

Now �nd the #frontPage CSS rules you wrote earlier and change

them to:

#frontPage { background: repeating-linear-gradient(-45deg, red 0%, yellow 7.14%, lime 14.28%, cyan 21.42%, cyan 28.56%, blue 35.7%, magenta 42.84%, red 50%); background-size: 600vw 600vw; animation: slide 10s infinite linear forwards;}

Don’t worry about understanding all of the code above… just sit back and

enjoy!!

To learn about more things you can do with animation, visit this webpage (http://dojo.soy/html2-css-animation). Have fun!

On the next card you’ll learn how to make cool things happen when you

hover the mouse cursor over things!

Step 10 Teach Tito to roll over!

You can make your website more interactive by making cool stu�

happen when you hover over things with the mouse cursor!

Find your CSS rules for the img elements, or create some if you don’t

have any. Add in a border, and then add a new block of rules right

below:

img { border: 2px solid White;}img:hover { 2019. 11. 12. Guide to my country 2.0 | Raspberry Pi Projects


border: 2px dashed Navy;}

You’ve just used a special type of CSS block called a pseudo-class.

How does it work?

A pseudo-class is a bit di�erent from a class that you create

yourself. You can recognise it by the :.

Pseudo-classes come built in to HTML elements: you can add

:hover style rules to any element, class, or id selector in your style

sheet without needing to add anything extra in your HTML code.

What do you think will happen? Check what pages on your website

have pictures on them (add a picture if there aren’t any!), then move

your cursor over a picture to �nd out!

Let’s use this new :hover pseudo-class together with a CSS class to

make links glow when you hover over them! Add a link to your web

page and include an attribute to specify the class name. Remember,

links are de�ned using the <a> tag, like so:

<p> Visit the <a class="niceLinks" href="https://en.wikipedia.org/wiki/Ireland">Wikipedia page</a> to learn even more about Ireland! </p>

Add the following code to your style sheet, then run your code to see

your lovely links in action.

.niceLinks { text-decoration: none; color: #FFFAF0;}.niceLinks:hover { color: #00FF7F;}

마우스 커셔를 올렸을 때 멋진 일이 발생하도록 만들어 웹 사이트를 좀 더 상호작용 하

도록 만들 수 있습니다!

● img element CSS rule을 찾거나 없다면 만드십시오. border를 추가하고 바로

아래에 새로운 rule block을 추가 하십시오.

pseudo-class라는 특별한 CSS block을 방금 사용했습니다.

Tito에게 변신하는 법 가르치기!





How does it work?

















Pseudo-class는 우리가 만든 class와 약간 다릅니다. 콜론 ( : ) 표시로 그것을 구분

할 수 있습니다.

Pseudo-class는 HTML element 안에 만들 수 있습니다. :hover style rule을

style sheet의 임의의 element, class, id selector에 추가적인 HTML 코드 구현

없이 추가할 수 있습니다.

● 무슨 일이 벌어질 것 같나요? 웹 사이트의 어떤 page에 사진이 있는지 확인

하십시오 (만약 사진이 하나도 없다면 하나 추가하십시오!). 그런 다음 사진 위로

마우스 커셔를 올려 확인해 보십시오!

● :hover pseudo-class를 CSS class와 함께 사용하여 link위로 마우스 커셔를

올렸을 때 빛이 나도록 만들어 보십시오! 웹 페이지의 link를 추가하고 attribute를

추가하여 class 이름을 특정하십시오. <a> tag를 사용하여 link를 다음과 같이

정의하는 것을 기억 하십시오.


24





How does it work?

















● 다음 코드를 style sheet에 추가한 다음 코드를 실행하여 link가 멋지게 동작하는

것을 확인하십시오.



Why not add the attribute class="niceLinks" to all of the links in

your menu bar as well?

You can combine all of these tricks with animations too!

Find the CSS block for the picture of Tito again (or whatever picture

you were working on earlier). Add the following code to your style

sheet �le:

#titoPicture { border-radius: 100%; width: 100px;}#titoPicture:hover { animation-name: rollOver; animation-duration: 1s; animation-iteration-count: 1;}@keyframes rollOver { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); }}

Can you guess what will happen?

Now shout “Roll over!” as you move the cursor over the picture!

Challenge: make glowing rainbow links

Can you use the rainbowGlow animation from the previous card to

make the links in your menu keep changing colours when the cursor

is hovering over them?

You can add hover e�ects directly to the nav menu like this:

nav ul li a:hover { animation-name: rainbowGlow; animation-duration: 1.5s;

● class=”niceLinks” attribute를 메뉴바의 모든 link에 추가하는 것은 어떨까요?

이 모든 방법들을 애니메이션 방법들과 함께 사용할 수 있습니다!

● Tito 사진의 CSS block을 다시 찾아 보십시오 (혹은 이전에 작업했던 다른 아무

사진이나 괜찮습니다). 다음 코드를 style sheet 파일에 추가하십시오.

25








sheet �le:










● 무슨일이 벌어질 지 예상이 되십니까?

● 이제 “변신!”을 외치며 그림 위에 커셔를 갖다대 보십시오!

도전: 무지개빛으로 빛나는 link 만들기

● 이전 단계에서 rainbowGlow 애니메이션을 사용하여 link에 커셔를 올렸을 때

색상이 계속해서 변하도록 만들 수 있습니까?

hover 효과를 nav 메뉴에 다음과 같이 직접 추가할 수 있습니다.



animation-iteration-count: infinite;}

Or, if you want to make other links on your website ash rainbow

colours too, you can add the animation to the .niceLinks class

instead, like this:

.niceLinks:hover { color: #00BFFF; animation-name: rainbowGlow; animation-duration: 1.5s; animation-iteration-count: infinite;}

Published by Raspberry Pi Foundation (https://www.raspberrypi.org) under a Creative Commonslicense (https://creativecommons.org/licenses/by-sa/4.0/).

View project & license on GitHub (https://github.com/RaspberryPiLearning/cd-intermediate-html-css-sushi)








sheet �le:










혹은 웹 사이트의 다른 link도 무지개빛으로 빛나게 만들고 싶다면 다음과 같이

.niceLink class에 애니메이션을 추가하십시오.

COPYRIGHT ⓒ2019 CODE CLUB Republic of KOREA.

Documents

Guide to Ireland 2 · 2019. 11. 12. Guide to my country 2.0 | Raspberry Pi Projects