웹 공부/javascript 14

코딩 스터디(모각코) 7월 과정 수료 후기 - 한 입 웹개발(JS)

⭐ 온라인 코딩 스터디 - 코뮤니티 모각코 후기 ⭐ ✅ 참여한 과정 이름 : 한 입 웹개발 (JS) ✅ 기수 : 7월 과정 👉 모각코에 참여하게 된 계기 블로그를 통해 모각코라는 사이트를 알게 되었고, javscript를 배우는 좋은 기회가 될 것 같아 모각코 7월 과정에 참여하게 되었습니다. 👉 모각코로 인한 변화 과제를 수행하면서 모르는 부분이 있으면 스스로 검색을 해서 답을 찾으면서 많은 것들을 배울 수 있었고, 혼자였다면 하지 못했을 부분도 스터디 팀원들과 서로 응원하면서 하니 더 열심히 할 수 있었습니다. js뿐만 아니라 html, css를 계속해서 사용하면서 웹에 대한 전반적인 이해와 코드 사용 실력이 발전하게 되었습니다. 👉 모각코에 참여해서 좋았던 점 스터디를 하면서 시간을 알차고 의미 있..

코딩 스터디(모각코) 13일차 - 한 입 웹개발(JS)

✅ 오늘의 문제 : 챗봇 완성 시키기 ✅ 오늘의 문제 풀이 인증 댕댕🐾 시키기 *{ font-family: 'Gamja Flower', cursive; color: rgb(70, 36, 12); } .box{ text-align: center; line-height: 200px; width: 380px; height: 200px; border-style: solid; border-color: rgb(126, 91, 66); border-width:4px; border-radius: 5px; margin-bottom: 10px; margin-left: auto; margin-right: auto; font-size: 30px; position: relative; } #img{ display: block; ..

코딩 스터디(모각코) 12일차 - 한 입 웹개발(JS)

✅ 오늘의 문제 : 오늘 배운 style 변경 능력을 통해 다양한 디자인 적용하기 👉 예시 ✅ 오늘의 문제 풀이 인증 냐앙~ 시키기 *{font-family: 'Gamja Flower', cursive;} .box{ text-align: center; line-height: 200px; width: 500px; height: 200px; border-style: solid; border-color: rgb(126, 91, 66); border-width:4px; border-radius: 5px; margin-bottom: 30px; margin-left: auto; margin-right: auto; font-size: 30px; position: relative; } img{ display: bloc..

코딩 스터디(모각코) 11일차 - 한 입 웹개발(JS)

✅ 오늘의 문제 : 사용자의 입력을 받아 특정 텍스트가 들어왔을 때, 자신이 출력하거나 바꾸고 싶은 요소들을 console.log()로 출력 👉 예시 ✅ 오늘의 문제 풀이 인증 냐앙~ 시키기 *{font-family: 'Gamja Flower', cursive;} .box{ text-align: center; line-height: 200px; width: 500px; height: 200px; border-style: solid; border-color: rgb(126, 91, 66); border-width:4px; border-radius: 5px; margin-bottom: 30px; margin-left: auto; margin-right: auto; font-size: 30px; positio..

코딩 스터디(모각코) 10일차 - 한 입 웹개발(JS)

✅ 오늘의 문제 : 전화걸기 버튼을 누르면 2초 뒤에 이름과 전화번호 출력하기 👉 예시 ✅ 오늘의 문제 풀이 인증 kakaotalk 친구 4 🐾곰돌이 😻야옹이 🐨댕댕이 🐰토깽이 body{ display: flex; justify-content: center; align-items: center; margin-top: 5%; color:#556677; text-align: center; font-family: 'Gamja Flower', cursive; } #phone_box{ border: 4px solid grey; border-radius:35px; width: 300px; height: 500px; background-color: black; } #display{ color: #556677; fon..

코딩 스터디(모각코) 9일차 - 한 입 웹개발(JS)

✅ 오늘의 문제 : 자신이 좋아하는 영화 정리하기 👉 예시 ✅ 오늘의 문제 풀이 인증 NETFLEX 나의 추천 영화 이프 온리 2004 멜로/로맨스, 코미디, 드라마, 판타지 눈앞에서 사랑하는 연인을 잃은 남자는 다음 날 아침, 자신의 옆에서 자고 있는 연인을 보고 소스라치게 놀란다. 기쁨도 잠시, 정해진 운명은 바꿀 수 없단 것을 깨달은 그는 더 늦기 전에 자신의 진정한 사랑을 전하기로 마음먹는데… 네가 아니었다면 난 영영 사랑을 몰랐을 거야 사랑하는 법을 알게 해줘서 고마워, 사랑받는 법도. body{ background-color: black; color: rgba(240, 248, 255, 0.781); } header .logo{ color: rgba(224, 41, 41, 0.801); fon..

코딩 스터디(모각코) 8일차 - 한 입 웹개발(JS)

✅ 오늘의 문제 : 전광판 만들기 ❗자신이 선택한 문구를 클릭할 때 마다 글자가 하나씩 늘어나도록 하시면 됩니다. 👉 예시 ✅ 오늘의 문제 풀이 인증 click! .all{ width: 600px; margin: auto; } *{ font-family: 'Gamja Flower', cursive; } img{ width: 600px; height: 500px; } button{ border: none; background-color:rgb(238, 166, 31); color: aliceblue; line-height: 70px; font-size: 3rem; border-radius: 10px; display: block; margin-left: auto; margin-right: auto; marg..

코딩 스터디(모각코) 7일차 - 한 입 웹개발(JS)

✅ 오늘의 문제 : 반복문과 조건문을 이용하여 간단한 스톱워치 만들기 👉 예시 ✅ 오늘의 문제 풀이 인증 StopWatch 00:00:00 START STOP RESET button{ border: none; background-color: rgb(33, 41, 146); color: aliceblue; border-radius: 10px; line-height: 40px; text-align: center; } .all{ background-color: aqua; padding-left: 30px; padding-bottom: 20px; padding-top: 10px; border-radius: 10px; width: 200px; margin: auto; } #display{ margin-left: ..

코딩 스터디(모각코) 6일차 - 한 입 웹개발(JS)

✅ 오늘의 문제 : console.log( )를 통해 사칙연산을 출력해보세요 👉 예시 ✅ 오늘의 문제 풀이 인증 + - * / img{ width: 350px; border-radius: 20px; margin-bottom: 20px; display: block; margin-left: auto; margin-right: auto; } .btns{ width: 420px; margin: auto; } button{ width:100px ; height: 50px; background-color: rgb(191, 163, 218); font-size: 30px; color: aliceblue; border: none; border-radius: 10px; cursor: pointer; } var x=1; ..

코딩 스터디(모각코) 5일차 - 한 입 웹개발(JS)

✅ 오늘의 문제 : console.log()를 이용하여 객체 데이터 출력 해보기 👉 예시 ✅ 오늘의 문제 풀이 인증 click! .all{ border: 6px solid goldenrod; border-radius: 20px; width: 300px; margin: auto; padding-top: 5px; padding-bottom: 5px; } img{ width: 200px; display: block; margin-left: auto; margin-right: auto; } button{ border: none; background-color: rgb(236, 205, 29); color: aliceblue; width: 100px; font-size: 2rem; display: block; m..