-
[모각코+] 자바스크립트 12월과정 3일차모각코+/Javascript 2021. 12. 22. 17:11728x90
https://cafe.naver.com/codeuniv/54200?boardType=L
[모각코+ 출석 인증] 3일차 - 웹 자바스크립트 12월 과정 A조
대한민국 모임의 시작, 네이버 카페
cafe.naver.com
이번 3일차에서부터야 자바스크립트를 시작하는것 같아요.
이번 과제는 '모각코'의 버튼 3개를 생성한 뒤에 각 버튼 클릭시 글자가 생성되게 하는 것이였어요.
저는 각 모각코부분을 <p>태그로 각각 나누어 id명을 붙이고, 해당하는 부분의 id값을 document.getElementById().innerText를 통해 글자를 삽입하게 하고, 각 버튼의 onclick에 함수호출해서 글자를 띄웠습니다. 버튼이 너무 심심해보이지 않게 약간의 css도 적용했어요 :)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>삼행시</title> <link rel="stylesheet" href="day3.css"> <style> @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Single+Day&display=swap'); </style> </head> <body> <div class="context"> <p id="text1">모</p> <p id="text2">각</p> <p id="text3">코</p> </div> <div class="btn_group"> <button id="btn1" onclick="changetext1()">모</button> <button id="btn2" onclick="changetext2()">각</button> <button id="btn3" onclick="changetext3()">코</button> <script src="./day3.js"></script> </div> </body> </html>
#btn1 { margin-right:-6px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } #btn3 { margin-left:-6px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .btn_group button{ border: 1px solid skyblue; background-color: rgba(0,0,0,0); color: skyblue; padding: 5px; } .btn_group button:hover{ color:white; background-color: skyblue; } .context { font-family: 'Black Han Sans', sans-serif; font-family: 'Single Day', cursive; font-size: large; }
function changetext1(){ document.getElementById('text1').innerText="모두 열심히" } function changetext2(){ document.getElementById('text2').innerText="각잡고" } function changetext3(){ document.getElementById('text3').innerText="코딩합시다!" }
728x90'모각코+ > Javascript' 카테고리의 다른 글
[모각코+] 자바스크립트 12월과정 6일차 (0) 2021.12.27 [모각코+] 자바스크립트 12월과정 5일차 (0) 2021.12.26 [모각코+] 자바스크립트 12월과정 4일차 (0) 2021.12.23 [모각코+] 자바스크립트 12월과정 2일차 (1) 2021.12.22 [모각코+] 자바스크립트 12월과정 1일차 (0) 2021.12.20