HTML 로또 번호 추첨 추첨 다시 CSS @charset "utf-8"; @font-face { font-family: 'CookieRun-Regular'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/CookieRun-Regular.woff') format('woff'); font-weight: normal; font-style: normal; } * { font-family: 'CookieRun-Regular'; box-sizing: border-box; } html { font-size: 32px; } body { margin: 0; } .container { width: 500px; height: 100vh; ma..
/* -----------------------------------------------------------------------------*/ // - console.log()로 결과를 확인하면서 진행해주세요. // 1. 본인의 드림카 정보를 담은 객체를 생성해야 합니다. // 2. 정보는 brand, model, year 3가지로 작성합니다. // 3. 객체리터럴 방식, 생성자 함수 방식을 모두 사용하여 생성해야 합니다. // 4. 대괄호 연산자와 마침표 연산자를 사용하여 객체에 접근할 수 있어야 합니다. // 5. myDreamCar 메소드는 콘솔창에 `제 드림카는 year년식 brand 회사의 model입니다.` 형식으로 출력되도록 작성해주세요. // 6. 스타일은 마음껏 수정해도 좋습니다. ..
HTML 햄버거 주문서 + 추가 - 제거 CSS * { box-sizing: border-box; } body { text-align: center; margin: 0; font-family: system-ui, sans-serif; color: black; background-color: white; } nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 0.5rem; gap: 0.5rem; border-bottom: solid 1px #aaa; background-color: #eee; } nav a { display: inline-block; min-width: 9rem; padding..
HTML stop CSS * { box-sizing: border-box; } #stop { border: none; font-size: 25px; padding: 15px; border-radius: 20px; background-color: rgb(231, 29, 29); color: white; margin-top: 15px; cursor: pointer; } #now_time { font-size: 30px; } #sharp { font-size: 20px; } JS /* -----------------------------------------------------------------------------*/ // // 1. 실시간으로 시간이 업데이트되는 시계를 생성해야 합니다. // 2. 1..
HTML 아이디 주민번호 - 이름 비밀번호 비밀번호 확인 이메일 @ daum.net naver.com google.com 주소 성별 여성 남성 개인정보 동의 동의합니다. 가입 리셋 CSS /* CSS를 자유롭게 작성하세요. */ .form-wrap { display: flex; width: 500px; background: #eee; border: 1px solid #333; border-radius: 30px; padding: 30px; } .form-box { display: flex; padding: 10px; } .form-box .form-title { width: 100px; } .form-box .form-cont select, .form-box .form-cont input[type='te..
HTML 게시 CSS body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; max-width: 600px; margin: auto; padding: 20px; background-color: #f0f2f5; color: #444; } #input_container { display: flex; } #tweetInput { width: 100%; padding: 10px 15px; border: 2px solid #1da1f2; border-radius: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); outline: none; font-size: 16px; } #postTweet { padding: ..
// TODO: 조건에 맞는 div 요소를 생성하는 함수 createDiv를 작성하고, createDiv를 str의 길이만큼 호출하세요. let str = '0123456'; const body = document.querySelector('body'); function createDiv(content, backgroundColor) { const div = document.createElement('div'); // 조건1. div 요소의 textContent와 배경색은 외부에서 입력받은 content, backgroundColor가 되어야 합니다. div.textContent = content; // 외부에서 입력받은 content div.style.backgroundColor = background..
0. 클릭이벤트 만들기 1. 요소를 변수에 할당하기 // 0. 버튼을 클릭했을 때 실행되는 이벤트 함수입니다. document.getElementById('add-btn').addEventListener('click', function () { // 1. index.html에 있는 input 요소에 입력된 값(value)과 button 요소를 변수에 할당합니다. let todo_input = document.getElementById('todo-input'); let add_btn = document.getElementById('add-btn'); } }); // 1) addEventListener(type, listener) // 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정한다. /..