11

코딩 스터디(모각코) 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: ..

코딩 스터디(모각코) 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..

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

✅ 오늘의 문제 : 버튼을 누르면 console.log()를 통해 0부터 값이 올라가는 버튼 만들기 👉 예시 ✅ 오늘의 문제 풀이 인증 click! .all{ width: 400px; border: 4px solid cornflowerblue; border-radius: 15px; padding-top: 5%; padding-bottom: 5%; margin: auto; } img{ display: block; margin-left: auto; margin-right: auto; border-radius: 10px; } button{ width: 200px; height: 50px; margin-top: 20px; border: none; color: aliceblue; background-color: ..

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

✅ 오늘의 문제 : 모각코 삼행시 버튼 만들기 ❗'모' 버튼, '각' 버튼, '코' 버튼을 누르면 각 운에 맞는 텍스트로 변경되도록! 👉 예시 [클릭 전] [클릭 후] ✅ 오늘의 문제 풀이 인증 모 각 코 모 각 코 *{ font-family: 'Gamja Flower', cursive; } .wrap{ width: 450px; margin: auto; } .text{ color: black; font-size: 50px; } button{ width: 140px; height: 70px; font-size: 30px; border:none; background-color: lightgray; color: black; text-decoration: none; cursor: pointer; margin-t..