대출 계산기 만들기

무모한 일에 도전 또는 타인의 도움이나 아는 것 없이 혼자서 어렵게 일을 해나감을 비유적으로 이르는 말을 맨땅에 헤딩한다고 말한다. 코딩에 코 자도 모르는 초 초보가 맨땅에 헤딩하면서 visual studio code편집기를 통하여 대출계산기를 만들어 보았다.

 

대출 계산기 HTML_body

대출금액
→ <label for="loanamount">대출금액</label><input id="loanamount" type="number" placeholder="대출 금액 입력"/>

 

 

 

대출기간
→ <label for="loanterm">대출기간</label><input id="loanterm" type="number" placeholder="대출 기간 입력"/>

 

연이자율 (%)
→ <label for="intersstrate">연이자율 (%)</label><input id="interestrate" type="number" placeholder="연 이자율 입력"/>

 

상환 방식 원리금균등상환 금균등상환
→ <label for="repaymenttype">상환 방식</label><select id="repaymenttype"><option value="principalandinterest">원리금균등상환</option><option value="principalonly">금균등상환</option></select>

 

 

 

 

페이지에 CSS, JavaScript 적용하기

 

계산기 영상 지도 게임 등에는 자바스크립트가 있어야 하고 이것들을 더 멋지게 보이기 위해서 CSS가 사용된다.

 

1. CSS

 

CSS는 Link 요소를 적용한다.

 

링크는 반듯이 해드 부분에 위치해야 한다. 링크는 문서의 스타일 시트임을 나타냄과 동시에 스타일시트 파일경로를 포함하여야 한다

 

link 속성 : rel="stylesheet" href="my-css-file.css"

 

head에 <link rel="stylesheet" href="style.css">와 같이 링크를 만들면 stylesheet의 # calculator 내용을 가져와 계산기를 꾸며 입체적으로 적용할 수 있게 된다.

 

계산기 stylesheet는 규격 입력 타입(숫자로 하고) 규격 폭 마진 경계 바 사이즈와 버튼 계산결과등 필요 요 소을 정하고 만들어 준다.

 

body 계산기 타이틀 div태그에 # calculator 계산기 속성을 적용시킨다.

<div id="calculator">

 

2. JavaScript

Javascript는 script 요소를 적용하여 계산기에 생명을 불어넣는다.

 

script는 헤드에 들어갈 필요가 없으며 바디 닫힘 태그 바로 앞 문서 본문 맨 끝에 넣는다. JS를 적용하기 전에 html내용을 브라우저가 읽었는지 확인한다.

 

스크립트 :<script src="script.js"></script>

 

<script src="my-js-file.js"></script> 외부 스크립트 파일을 지정하는 대신에 스크립트를 <script>와 </script> 사이에 넣을 수도 있다.

 

CSS JS 적용은 이전글 자동차 할부 계산기와 동일하다

 

 

 

3. Active learning: applying CSS and JavaScript to a page

 

페이지에 JS CSS적용 실험을 하려면, 같은 로컬 디렉터리 안에 meta-example.html, script.js, style.css 파일을 미리 만들어 놓아야 한다.

 

Css JS 적용하기 전에는 반듯이 올바른 이름과 파일 확장자로 저장되어 있는지 확인하고, 브라우저에서 HTML 파일을 열고, 텍스트 에디터도 실행한다.

 

 

 

위 설명대로 CSS와 JavaScript가 HTML에 적용되도록 HTML head에 <link>, body에 <script>를 추가한 다음에 HTML을 저장하고 브라우저를 새로 고치면 올바르게 변경 적용된 것이다.