추가 적립 안내

“패턴을 알면 코딩이 쉽다!”
로고, 스크래치, 파이선, HTML 코딩의 핵심 개념을
패턴으로 꿰뚫는 [화살표 코딩] 시리즈

화살표만 따라가면 코딩의 패턴이 저절로 익혀지고,
핵심 개념이 쉽게 이해되는 [화살표 코딩] 시리즈 4권!

HTML과 자바스크립트로 나만의 웹 사이트를 만들어요!
지금 우리의 생활은 인터넷과 떼려야 뗄 수 없을 정도로 연결되어 있습니다. 웹 사이트에 접속하여 필요한 정보를 얻고, 언제 어디서나 스마트폰으로 새로운 뉴스를 검색해 볼 수 있지요. 그런데 우리가 늘 접속하는 웹 사이트를 직접 만들 수 있다면 어떨까요?
《화살표 코딩 ④》에서는 1~3권에서 다룬 코딩의 기본 원리와 핵심 개념들을 바탕으로 하여 넓디넓은 네트워크의 세계로 들어가 봅니다. 웹이란 무엇인지, 인터넷이란 무엇인지, URL에는 어떤 의미가 담겨 있는지, 웹 페이지와 웹 사이트의 차이점은 무엇인지, 어떻게 웹 사이트를 만들 수 있을지, 이 모든 질문에 대한 답이 담겨 있지요. 웹 사이트를 만들기 위해 이 책에서는 프로그래밍 언어인 ‘HTML’과 ‘자바스크립트’를 사용할 거예요. ‘태그’를 사용하여 각 웨 페이지에 여러 요소를 넣고, 웹 페이지끼리 연결하는 ‘하이퍼링크’를 추가하고, ‘함수’를 이용해 웹 페이지를 꾸미는 과정을 화살표를 따라 차근차근 따라가다 보면 나만의 웹 사이트를 완성할 수 있답니다.
코딩을 가장 쉽게 배우는 방법은 바로 ‘패턴’을 익히는 것입니다. 《화살표 코딩 시리즈》는 화살표만 따라오면 쉽고 재미있게 패턴을 익히며 코딩을 배울 수 있는, 코딩 초보자를 위한 가장 적합한 지침서입니다.

프로그래밍 언어를 넘나들며 코딩을 이해하는 단계별 코딩 기본서, [화살표 코딩] 시리즈!
《화살표 코딩 시리즈》는 코딩을 할 때 알아야 할 핵심 개념들을 단계별로 소개합니다. 루프와 변수, 선택, 난수, 함수, HTML 등의 개념을 로고, 스크래치, 파이선 등의 언어로 반복하며 익힐 수 있습니다. 각 권마다 다루는 개념과 언어는 다르지만, 1권에서 4권까지 모두 따라하고 나면 누구나 슈퍼 코더가 될 수 있답니다. 코딩의 패턴을 익힐 수 있을 뿐만 아니라 코딩의 개념과 원리를 하나로 꿰뚫어 볼 수 있기 때문이지요. 코딩의 과정은 한 단계씩 복잡해지지만, 앞에서 나온 개념을 반복하여 연습하기 때문에 하나의 개념을 더 깊이 이해할 수 있습니다.
《화살표 코딩 시리즈》는 아이들이 코딩을 가장 쉽고 빠르게 이해할 수 있도록 구성되어 있습니다. 어디에서도 볼 수 없는 다양한 로봇 친구들을 직접 다운로드하여 활용할 수도 있고, 어려운 개념일수록 게임이나 재미있는 활동을 통해 익힐 수 있도록 꾸몄답니다. 또한 화살표를 따라가기만 하면 되므로 어린이부터 어른까지 누구나 코딩의 세계로 쉽게 들어올 수 있지요. 코딩 세계에서 길을 헤매지 않도록 화살표만 잘 따라오세요!

코딩의 원리와 핵심 개념을 이용하여 나만의 웹 사이트를 만들어요!
각종 포털 사이트나 웹 사이트를 접속하면 다양한 정보와 이미지, 동영상을 둘러보고, 자료를 얻거나, 게시판에 글을 쓰거나, 게임을 할 수도 있습니다. 하나의 웹 사이트 안에는 수많은 웹 페이지들이 서로서로 연결되어 클릭 한 번만으로 이 페이지에서 저 페이지로 이동할 수 있고요. 사용하는 건 쉽지만, 직접 웹 사이트를 만드는 일은 어쩐지 아주 복잡하고 어려워 보이지요. 하지만 기초적인 단계의 웹 사이트라면 아이들도 충분히 만들어 볼 수 있답니다. 《화살표 코딩 ④》에서는 ‘HTML’과 ‘자바스크립트’라는 새로운 프로그래밍 언어로 웹 페이지를 만들고, 각 웹 페이지를 하이퍼링크로 연결하여 나만의 웹 사이트를 코딩할 수 있도록 하나부터 열까지 차근차근 설명해 준답니다.
프로그래밍 언어는 다르지만 1~3권에서 다루었던 코딩의 기본 원리와 핵심 개념은 웹 사이트를 만들 때도 고스란히 적용됩니다. ‘함수’를 사용해 퀴즈 프로그램을 코딩해 보고, 웹 페이지의 배경 색깔과 글자 색깔을 바꿔 보고, ‘루프’와 ‘변수’를 사용해 입력한 식을 반복하여 계산하고 화면에 나타내는 프로그램도 만들어 볼 수 있지요. 이렇게 만든 프로그램을 'HTML'과 ‘자바스크립트’를 사용하여 웹 브라우저에 보여 줄 수 있습니다.
《화살표 코딩 ④》의 화살표를 따라가면서 한 단계 한 단계 순서대로 웹 페이지를 코딩하는 태그를 연습하고, 어떤 웹 사이트를 만들지 결정하고, 각 요소를 코딩하여 웹 페이지를 만들고, 웹 페이지들을 꾸미고, 여러 개의 웹 페이지끼리 연결하다 보면 나만의 웹 사이트를 완성할 수 있답니다!

다양한 프로그래밍 언어를 다루며 코딩의 개념을 통합적으로 이해해요!
웹 페이지를 만드는 방법은 대단히 많습니다. 《화살표 코딩 ④》에서는 그중에서도 ‘HTML’을 사용합니다. 웹 페이지에 어떤 요소가 들어갈지 웹 브라우저에 알려 주어, 웹 페이지의 뼈대를 만들어 주는 프로그래밍 언어이지요. 그런데 HTML뿐만 아니라, 이 책에서는 ‘자바스크립트’라는 스크립트 언어를 함께 소개합니다. HTML은 새 웹 페이지를 로드하는 일만 할 뿐, 웹 페이지의 요소를 변경하거나, 이동하거나, 숨기거나, 알림창을 띄우는 등 웹 페이지를 생동감 있게 만들어 주는 것은 자바스크립트의 몫이기 때문입니다. 한 마디로 HTML이 ‘웹 페이지에 들어가는 요소’라면, 자바스크립트는 ‘웹 페이지가 하는 일’을 뜻하지요. 이렇게 두 가지 언어를 넘나들며 사용하면서 아이들은 HTML과 자바스크립트가 어떻게 긴밀하게 연결되어 하나의 웹 페이지를 구성하는지 이해하고, 그 속에 담긴 코딩의 핵심 개념들을 자연스럽게 깨치게 될 것입니다.

미션을 수행하고, 버그를 해결하며 문제 해결 능력을 키워요!
책의 중간 중간에는 미션이 제시되어 있습니다. 문제를 풀면서 각 장에서 소개하는 개념을 제대로 이해했는지, 그 개념을 이용하여 정확하게 코딩할 수 있는지 확인할 수 있지요. 그런데 코딩을 하다 보면 생각했던 결과와 다르게 나타나거나, 프로그램이 아예 실행되지 않거나, 중간에 멈춰 버리는 경우가 생깁니다. 잘못된 코드 때문에 프로그램에 오류가 생기는 것이지요. 이러한 오류를 ‘버그’라고 하며, 버그를 해결하는 작업을 ‘디버깅’이라고 합니다. 디버깅 능력을 갖추어야만 문제를 해결하고 프로그램을 완성할 수 있으니, 이 또한 연습이 필요하지요. 《화살표 코딩 시리즈》에는 각 권마다 디버깅 활동이 수록되어 있습니다. 해결하기 힘든 문제라고 해도 걱정하지 마세요. 버그를 찾아내고, 다시 연습해 볼 수 있도록 정답 페이지가 준비되어 있으니까요. 그와 더불어 《화살표 코딩 가이드북》도 마련하여 아이들이 이해하기 힘들어하는 개념을 다시 한 번 짚어 주고, 코딩하는 과정에서 헷갈려하거나 종종 실수하는 부분들을 소개해 주기 때문에 아이들은 코딩 과정에서 겪는 문제들을 인식하고 해결하는 방법을 명확하게 찾을 수 있을 것입니다.

한눈에 훑어보기

HTML
HTML 이해하기
태그 활용하기
웹 페이지 이동하기
하이퍼링크 추가하기
웹 페이지 꾸미기

자바스크립트
자바스크립트 시작하기
루프와 변수 사용하기
함수로 퀴즈 만들기
함수로 배경 색깔 바꾸기
웹 사이트 만들기
웹 사이트 공유하기
버그 해결하기
정답
프로그래밍 자원 정보
용어 풀이ㆍ찾아보기