https://tyrionlife.tistory.com/191
[JS] 버튼을 누를 때마다 동적으로 변하는 페이지 만들기(계산기)
Insert title here input 태그의 type 속성을 선택자로 쓰려면 어떻게 할까? 아래처럼 하면 된다. input[type='button']{ /* padding : 0 20px; margin : 0px 5px; */ } 다른 버전
tyrionlife.tistory.com
잘 모를 때 만들어서 엉망이다. CSS, JS 까지 입힌 계산기 버전은 위 링크에 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border = "1">
<tr>
<th height = 20px colspan = "4"></th>
</tr>
<tr>
<th width = 10px height = 10px><input type = "button" value ="7" /></th>
<th width = 10px height = 10px><input type = "button" value ="8" /></th>
<th width = 10px height = 10px><input type = "button" value ="9" /></th>
<th width = 10px height = 10px><input type = "button" value ="/" /></th>
</tr>
<tr>
<th width = 10px height = 10px><input type = "button" value ="4" /></th>
<th width = 10px height = 10px><input type = "button" value ="5" /></th>
<th width = 10px height = 10px><input type = "button" value ="6" /></th>
<th width = 10px height = 10px><input type = "button" value ="*" /></th>
</tr>
<tr>
<th width = 10px height = 10px><input type = "button" value ="1" /></th>
<th width = 10px height = 10px><input type = "button" value ="2" /></th>
<th width = 10px height = 10px><input type = "button" value ="3" /></th>
<th width = 10px height = 10px><input type = "button" value ="-" /></th>
</tr>
<tr>
<th width = 10px height = 10px><input type = "button" value ="0" /></th>
<th width = 10px height = 10px><input type = "button" value ="." /></th>
<th width = 10px height = 10px><input type = "button" value ="+" /></th>
<th width = 10px height = 10px><input type = "button" value ="%" /></th>
</tr>
<tr>
<th colspan = "2"><input type = "button" style = "width: 50px"; value ="=" /></th>
<th colspan = "2"><input type = "button" style = "width: 50px"; value ="Clear" /></th>
</tr>
</table>
</body>
</html>+ 추가 : input type text 하면 입력을 키보드로 받을 수 있다.
'웹 프로그래밍 > HTML' 카테고리의 다른 글
| [HTML] 클라이언트의 정보를 서버로 보내기 (form 태그, input 태그) (0) | 2020.06.12 |
|---|---|
| [HTML] 링크 기능이 있는 게시판 만들어보기(table, a 태그) (0) | 2020.06.12 |
| [HTML] 한 번에 여러 줄의 코드를 수정하기 (alt + shift + a) (0) | 2020.06.11 |
| [HTML] 테이블 만들기 & 테이블 합치기 <table> 태그 (0) | 2020.06.11 |
| [HTML] HTML Standard (w3c 문서 참고하기) (0) | 2020.06.11 |
