[NBread] 초보도 따라하는 엔빵계산기 만들기1

728x90

엔빵 계산기 만들기

제가 속한 동아리에서 모임을 자주 갖는데 그때마다 정산을 하기위해서 엑셀을 만드는게 힘들어서 이참에 강의도 올릴 겸 엔빵계산기를 만들어보려고 합니다.

초보자분들도 쉽게 따라하실수 있도록 어려운 것들은 모두 걷어내고 HTML, CSS, JavaScript 만 사용해서 더치페이 계산기를 만들어보겠습니다.

기초 개념부터 실전 프로젝트까지 차근차근 설명할 예정이니, 부담 없이 시작하셔도 됩니다.

오늘 소개하는 내용은 앞으로 진행될 HTML,CSS,JavaScript에 대해서 가볍게 다룰 예정이니 다소 어렵더라도 무시하시고 넘어가셔도 무방합니다.

어차피 다음 회차에서 다시 소개할 예정이니까요.

앞으로 진행할 내용

소개
에디터 다운로드
HTML으로 기본구조 만들기
JavaScript로 계산 기능 추가하기
더치페이 계산기 완성 및 개선하기

HTML, CSS, JavaScript란?

웹 개발에서 많이 사용되는 대표적인 기술입니다.
HTML로 웹페이지의 뼈대를 만들고 CSS로 웹 페이지를 예쁘게 꾸미고, Javascript로 기능을 추가한다고 할 수 있다.

HTML (HyperText Markup Language)

웹 페이지의 기본 구조를 만드는 언어입니다.

제목,문단,버튼,입력창 등 요소(Element)를 배치합니다.

HTML의 기본적인 구조는 아래와 같습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>HTML은 웹의 기본 구조를 담당합니다.</p>
</body>
</html>

이게 무슨말이야 ..?

일단 당황하지마시고 메모장을 킨 뒤에 위 소스를 전부 복사해서 붙여넣기 해보세요.

이후 이를 index.html로 저장해봅시다.

저장을 하고나면 각자 사용하시는 기본 브라우저로 아래와 같이 보일거에요.

이를 한번 실행해볼까요 ?

여러분은 방금 처음으로 웹페이지 하나를 만드셨습니다!

이렇게 HTML은 웹사이트의 기본 뼈대를 만들어주는 중요한 요소입니다.

CSS (Cascading Style Sheets)

CSS는 웹 페이지를 예쁘게 꾸며주는 스타일 코드 입니다.

글꼴, 색상, 배경, 여백 등을 설정할 수 있습니다.

방금 우리가 저장했던 메모장으로 돌아가볼까요?

거기에 배경을 하얀색으로 입히고 폰트를 수정하고 제목은 가운데 정렬 등등 디자인을 변경해볼거에요.

body {
    background-color: lightblue;
    font-family: Arial, sans-serif;
}

h1 {
    color: navy;
    text-align: center;
}

이게 무슨말이야..?

괜찮습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <style>
        body {
            background-color: lightblue;
            font-family: Arial, sans-serif;
        }

        h1 {
            color: navy;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Hello World!</h1>
    <p>HTML은 웹의 기본 구조를 담당합니다.</p>
</body>
</html>

위 소스를 다시 긁은 후 아까 메모장에 작성한 코드를 위 코드로 변경 및 저장해주세요.

어차피 다음 챕터에서 설명드릴테니까 지금은 어려우시면 그냥 넘어가셔도 상관없습니다.

그리고 실행해보면

우리가 만든 HTML 기본 구조에 디자인을 입혔습니다.

이렇게 CSS 는 웹페이지를 좀 더 이쁘게 꾸며주는 역할을 합니다.

JavaScript

웹 사이트에 동적인 기능을 추가하는 프로그래밍 언어입니다.

버튼을 눌렀을 때 계산, 애니메이션, 팝업창 등을 만들 수 있습니다

방금 우리가 적용한 CSS 및 HTML에 또 다시 JS를 추가 해볼게요.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <style>
        body {
            background-color: lightblue;
            font-family: Arial, sans-serif;
        }

        h1 {
            color: navy;
            text-align: center;
        }
    </style>
    <script>
        function sayHello() {
            alert("안녕하세요! 😊");
        }
    </script>
</head>
<body>
    <h1>Hello World!</h1>
    <p>HTML은 웹의 기본 구조를 담당합니다.</p>
    <button onclick="sayHello()">눌러보세요!</button>
</body>
</html>

눌러보세요! 라는 버튼과 <script></script> 라는 Javscript 코드를 추가하였습니다.

버튼을 눌러보면 ?

위와 같이 안녕하세요! 하는 알림이 나왔습니다.

이와 같이 JS는 각 사이트에서 동적인 기능들을 담당합니다.

오늘은 여기까지 하고 다음에 에디터 다운로드 하는 방법을 소개드리겠습니다.