👉 숫자 입력 하나라도 안할 시 결과 값 출력 X
👉 아무 버튼 누르고 연산 시 숫자 초기화
👉 결과 창은 값에 따라 늘어나야 함
<!-- 문서 타입 html -->
<!DOCTYPE html>
<!-- 주언어 kr(lang="kr")로 명시하여 해당 언어에 알맞게 번역(점자,소리)되어
올바른 해석으로 정보 전달하기 위함
html태그 시작 -->
<html lang="ko">
<!-- 헤드 태그 시작 -->
<head>
<!-- 다국어를 표현하기 위한 유니코드 UTF-8 설정 -->
<meta charset="UTF-8">
<!-- 웹페이지의 뷰포트의 너비를 스마트폰 화면 너비에 맞추고
초기 화면 배율을 1로 지정 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 문서 제목 -->
<title>평가2_송태승</title>
<!-- 스타일 태그 시작 -->
<style>
/* id명이 container인 요소의 스타일 지정,
전체 컨텐츠 영역을 지정하기 위함 */
#container {
/* 너비가 1500px */
width: 1500px;
/* 높이가 300px */
height: 300px;
/* 화면 중앙에 정렬 */
margin: 0 auto;
}
/* 리스트 요소 ul의 스타일 지정 */
ul {
/* ul리스트의 기본 값인 ● 을 없앰 */
list-style: none;
/* 안쪽 공간을 0으로 지정 */
padding: 0;
/* container 안쪽의 중앙에 정렬 */
margin: 0 auto;
}
/* 리스트 요소 ul의 자식 li 요소의 스타일 지정 */
ul li {
/* li요소들은 블록 형태로 세로 정렬이 되므로 float left로 왼쪽부터 가로로 정렬 */
float: left;
/* 안쪽 공간을 0으로 지정 */
padding: 0;
/* li요소들의 마진 값을 0으로 두어 붙인 형태가 되도록 함 */
margin: 0;
}
/* button 요소의 스타일 지정 */
button {
/* 너비를 100px */
width: 100px;
/* 높이를 35px */
height: 35px;
/* button에 해당하는 100px x 35px 공간의 배경 색을 white로 지정 */
background-color: white;
}
/* id 명이 plus인 요소의 스타일을 지정 */
#plus {
/* button에서 id명을 사용하므로 button을
1px 크기인 초록색 실선 테두리로 설정 */
border: 1px solid green;
/* 글자색을 초록색으로 설정 */
color: green;
/* 실행사진에서 오른쪽 테두리는 없이
붙어있으므로 오른쪽 테두리 삭제 */
border-right: none;
}
/* #plus가 설정한 영역위에 마우스 포인터가 올라가 있으면
아래 스타일로 실행 */
#plus:hover{
/* button과 같은 너비 100px */
width: 100px;
/* button과 같은 높이 100px */
height: 35px;
/* 지정한 영역의 배경색을 초록색으로 */
background-color: green;
/* 지정한 영역의 테두리를 1px 초록색 실선으로 */
border: 1px solid green;
/* 글자는 흰색으로 설정 */
color: white;
}
/* id 명이 minus인 요소의 스타일을 지정 */
#minus {
/* button에서 id명을 사용하므로 button을
1px 크기인 빨간색 실선 테두리로 설정 */
border: 1px solid red;
/* 글자색을 빨간색으로 설정 */
color: red;
/* 실행사진에서 오른쪽 테두리는 없이
붙어있으므로 오른쪽 테두리 삭제 */
border-right: none;
}
/* #minus가 설정한 영역위에 마우스 포인터가 올라가 있으면
아래 스타일로 실행 */
#minus:hover{
/* button과 같은 너비 100px */
width: 100px;
/* button과 같은 높이 100px */
height: 35px;
/* 지정한 영역의 배경색을 빨간색으로 */
background-color: red;
/* 지정한 영역의 테두리를 1px 빨간색 실선으로 */
border: 1px solid red;
/* 글자는 흰색으로 설정 */
color: white;
}
/* id 명이 mul인 요소의 스타일을 지정 */
#mul {
/* button에서 id명을 사용하므로 button을
1px 크기인 파란색 실선 테두리로 설정 */
border: 1px solid blue;
/* 글자색을 파란색으로 설정 */
color: blue;
/* 실행사진에서 오른쪽 테두리는 없이
붙어있으므로 오른쪽 테두리 삭제 */
border-right: none;
}
/* #mul가 설정한 영역위에 마우스 포인터가 올라가 있으면
아래 스타일로 실행 */
#mul:hover{
/* button과 같은 너비 100px */
width: 100px;
/* button과 같은 높이 100px */
height: 35px;
/* 지정한 영역의 배경색을 파란색으로 */
background-color: blue;
/* 지정한 영역의 테두리를 1px 파란색 실선으로 */
border: 1px solid blue;
/* 글자는 흰색으로 설정 */
color: white;
}
/* id 명이 div인 요소의 스타일을 지정 */
#div {
/* button에서 id명을 사용하므로 button을
1px 크기인 노란색 실선 테두리로 설정 */
border: 1px solid gold;
/* 글자색을 노란색으로 설정 */
color: gold;
/* 사진상으로 결과 박스 옆에 테두리가
남아있는 것으로 보여 테두리 삭제 x */
}
/* #div가 설정한 영역위에 마우스 포인터가 올라가 있으면
아래 스타일로 실행 */
#div:hover{
/* button과 같은 너비 100px */
width: 100px;
/* button과 같은 높이 100px */
height: 35px;
/* 지정한 영역의 배경색을 금색으로 */
background-color: gold;
/* 지정한 영역의 테두리를 1px 금색 실선으로 */
border: 1px solid gold;
/* 흰색으로 설정 */
color: white;
}
/* id 명이 result인 요소의 스타일을 지정*/
#result {
/* 너비는 20px */
width: 20px;
/* 높이는 31px */
height: 31px;
/* 지정한 영역의 배경색을 rgb(235, 235, 235) 로 설정 */
background-color: rgb(235, 235, 235);
/* 지정한 영역의 테두리를 1px크기의 rgb(218, 217, 217)색 실선으로 설정 */
border: 1px solid rgb(218, 217, 217);
/* 사진상으로 나누기 버튼 옆에 붙어 테두리가 없는 것 처럼 보여 왼쪽 테두리 삭제 */
border-left: none;
/* 사진과 같이 오른쪽위, 오른쪽아래 테두리를 5px 정도 만큼 깎는다 */
border-radius: 0px 5px 5px 0px;
}
/* ul 요소 자식 li의 형제 input 태그 안에
placehloder 속성을 갖고 있으면 아래 스타일 실행
첫번째 숫자, 두번째 숫자 입력 칸의 스타일이다. */
ul li input[placeholder] {
/* 너비는 200px */
width: 200px;
/* 높이는 31px */
height: 31px;
/* 위에서 지정한 영역의 테두리를 1px크기의
rgb(218, 217, 217)색의 실선으로 설정 */
border: 1px solid rgb(218, 217, 217);
/* 실행사진에서 오른쪽 테두리는 없이
붙어있으므로 오른쪽 테두리 삭제 */
border-right: none;
}
/* 스타일 태그 종료 */
</style>
<!-- 헤드 태그 종료 -->
</head>
<!-- 바디 태그 시작 -->
<body>
<!-- container를 불러와 컨텐츠 영역을 지정, div 태그 시작 -->
<div id="container">
<!-- h1태그로 제목 입력 -->
<h1>사칙연산 계산기</h1>
<!-- ul태그 시작, li로 리스트 작성 -->
<ul>
<!-- li안에 여러 여러 속성들을 추가, input태그로 id명을 num1로 하여 스크립트에서 값을 받아오고
type을 text로 하여 값을 입력하고
placeholder로 text 칸에 "첫번째 숫자"가 보이도록 함 -->
<li><input id="num1" type="text" placeholder="첫번째 숫자"></li>
<!-- input태그로 id명을 num1로 하여 스크립트에서 값을 받아오고
type을 text로 하여 값을 입력하고
placeholder로 text 칸에 "첫번째 숫자"가 보이도록 함 -->
<li><input id="num2" type="text" placeholder="두번째 숫자"></li>
<!-- button태그로 버튼을 생성하고 id명이 plus로 스타일에서
#plus를 불러와 스타일을 설정하고
plus 영역을 클릭 했을 때 아래 스크립트에서 plus 함수 실행
버튼 이름은 더하기 -->
<li><button id="plus" onclick="plus();">더하기</button></li>
<!-- button태그로 버튼을 생성하고 id명이 minus로 스타일에서
#minus를 불러와 스타일을 설정하고
minus 영역을 클릭 했을 때 아래 스크립트에서 minus 함수 실행
버튼 이름은 빼기 -->
<li><button id="minus" onclick="minus();">빼기</button></li>
<!-- button태그로 버튼을 생성하고 id명이 mul로 스타일에서
#mul를 불러와 스타일을 설정하고
mul 영역을 클릭 했을 때 아래 스크립트에서 mul 함수 실행
버튼 이름은 더하기 -->
<li><button id="mul" onclick="mul();">곱하기</button></li>
<!-- button태그로 버튼을 생성하고 id명이 div로 스타일에서
#div를 불러와 스타일을 설정하고
div 영역을 클릭 했을 때 아래 스크립트에서 div 함수 실행
버튼 이름은 더하기 -->
<li><button id="div" onclick="div();">나누기</button></li>
<!-- input 태그로 id명이 result로 스타일에서 #result를
불러온다. 아래 스크립트에서 위에서 실행된 함수들의 값을
반환받는 역할을 한다. type은 text로 텍스트 값이 입력된다.
readonly를 사용하여 입력이 안되도록 한다. -->
<li><input id="result" type="text" readonly></li>
<!-- ul 태그 종료 -->
</ul>
<!-- container영역의 div 종료 -->
</div>
<!-- 자바스크립트 태그 시작 -->
<script>
// 위 HTML의 버튼에서 버튼이 클릭 됐을 때이 실행되어 계산하는 plus 함수
function plus() {
// id가 num1, num2인 첫번째 숫자(num1)과 두번째 숫자(num2)의 값이
// 둘 중에 하나라도 들어가지 않았을 때 결과(result)값을 초기화하는 조건문.
if (document.getElementById("num1").value == ""
|| document.getElementById("num2").value == "") {
document.getElementById("result").value = "";
}
// 첫번째 숫자(num1)과 두번째 숫자(num2)의 값이 둘 다 들어갔을 때의 조건문
else{
// 변수 num1과 num2 값을 각각의 id인 num1, num2을 사용자가 입력한 값을 정수로 대입
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
// 위에서 받은 num1 과 num2 값을 더하여 plus 변수에 대입
var plus = num1 + num2;
// plus를 id가 result를 갖는 값으로 반환
document.getElementById("result").value = plus;
// result값의 텍스트길이를 변수 length에 대입
var length = document.getElementById("result").value.length;
// id가 result를 갖는 요소의 style의 width값을 텍스트 길이 x 10 px로 변경.
// 이렇게 하지 않으면 결과 텍스트영역이 고정되는 문제가 발생한다.
document.getElementById("result").style.width = (length*10) + "px";
}
// 리셋 함수로 num1, num2 값을 초기화해주는 함수로 아래에 설명
reset();
}
// 위 HTML의 버튼에서 버튼이 클릭 됐을 때이 실행되어 계산하는 minus 함수
function minus() {
// id가 num1, num2인 첫번째 숫자(num1)과 두번째 숫자(num2)의 값이
// 둘 중에 하나라도 들어가지 않았을 때 결과(result)값을 초기화하는 조건문.
if (document.getElementById("num1").value == ""
|| document.getElementById("num2").value == "") {
document.getElementById("result").value = "";
}
// 첫번째 숫자(num1)과 두번째 숫자(num2)의 값이 둘 다 들어갔을 때의 조건문
else{
// 변수 num1과 num2 값을 각각의 id인 num1, num2을 사용자가 입력한 값을 정수로 대입
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
// 위에서 받은 num1 과 num2 값을 빼어 minus 변수에 대입
var minus = num1 - num2;
// minus을 id가 result를 갖는 값으로 반환
document.getElementById("result").value = minus;
// result값의 텍스트길이를 변수 length에 대입
var length = document.getElementById("result").value.length;
// id가 result를 갖는 요소의 style의 width값을 텍스트 길이 x 10 px로 변경.
// 이렇게 하지 않으면 결과 텍스트영역이 고정되는 문제가 발생한다.
document.getElementById("result").style.width = (length*10) + "px";
}
// 리셋 함수로 num1, num2 값을 초기화해주는 함수로 아래에 설명
reset();
}
// 위 HTML의 버튼에서 버튼이 클릭 됐을 때이 실행되어 계산하는 mul 함수
function mul() {
// id가 num1, num2인 첫번째 숫자(num1)과 두번째 숫자(num2)의 값이
// 둘 중에 하나라도 들어가지 않았을 때 결과(result)값을 초기화하는 조건문.
if (document.getElementById("num1").value == ""
|| document.getElementById("num2").value == "") {
document.getElementById("result").value = "";
}
// 첫번째 숫자(num1)과 두번째 숫자(num2)의 값이 둘 다 들어갔을 때의 조건문
else{
// 변수 num1과 num2 값을 각각의 id인 num1, num2을 사용자가 입력한 값을 정수로 대입
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
// 위에서 받은 num1 과 num2 값을 곱하여 mul 변수에 대입
var mul = num1 * num2;
// mul을 id가 result를 갖는 값으로 반환
document.getElementById("result").value = mul;
// result값의 텍스트길이를 변수 length에 대입
var length = document.getElementById("result").value.length;
// id가 result를 갖는 요소의 style의 width값을 텍스트 길이 x 10 px로 변경.
// 이렇게 하지 않으면 결과 텍스트영역이 고정되는 문제가 발생한다.
document.getElementById("result").style.width = (length*10) + "px";
}
// 리셋 함수로 num1, num2 값을 초기화해주는 함수로 아래에 설명
reset();
}
// 위 HTML의 버튼에서 버튼이 클릭 됐을 때이 실행되어 계산하는 div 함수
function div() {
// id가 num1, num2인 첫번째 숫자(num1)과 두번째 숫자(num2)의 값이
// 둘 중에 하나라도 들어가지 않았을 때 결과(result)값을 초기화하는 조건문.
if (document.getElementById("num1").value == ""
|| document.getElementById("num2").value == "") {
document.getElementById("result").value = "";
}
// 첫번째 숫자(num1)과 두번째 숫자(num2)의 값이 둘 다 들어갔을 때의 조건문
else{
// 변수 num1과 num2 값을 각각의 id인 num1, num2을 사용자가 입력한 값을 정수로 대입
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
// 위에서 받은 num1 과 num2 값을 나누어 div 변수에 대입
var div = num1 / num2;
// div를 id가 result를 갖는 값으로 반환
document.getElementById("result").value = div;
// result값의 텍스트길이를 변수 length에 대입
var length = document.getElementById("result").value.length;
// id가 result를 갖는 요소의 style의 width값을 텍스트 길이 x 10 px로 변경.
// 이렇게 하지 않으면 결과 텍스트영역이 고정되는 문제가 발생한다.
document.getElementById("result").style.width = (length*10) + "px";
}
// 리셋 함수로 num1, num2 값을 초기화해주는 함수로 아래에 설명
reset();
}
// 초기화를 실행하는 reset 함수
function reset() {
// 더하기, 빼기, 곱하기, 나누기 함수에 넣었으므로
// 아무 버튼 눌렀을 때 첫번째 숫자(num1)와 두번째 숫자(num2) 초기화
document.getElementById("num1").value = "";
document.getElementById("num2").value = "";
}
//스크립트 태그 종료
</script>
<!-- 바디 태그 종료 -->
</body>
<!-- html 태그 종료 -->
</html>