[HTML/CSS] 계산기 만들기 (기능구현X)

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다.

계산기 원본

HTML

cal.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="cal.css">
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
</head>
<body>
<div id = "backgroundArea">
  <div id = 'calculator'>
    <div id="topBar">
        <div class="topBarText">CASIO</div>
        <div id="charger"></div>
        <div class="topBarText">KW-98</div>
    </div>
    <div id="resultBar">
        <div id="settingArea">I`M READY</div>
        <div id="resultArea">123456789</div>
    </div>
    <div id="middleBar">
        <button class="taxBtn">TAX-</button>
        <button class="taxBtn">TAX+</button>
    </div>
    <div id="btnBar">
        <div id="btnBarLeft">
            <div class="btnSpaceC">
                <button class="btnNum etc">M/EX</button>
                <button class="btnNum etc">%</button>
                <button class="btnNum etc">√</button>
                <button class="btnNum etc">▶</button></div>
            <div class="btnSpaceC">
                <button class="btnNum etc">MC</button>
                <button class="btnNum etc">MR</button>
                <button class="btnNum etc">M-</button>
                <button class="btnNum etc">M+</button></div>
            <div class="btnSpaceC">
                <button class="btnNum etc">+/-</button>
                <button class="btnNum Num">7</button>
                <button class="btnNum Num">8</button>
                <button class="btnNum Num">9</button>
            </div>
            <div class="btnSpaceC">
                <button class="btnNum Red">C</button>
                <button class="btnNum Num">4</button>
                <button class="btnNum Num">5</button>
                <button class="btnNum Num">6</button>
            </div>
            <div class="btnSpaceC">
                <button class="btnNum Red">AC</button>
                <button class="btnNum Num">1</button>
                <button class="btnNum Num">2</button>
                <button class="btnNum Num">3</button>
            </div>
            <div class="btnSpaceC">
                <button class="btnNum Num">0</button>
                <button class="btnNum Num">00</button>
                <button class="btnNum Num">.</button>
                <button class="btnNum Num">=</button>
            </div>
        </div>
        <div id="btnBarRight">
            <div id="btnCal">
                <button class="btnNum cal">GT</button>
                <button class="btnNum cal">÷</button>
                <button class="btnNum cal">×</button>
                <button class="btnNum cal">-</button>
                <button class="btnNum plus">+</button>
            </div>
        </div>
    </div>
  </div>
</div>
</body>
</html>

CSS

cal.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-repeat: no-repeat;
    background-size: auto;
    background-image: url("https://search.pstatic.net/sunny/?src=https%3A%2F%2Fae01.alicdn.com%2Fkf%2FHf29232c100b44c06a06490ade618a985r%2F1-PC.jpg&type=sc960_832");
}
#calculator{
    margin: 50px;
    height: 400px;
    width: 250px;

    background-color: #E2B9B3;
    border-radius: 5%;

    display: flex;
    flex-direction: column;
}
#topBar{
    font-size: small;

    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: space-evenly;
}
.topBarText{
    block-size: fit-content;
    font-family: 'Oswald', sans-serif;
    color: #2A2A32;

    display: flex;
}
#charger{
    width: 70px;
    height: 20px;
    background-color: #100F0B;
    border-radius: 10%;
}
#resultBar{
    background-color: #3C4B42;
    border-style : inset;
    border-width:1px 3px 8px 3px;
    margin: 0px 20px 15px 20px;
    border-radius: 5%;
    max-height: 80px;

    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: center;
    font-family:'digital-clock-font';
}
#settingArea{
    font-size: 5px;
    padding: 2px 5px 0px 5px;
    display: flex;
}
#resultArea{
    font-size: 45px;
    max-height: 80px;
    padding: 0px 5px 0px 0px;

    display: flex;
    justify-content: end;
    align-items: end;
}

#middleBar{
    background-color: #FDF0EE;
    max-height: 40px;
    padding-right: 15px;

    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    align-items: center;
}

.taxBtn{
    height: 15px;
    width: 35px;
    border: 2px outset;
    border-radius: 15%;
    color : #0f6f0f;

    font-size: 10px;

    display: flex;
    margin-right: 5px;
    justify-content: center;
    align-items: center;
}
#btnBar{
    background-color: #d2c0c0;
    padding: 10px 15px 20px 15px;
    border-radius: 0% 0% 5% 5%;

    display: flex;
    flex-grow: 6;
}
#btnBarLeft{
    display: flex;
    flex-grow: 4;
    flex-direction: column;
    flex-basis: 0px;
}
.btnSpaceC{
    display: flex;
    flex-grow: 1;
    flex-basis: 0px;
}
.etc, .Red, .Num{
    flex-grow: 1;
}
#btnBarRight{
    display: flex;
    flex-grow: 1;
    flex-basis: 0px;
}

#btnCal{
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    flex-basis: 0px;
}
.cal{
    flex-grow: 1;
}
.plus{
    flex-grow: 2.65;
 }
.btnNum{
    border: 2px outset;
    border-radius: 15%;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 15px;

    display: flex;
    flex-basis: 0px;
    justify-content: center;
    align-items: center;
    margin: 5px;
}
.Red{
    color : #9f0000;
}

button:active {
    border-style : inset;
}

@font-face {
    src : url('./font/digital-7.ttf');
    font-family: 'digital-clock-font'
}

완성

폰트사용

https://www.1001fonts.com/digital-7-font.html

Digital-7 Font Family · 1001 Fonts

Download Digital-7 Font Family · Free for personal use · The font Digital-7 is freeware for home use only, freeware software (credit needed) and for your education process. ADMIN NOTE: The once given link to...

www.1001fonts.com

이미지사용

https://ko.aliexpress.com/item/32688850237.html

12485.0₩ |복고풍 모조 나무 판자 배경 종이, 미식가 아침 식사 과일 사진 촬영 소품, 1 개|retro 1|ret

Smarter Shopping, Better Living! Aliexpress.com

ko.aliexpress.com

새로 알게된 내용

class명을 class = "name1 name2"처럼 띄어쓰기를 통해 두개이상 저정할 수 있다.
색상 지정에 rgba라는 것이 있는데 rgba(빨강, 초록, 파랑, 투명도)를 나타내어 대상의 투명도를 조정할 수있다.
다운받은 폰트는 위치를 정하고 이름을 정해서 사용할 수있다,

@font-face {
    src : url('./font/digital-7.ttf');
    font-family: 'digital-clock-font'
}

font-family로 원하는 폰트를 사용할 수 있다.

    font-family:'digital-clock-font';

배경을 한번만 나오게 하고 싶으면 background-repeat : no-repeat;으로 해준다.
배경 사이즈를 원본과 같게 하고싶은 경우 background-size : auto로 지정한다.

body{
    background-repeat: no-repeat;
    background-size: auto;
    background-image: url("https://search.pstatic.net/sunny/?src=https%3A%2F%2Fae01.alicdn.com%2Fkf%2FHf29232c100b44c06a06490ade618a985r%2F1-PC.jpg&type=sc960_832");
}

border-style에는 여러가지가 있는데, outset으로 정하면 버튼 모양으로 밖으로 돌출되게 하고,
inset으로 설정하면 안쪽으로 들어가게 할수 있다.
요소의 box를 outset으로 정하고, 가상클래스 :active에 border-style을 inset으로 하면 버튼 처럼 클릭되었을때는 들어가고 아닐때는 나오게 된다

button:active {
    border-style : inset;
}

저작자표시 (새창열림)

'프론트엔드 > Codestates' 카테고리의 다른 글

[Linux] CLI (0)	2022.09.01
[JavaScript]계산기 만들기 (0)	2022.08.31
[HTML/CSS] Flexbox (0)	2022.08.29
[HTML/CSS] 레이아웃 (0)	2022.08.29
[CSS] CSS Selector (0)	2022.08.26