코린이의 개발일기

overflow 속성이란? - 주어진 공간이 모자라 넘치는 컨텐츠를 어떻게 보여줄지 지정 CSS IS AWESOME overflow: hidden => 지정된 요소 내에서 긴 텍스트는 잘라버림 div.overflow { border: 2px solid black; width: 180px; font-size: 50px; overflow: hidden; } 결과화면: overflow-x: scroll => 넘치는 경우 세로방향에 스크롤을 만듬 overflow-y: scroll => 넘치는 경우 가로방향에 스크롤을 만듬 overflow: auto => 가로가 넘치면 가로방향으로 스크롤 세로가 넘치면 세로방향에 스크롤 만듬 폰트 꾸미기 - Hex color = RED/GREEN/BLUE의 값을 각각 16진수로 ..

css란? Cascading Style Sheet의 약자로 계단식 또는 폭포식으로 작동하는 스타일 설정 html파일에서 css파일을 나타내는 방법은?

✅ 오늘의 문제 : 챗봇 완성 시키기 ✅ 오늘의 문제 풀이 인증 댕댕🐾 시키기 *{ 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; ..

✅ 오늘의 문제 : 오늘 배운 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..

✅ 오늘의 문제 : 사용자의 입력을 받아 특정 텍스트가 들어왔을 때, 자신이 출력하거나 바꾸고 싶은 요소들을 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..

✅ 오늘의 문제 : 전화걸기 버튼을 누르면 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..

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

✅ 오늘의 문제 : 전광판 만들기 ❗자신이 선택한 문구를 클릭할 때 마다 글자가 하나씩 늘어나도록 하시면 됩니다. 👉 예시 ✅ 오늘의 문제 풀이 인증 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..

✅ 오늘의 문제 : 반복문과 조건문을 이용하여 간단한 스톱워치 만들기 👉 예시 ✅ 오늘의 문제 풀이 인증 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: ..

✅ 오늘의 문제 : 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..