KBW's cosmos

HTML과 CSS를 만만히 보고 그냥 JS를 배우면서 웹 공부를 시작했는데 막상 웹페이지를 만들다보니 HTML과 CSS의 기초가 부족해 검색창하나 만드는데도 애를 먹었다. 기본적인 것들은 먼저 배우고 시작해야겠다고 생각해 HTML CSS 카테고리를 새로 만들고 공부한 내용을 기록한다. 오늘은 생활코딩 WEB2 CSS 수업을 다 듣고 들으며 필기한 내용을 올려두려고 한다. 출처 : https://youtu.be/Ok0bBJPtgJI 선택자(Selector) : 그냥 태그 이름을 적으면 해당 태그 전체를 선택하는 선택자를 사용한 것이다. class를 이용해 해당 클래스의 선택자를 사용할 때는 .을 이용한다. 그런데 class는 아래와 같이 두 개의 이름을 지정할 수도 있다. 그러면 아래와 같이 속성을 지정할..

⭐ 온라인 코딩 스터디 - 코뮤니티 모각코 후기 ⭐ ✅ 별명 : koh1018 ✅ 참여한 과정 이름 : 한 입 웹개발 (JS) ✅ 기수 : 5월 과정 👉 모각코에 참여하게 된 계기 학기중에 할 만한 활동 및 프로그램을 알아보다가 어느날 인스타에서 하는 코뮤니티 홍보스토리를 봤어요! 이전에 앱을 만들면서 웹도 배워서 하나의 작은 플랫폼 서비스를 만들어보고 싶다는 생각을 했는데 웹을 배울 정말 좋은 기회가 될 것같아서 바로 지원하게 되었습니다! 👉 모각코로 인한 변화 가장 큰 변화라고 한다면 웹을 아예 모르던 제가 웹으로 초보 수준의 챗봇을 만들 수 있게 되었다는 것 같습니다! 아무래도 눈에 보이는 성장이라는게 가장 의미있는 변화가 아닐까 싶어요.. 처음에는 15일 동안 진행한다고 해서 배우기에 너무 짧은 ..

✅ 오늘의 문제 풀이 인증 📣 과제에 대한 답안 코드는 를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가) 📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁 새로 말을 배울 수 있도록 해봤습니다!! Day15.html 냐옹~ 시키기 불 켜줘 Day15.css /*Snow Keyframes*/ @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-moz-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0p..

✅ 오늘의 문제 풀이 인증 📣 과제에 대한 답안 코드는 를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가) 📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁 typewriter CDN을 가져와서 고양이가 못알아 듣는 말을 했을 때 위에 알림이 뜨도록 만들어봤습니다! Day14.html 냐옹~ 시키기 불 켜줘 Day14.css /*Snow Keyframes*/ @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-moz-keyframes snow { 0% {backgro..

✅ 오늘의 문제 풀이 인증 📣 과제에 대한 답안 코드는 를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가) 📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁 따라하는 고양이 & 말안듣는 고양이를 만들어봤어요! Day13.html 냐옹~ 시키기 불 켜줘 Day13.css /*Snow Keyframes*/ @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-moz-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, ..

✅ 오늘의 미션 사진 업로드 애용을 넘어 애정하는 첫 구글플레이 출시 앱입니다 ㅠ 많이 부족하지만 첫 앱이라 많이 애정이 가요 ✅ 오늘의 문제 풀이 인증 📣 과제에 대한 답안 코드는 를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가) 📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁 지난 번에 불 끄는 걸 만들어서.. 이번에는 눈내리는 걸 만들어봤어요! 내일 비가 온다고 해서 비오는 걸 해볼까 했는데 눈이 더 이쁜 것 같아서 눈으로 해봤어요~! Day12.html 냐옹~ 시키기 불 켜줘 Day12.css /*Snow Keyframes*/ @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 10..

✅ 오늘의 문제 풀이 인증 📣 과제에 대한 답안 코드는 를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가) 📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁 불 좀 꺼줄래도 재미로 넣어봤습니다 Day11.html 냐옹~ 시키기 불 켜줘 Day11.css .layout { width: 100vw; height: 100vh; padding-top: 50px; } @font-face { font-family: "MaruBuri-Regular"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/MaruBuri-Regular.woff") format("woff"); font-weight: n..

✅ 오늘의 미션 사진 업로드 인터넷에 도는 유명인들의 어록의 단점은 진위를 알기 어렵다는 점이다. The trouble with quotes on the Internet is that you never know if they are genuine. - 에이브러햄 링컨 이게 생각나네요 유명인의 어록도 좋지만 자신의 경험과 깊은 고민으로부터 나오는 생각 한 줄이 정말 가치있다고 생각합니다. ✅ 오늘의 문제 풀이 인증 📣 과제에 대한 답안 코드는 를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가) 📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁 전화를 걸었을 때 배경이 바뀌고 통화시간이 표시되도록 했습니다! 통화가 끝난뒤에는 통화한 시간이 뜨고 7초 뒤에 다시 원래의 화..

✅ 오늘의 문제 풀이 인증 📣 과제에 대한 답안 코드는 를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가) 📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁 Day9.html MOVIE Inception Shutter Island Life Is Beautiful ★0.00 Day9.css .mainTitle{ text-align: center; margin-top: 20px; cursor: pointer; } .tab{ text-align: center; margin-top: 30px; } .tabBtn{ display: inline-block; width: 150px; height: 40px; border: 1px solid black; cursor: pointer..

✅ 오늘의 문제 풀이 인증 📣 과제에 대한 답안 코드는 를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가) 📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁 Day8.html &nbsp 입력 : 저장 전광판 버튼 Day8.js let count = 0; var prnStr = "" var board = document.getElementsByClassName('boardText'); function saveStr() { prnStr = document.getElementById('prnText').value; board[0].innerHTML = "&nbsp"; count = 0; } function showText() { if (count >= prnStr.leng..