코딩 스터디(모각코) 4일차 - 한 입 웹개발(JS)

웹 공부/javascript

코딩 스터디(모각코) 4일차 - 한 입 웹개발(JS)

윈터가든 2021. 7. 8. 14:00

✅ 오늘의 문제 : 버튼을 누르면 console.log()를 통해 0부터 값이 올라가는 버튼 만들기

👉 예시

✅ 오늘의 문제 풀이 인증

<HTML>

<!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>javascript3</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Gamja+Flower&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./3.css">
    <script src="./3.js"></script>
</head>
<body>
<div class="all">
<img src="img/포키.jpg"><br>
<button onclick="onclick1()">click!</button>
</div> 
</body>
</html>

<css>

.all{
    width: 400px;
    border: 4px solid  cornflowerblue;
    border-radius: 15px;
    padding-top: 5%;
    padding-bottom: 5%;
    margin: auto;
    
}

img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
}

button{
    width: 200px;
    height: 50px;
    margin-top: 20px;
    border: none;
    color: aliceblue;
    background-color: skyblue;
    font-family: 'Indie Flower', cursive;
    font-weight: bolder;
    font-size:large;
    border-radius: 40px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    
}

var i=0
function onclick1(){
    console.log(i);
    i++;
}

<결과화면>

✅ 오늘의 한마디

javascript에서 함수를 정의하는 문법

function 함수이름(매개변수1, 매개변수2,...) {
          함수가 호출되었을 때 실행하고자 하는 실행문;
}

저작자표시