1. 코드 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텐키리스 계산기</title>
<style>
*{box-sizing: border-box; margin: 0 0 0 0;}
span{width: 30px; height: 30px; background-color: cornsilk;text-align: center;
font-size: 20px; margin:0 1px 0 0;}
</style>
</head>
<body>
<div class="row">
<input readonly id="cal" />
<input readonly id="calOutput" />
</div>
<div class="row">
<span id="u">1</span>
<span id="i">2</span>
<span id="o">3</span>
<span id="p">+</span>
</div>
<div class="row">
<span id="j">4</span>
<span id="k">5</span>
<span id="l">6</span>
<span id="[">-</span>
</div>
<div class="row">
<span id="m">7</span>
<span id=",">8</span>
<span id=".">9</span>
<span id=";">*</span>
</div>
<div class="row">
<span id="/">0</span>
<span id="n">.</span>
<span id="'">/</span>
<span id="]">=</span>
</div>
</body>
</html>2. <span>태그 사용시 주의점
계산기에 필요한 필수항목들을 html과 css로 구현하여 준다.
여기서 중요한 점은, <span>을 그냥 사용하게 되면 여러 오류가 생긴다.
1. <span> width 적용 안됨
이 경우에는 css에서 display:inline-block 을 적용시켜 주어야 한다.
2. <span> 요소들 사이에 알 수 없는 간격이 발생함
이 경우는 <span> 태그들 사이의 줄바꿈을 간격으로 인식하여 발생하는 것이다.
상위 요소의 font-size를 0으로 만들면 되나, 예상치 못한 다른 오류가 생기지 않을까 생각한다. 이 부분에 대해서는 추가적으로 공부하고자 한다.
3. 수정된 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텐키리스 계산기</title>
<style>
body{font-size: 0px;}
*{box-sizing: border-box; margin: 0 0 0 0;}
span{display:inline-block;width: 30px; height: 30px; background-color: cornsilk;
text-align: center;font-size: 20px; margin:0 1px 0 0;}
</style>
</head>
<body>
<div class="row">
<input readonly id="cal" />
<input readonly id="calOutput" />
</div>
<div class="row">
<span id="u">1</span>
<span id="i">2</span>
<span id="o">3</span>
<span id="p">+</span>
</div>
<div class="row">
<span id="j">4</span>
<span id="k">5</span>
<span id="l">6</span>
<span id="[">-</span>
</div>
<div class="row">
<span id="m">7</span>
<span id=",">8</span>
<span id=".">9</span>
<span id=";">*</span>
</div>
<div class="row">
<span id="/">0</span>
<span id="n">.</span>
<span id="'">/</span>
<span id="]">=</span>
</div>
</body>
</html>
Hello :>