개발 공부/Projects

HTML / CSS) 계산기 만들기

Ryomi 2022. 8. 2. 19:42
728x90
반응형

<!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>Document</title>
    <link rel="stylesheet" href="Culculator2.css"
</head>
<body>
    <main>
        <div id="screen">0</div>
        
        <div id="pad-all">
            <div id="key-pad" class="pad">
                <div class="sec1">AC</div>
                <div class="sec1">+/-</div>
                <div class="sec1">%</div>
                <div class="sec2">7</div>
                <div class="sec2">8</div>
                <div class="sec2">9</div>
                <div class="sec2">4</div>
                <div class="sec2">5</div>
                <div class="sec2">6</div>
                <div class="sec2">1</div>
                <div class="sec2">2</div>
                <div class="sec2">3</div>
                <div id="zero" class="sec2">0</div>
                <div class="sec sec2">.</div>
            </div>
    
            <div id="right" class="pad">
                <div class="sec3">/</div>
                <div class="sec3">X</div>
                <div class="sec3">-</div>
                <div class="sec3">+</div>
                <div class="sec3">=</div>
            </div>
        </div>
    </main>
</body>
</html>
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 100px 500px;
    padding: 50px;}

main {
    background-color: rgba(0, 0, 0, 0.881);
    width:300px ;
    height: 500px;
    margin-bottom: 20px;
    border-radius: 30px;
    box-sizing: border-box;
    }

#screen {
    margin: 30px 10px 0px;
    padding: 30px ;
    border: 1px solid rgba(0, 85, 255, 0.575);
    border-radius: 20px;
    text-align: right ;
    font-weight: bolder;
    font-size: 30px;
    background-color: whitesmoke;
    }

#pad-all {
    box-sizing: border-box;
    width: 300px;
    height: 380px;
    display: flex;
    margin: 0px;
    padding : 0px;
    column-gap: 0;
    }

#key-pad {
    box-sizing: border-box;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    border-right: 0px;
    margin: 20px 0px 20px 10px;
    padding: 20px ;
    border-bottom-left-radius: 20px;
    display: grid;
    grid-template-columns: repeat(3,60px);
    grid-template-rows: repeat(5,60px);
    column-gap: 5px;
    width: 220px;
    }

#right {
    box-sizing: border-box;
    width:50px;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    margin: 20px 0px;
    padding: 20px 0px;
    border-bottom-right-radius: 20px;
    display: grid;
    grid-template-columns: repeat(1,60px);
    grid-template-rows: repeat(5,60px);
    border-left: 0px;
    }

#zero {
    display: grid;
    grid-column: 1/3;
    width: 110px;
    height: 50px;
    border-radius: 50px;
    }

.sec1 {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: lightgray;
    color: black;
    }
.sec2 {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: rgb(67, 67, 67);
    color: white;
    }

.sec3 {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: orange;
    color: white;
    }
728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

'개발 공부 > Projects' 카테고리의 다른 글

HTML/CSS/JS) Product Name  (0) 2022.11.05
HTML/CSS) Contact Us  (1) 2022.11.01
HTML/CSS) Responsive-Web  (0) 2022.10.27
HTML/CSS) Travel  (0) 2022.10.26
HTML/CSS) My Upcoming Challenges  (0) 2022.10.25

'개발 공부/Projects'의 다른글

  • 현재글HTML / CSS) 계산기 만들기

관련글

티스토리툴바