-
Rock-Paper-Scissors 만들기) 1. HTML, CSS 완성하기HTML & CSS & JAVASCRIPT 2021. 1. 24. 16:17
두번째 간단한 javascript 프로젝트는 가위바위보 만들기
https://www.youtube.com/watch?v=jaVNP3nIAv0&list=PLFD11aY4Ji8zbIVKINO1NsNCsM_YUhc_N&index=24
사진은 폴더에 images파일에 따로 저장해놓았다.
아이콘 파일이 따로 첨부되어 있지 않아서 댓글을 보니 어떤 사람이 아이콘 받을 수 있는 사이트를 첨부해 주었다. 👍
Download 158k Free Icons + Illustrations, Photos, and Music
Download design elements for free: icons, photos, vector illustrations, and music for your videos. All the assets made by designers → consistent quality ⚡️
icons8.com
1. index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Rock Paper Scissors Game</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>Rock Paper Scissors</h1> </header> <div class="score-board"> <div id = "user-label" class="badge">user</div> <div id = "computer-label" class="badge">comp</div> <span id = "user-score">0</span> <span id = "computer-score">0</span> </div> <div class="result"> <p>Paper covers rock. You win!</p> </div> <div class="choices"> <div class="choice" id = "r"> <img src="images/rock.png" alt=""> </div> <div class="choice" id = "p"> <img src="images/paper.png" alt=""> </div> <div class="choice" id = "s"> <img src="images/scissors.png" alt=""> </div> </div> <p id="action-message">Make your move.</p> </body> </html>2. styles.css
@import url('https://fonts.googleapis.com/css2?family=Asap:wght@500;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #003049; } header { background: white; padding: 20px; } header > h1 { color: #003049; text-align: center; font-family: Asap, sans-serif; } .score-board { margin: 20px auto;/*위아래 20px, 양옆 center*/ border: 3px solid white; border-radius: 4px; text-align: center; width: 200px; color: white; font-size: 46px; padding: 15px 20px;/*박스 안에서 패딩주기*/ font-family: Asap, sans-serif; position: relative; /*user-labe,computer-label 이후 남은 영역 상대적으로 사용*/ } .badge { background: #e63946; color: white; font-size: 14px; padding: 2px 10px; font-family: Asap, sans-serif; } #user-label { position : absolute; top: 30px; left: -25px; } #computer-label { position : absolute; top: 30px; right: -30px; } .result { font-size: 40px; color: white; font-weight: bold; font-family: Asap,sans-serif; } .result > p{ text-align: center; } .choices { margin-top: 50px; text-align: center; } .choice { border : 4px solid white; border-radius: 50%; margin: 0 20px;/*아이콘 끼리 사이에 공간 주기*/ padding: 10px; /*동그라미안에 아이콘 테두리 사이에 주기*/ display: inline-block; /*horiaontal 배치*/ transition: all 0.3s ease;/*마우스 가져자 댔을때 변하는 속도 느리게 */ } .choice:hover { cursor: pointer; background: #2a9d8f; } #action-message { text-align: center; color: white; font-family: Asap, sans-serif; font-weight: bold; font-size: 20px; margin-top: 20px; }사진으로 보면,
전체적인 구조와 디자인 html, cssfh 로 구현 
마우스를 가져다 댔을 때 배경색도 바뀌도록 설정해두었다. (hover) 'HTML & CSS & JAVASCRIPT' 카테고리의 다른 글
Weather App 만들기) Geolocation API 적용하기 (0) 2021.01.26 Rock-Paper-Scissors 만들기) 2. Javascript 완성하기 (0) 2021.01.24 Calculator 만들기) 3. Javascript 완성하기 (0) 2021.01.22 Calculator 만들기) 2. css 스타일 완성하기 (0) 2021.01.22 Calculator 만들기) 1. 기본 html, button 디자인 만들기 (0) 2021.01.21