HTML & CSS & JAVASCRIPT
-
애니메이션 멈추기HTML & CSS & JAVASCRIPT 2021. 10. 26. 16:24
웹페이지에서 hover 했을 때 애니메이션을 멈추고 싶다면, 다음과 같이 설정해준다. .home_posts_tape_container:hover .home_posts_tape_top_phrase{ -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; }
-
Number타입의 Input에서 증감 정도를 조절하고 싶을 때HTML & CSS & JAVASCRIPT 2021. 10. 26. 16:20
Number 타입의 input에서 증감 범위를 조절하고 싶다면, step을 이용하면 된다. Price setPrice(e.target.value)} /> (참고한 사이트) https://www.python2.net/questions-195666.htm reactjs - React의 숫자 입력에서 toFloat 및 setState 사용 사용자가 입력 할 때 상태를 통해 새 값을 설정하는 숫자 입력 필드가 있습니다. 이것은 잘 작동합니다. 그러나 소수점에 소수점을 추가하면 (toFixed) 한 자리 만 입력 한 후 커서가 입력 끝으로 www.python2.net
-
Number타입 Input 에서 화살표 모양을 삭제하고 싶을 때HTML & CSS & JAVASCRIPT 2021. 10. 26. 16:16
넘버타입 input에서 화살표 증감 표시를 삭제하고 싶다면, css에 다음과 같이 추가해주도록 하자. /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } (참고한 사이트) https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp How To Hide Arrows From Number Input W3Schools offers free o..
-
Weather App 만들기) Geolocation API 적용하기HTML & CSS & JAVASCRIPT 2021. 1. 26. 00:39
자바스크립트 날씨앱 만들기 ☀️ https://www.youtube.com/watch?v=wPElVpR1rwA&t=449s 영상에서 보여주는 API가 사이트가 막히는 바람에 😭 걱정했는데, 역시 댓글 요정님들. 대체안을 올려주셨다! 날씨정보관련 API는 여기서 대체할 수 있다. https://openweathermap.org Сurrent weather and forecast - OpenWeatherMap Access current weather data for any location on Earth including over 200,000 cities! The data is frequently updated based on global and local weather models, satellites,..
-
Rock-Paper-Scissors 만들기) 2. Javascript 완성하기HTML & CSS & JAVASCRIPT 2021. 1. 24. 18:14
버튼 누름에 따라서 사용자의 게임결과 변화 만드는 것이 주된 목적이다. 1. 계산 결과에 따라서 점수판 변경하기 2. 승리여부에 따른 멘트 변경하기 3. 승리 여부 빛으로 나타내기 1. index. html 끝에 자바스크립트 script문장을 추가했다. Rock Paper Scissors user comp 0 0 Paper covers rock. You win! Make your move. 2. styles.css 결과에 따라서 빛을 추가하기 위해서 glow 영역을 마지막에 추가했다. (!important대신에 맨 아래에 추가했음) @import url('https://fonts.googleapis.com/css2?family=Asap:wght@500;700&display=swap'); * { margi..
-
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파일에 따로 저장해놓았다. 아이콘 파일이 따로 첨부되어 있지 않아서 댓글을 보니 어떤 사람이 아이콘 받을 수 있는 사이트를 첨부해 주었다. 👍 https://icons8.com Download 158k Free Icons + Illustrations, Photos, and Music Download design elements for free: icons, photos, vector illustrations, and music for your videos..
-
Calculator 만들기) 3. Javascript 완성하기HTML & CSS & JAVASCRIPT 2021. 1. 22. 20:20
버튼의 전체적인 디자인을 완성했다면, 버튼 클릭시에 일어나는 계산과 화면상의 출력물을 javascript를 이용해서 설정한다. 1. 수식 버튼을 눌렀을 때 올바른 계산이 작동할 것 2. '.'을 누르거나 = 을 누르거나 ac, del 버튼 작동시 각각의 기능을 수행할 것 3. 화면상 보이는 숫자 3자릿 수 만다 ','가 찍히도록 숫자인식 방식을 줄 것 1. index.html AC DEL ÷ 1 2 3 * 4 5 6 + 7 8 9 - . 0 = 2. styles.css *, *::before, *::after { box-sizing: border-box; font-family: Arial, sans-serif ; font-weight: normal; } body { padding: 0; margin: 0..
-
Calculator 만들기) 2. css 스타일 완성하기HTML & CSS & JAVASCRIPT 2021. 1. 22. 19:37
1. index.html AC DEL ÷ 1 2 3 * 4 5 6 + 7 8 9 - . 0 = 2. styles.css *, *::before, *::after { box-sizing: border-box; font-family: Arial, sans-serif ; font-weight: normal; } body { padding: 0; margin: 0; background: linear-gradient(to right,#ffa585,#ffeda0); } .calculator-grid { display: grid; justify-content: center; align-content: center; min-height: 100vh; grid-template-columns: repeat(4, 100px..