Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@amuroamuro
amuroamuro authored Nov 2, 2024
0 parents commit d860a4f
Show file tree
Hide file tree
Showing 4 changed files with 194 additions and 0 deletions.
35 changes: 35 additions & 0 deletions mini_project/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!doctype html>

<html>
<head>
<meta charset="UTF-8">
<title>서비스홈페이지</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="header">
<header>
<p class="logo">JOOGLE</p>
</header>
<button id="servise" onfocus="show()">서비스 보기</button>
</div>
<div id="link" class="link" style="display: none;" >
<a href="%EA%B3%84%EC%82%B0%EA%B8%B0.html" onclick="show()" target="_blank">계산기 이용하기</a>
<button onclick="blined()" class="btm">X</button>
</div>

<script>

function show(){
document.getElementById('link').style.display='block';
}

function blined(){
document.getElementById('link').style.display='none';
}


</script>

</body>
</html>
53 changes: 53 additions & 0 deletions mini_project/main.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
body{
background-color: #afafaf;
}

.header{
background-color: gray;
padding: 0.5rem;
border-top-left-radius: 40px;
border-bottom-left-radius: 40px;
display: grid;
grid-template-columns: repeat(2, 14rem);
width: 60remrem;
}

.header header{
background-color: black;
padding: 5px;
width: 80px;
border-radius: 60px
}

.header header .logo{
font-size: 20px;
color: white;
font-weight: 900
}

.header button{
background-color: transparent;
border: none;
font-size: 2.5rem;
}

.header button:hover{
border-bottom: solid 5px;
}

.header button:focus{
border-bottom: solid 5px;
}


.link {
transition: 0.5;
}

.btm{
background-color: #eb4646;
}




73 changes: 73 additions & 0 deletions mini_project/계산기.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
body{
background-color: #1f1f1f;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.cf{
background-color: #d4d4d4;
padding: 1rem;
border: solid 2px;
border-radius: 2rem;
}

.cf form{
background-color: gray;
display: grid;
grid-template-columns: repeat(4,64px);
grid-auto-rows: 64px;
grid-gap: 5px;
padding: 5px;
border: solid 2px;
border-radius: 2rem;
}

.c{
grid-column: span 3;
background-color: #db0000;
border-radius: 1rem;
}

.n{
grid-column: span 1;
border-radius: 1rem;
}

.cc{
background-color: #e5e500;
border-radius: 1rem;
}

.cf form input[type='text']{
grid-column: span 4;
background-color: white;
border-radius: 1rem;
}

.dot{
background-color: #e5e500;
border-radius: 1rem;
}

.cr{
grid-column: span 2;
background-color: #0000ce;
border-radius: 1rem;
}

.cf form *{
border: solid 2px;
font-size: 15px;
}

.cf form *[type= 'button']:hover{
border: solid 4px;
}

.cf form *[type= 'button']:left{
border: solid 5px;
}


33 changes: 33 additions & 0 deletions mini_project/계산기.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!doctype html>

<html>
<head>
<title>계산기</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="%EA%B3%84%EC%82%B0%EA%B8%B0.css">
</head>
<body>
<div class="cf">
<form name="form">
<input type="text" name="output" readonly>
<input type="button" value="C" class="c" onclick="document.form.output.value='';">
<input type="button" value="+" class="cc" onclick="document.form.output.value+='+';">
<input type="button" value="1" class="n" onclick="document.form.output.value+='1';">
<input type="button" value="2" class="n" onclick="document.form.output.value+='2';">
<input type="button" value="3" class="n" onclick="document.form.output.value+='3';">
<input type="button" value="-" class="cc" onclick="document.form.output.value+='-';">
<input type="button" value="4" class="n" onclick="document.form.output.value+='4';">
<input type="button" value="5" class="n" onclick="document.form.output.value+='5';">
<input type="button" value="6" class="n" onclick="document.form.output.value+='6';">
<input type="button" value="*" class="cc" onclick="document.form.output.value+='*';">
<input type="button" value="7" class="n" onclick="document.form.output.value+='7';">
<input type="button" value="8" class="n" onclick="document.form.output.value+='8';">
<input type="button" value="9" class="n" onclick="document.form.output.value+='9';">
<input type="button" value="/" class="cc" onclick="document.form.output.value+='/';">
<input type="button" value="." class="dot" onclick="document.form.output.value+='.';">
<input type="button" value="0" class="n" onclick="document.form.output.value+='0';">
<input type="button" value="=" class="cr" onclick="document.form.output.value=eval(document.form.output.value);">
</form>
</div>
</body>
</html>

0 comments on commit d860a4f

Please sign in to comment.