-
[모각코+] 자바스크립트 12월과정 9일차모각코+/Javascript 2021. 12. 31. 01:21728x90
https://cafe.naver.com/codeuniv/55991?boardType=L
[모각코+ 출석 인증] 9일차 - 웹 자바스크립트 12월 과정 A조
대한민국 모임의 시작, 네이버 카페
cafe.naver.com
이번 과제는 버튼을 만들고, 클릭에 따라 좋아하는 영화를 소개하는 페이지를 만드는 것이였습니다 !
HTML 파일
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>영화 소개</title> <link rel="stylesheet" href="./day9.css"> <style> @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Single+Day&display=swap'); </style> </head> <body> <div class="container"> <div class ="btngroup"> <button class="btn1" onclick=firstBtn()>신세계</button> <button class="btn2" onclick=secondBtn()>바람</button> <button class="btn3" onclick=thirdBtn()>킹스맨</button> </div> <div class="explain"> <h2 id = "ttl"></h2> <p id = "ttl2"></p> <p id = "ttl3"></p> </div> <script src = "./day9.js"></script> </div> </body> </html>CSS 파일
body { background-color: white } .container { margin: 100px; text-align: center; } .explain { font-family: 'Black Han Sans', sans-serif; font-family: 'Single Day', cursive; font-size: 30px; font-weight: bolder; } button { 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; }JS 파일
let text1 = document.getElementById("ttl"); let text2 = document.getElementById("ttl2"); let text3 = document.getElementById("ttl3"); function firstBtn(){ text1.innerHTML = "신세계" text2.innerHTML = " <img src='movie1.jpg' width=300px; height=300px> "; text3.innerHTML = "👉2012년 개봉<br>👉범죄 장르"; } function secondBtn(){ text1.innerHTML = "바람" text2.innerHTML = " <img src='movie2.jpg' width=300px; height=300px> "; text3.innerHTML = "👉2009년 개봉<br>👉드라마 장르"; } function thirdBtn(){ text1.innerHTML = "킹스맨" text2.innerHTML = " <img src='movie3.jpg' width=300px; height=300px> "; text3.innerHTML = "👉2021년 개봉<br>👉액션 장르"; }
728x90'모각코+ > Javascript' 카테고리의 다른 글
[모각코+] 자바스크립트 12월과정 11일차 (0) 2022.01.03 [모각코+] 자바스크립트 12월과정 10일차 (0) 2022.01.02 [모각코+] 자바스크립트 12월과정 8일차 (0) 2021.12.29 [모각코+] 자바스크립트 12월과정 7일차 (0) 2021.12.28 [모각코+] 자바스크립트 12월과정 6일차 (0) 2021.12.27