-
[모각코+] 자바스크립트 12월과정 4일차모각코+/Javascript 2021. 12. 23. 23:40728x90
코딩 커뮤니티 - 코뮤니티 [파이썬/... : 네이버 카페
코뮤니티 [코딩공부/독학/스터디/대외활동] : python, C언어, java, 자바스크립트, HTML, CSS, 웹/앱개발
cafe.naver.com
이번시간에는 console.log의 활용법을 배우는 시간이였습니다.
얼핏 보면 단순해보일지 몰라도 개발하면서 자주 쓰게 되는 요소중 하나죠 ~
✅ 오늘의 문제 : 버튼을 누르면 console.log()를 통해 0부터 값이 올라가는 버튼 만들기
생각보다 간단한 내용이여서 버튼이라도 조금 꾸며봤습니다 !
자바스크립트 내용이 짧아서 파일을 별도로 분리하지않고 <script>태그 안에 그냥 사용했습니다.
html파일
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Console Log</title> <link rel="stylesheet" href="day4.css"> <style> @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Single+Day&display=swap'); </style> </head> <body> <button class="btn" onclick=upcount()>click Me</button> <script> let count = 1 function upcount(){ console.log(count++) if(count>10){ console.log("10이 최대치입니다. 다시 리셋합니다."); count=1; } } </script> </body> </html>CSS파일
.btn { position: relative; border: none; display: inline-block; padding: 15px 30px; border-radius: 15px; font-family: "paybooc-Light", sans-serif; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); text-decoration: none; font-weight: 600; transition: 0.25s; background: linear-gradient(-45deg, #33ccff 0%, #ff99cc 100%); color: white; }
728x90'모각코+ > Javascript' 카테고리의 다른 글
[모각코+] 자바스크립트 12월과정 6일차 (0) 2021.12.27 [모각코+] 자바스크립트 12월과정 5일차 (0) 2021.12.26 [모각코+] 자바스크립트 12월과정 3일차 (0) 2021.12.22 [모각코+] 자바스크립트 12월과정 2일차 (1) 2021.12.22 [모각코+] 자바스크립트 12월과정 1일차 (0) 2021.12.20
