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..
자바스크립트가 제공하는 데이터타입 원시타입 객체(참조)타입 변경 불가능한 값 변경 가능한 값 원시값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조값이 저장 값에 의한 전달 (원시값이 복사되어 전달) 참조에 의한 전달 (참조값이 복사되어 전달) 변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 분인 이름 값 : 변수에 저장된 데이터로서 표현식이 평가되어 생성된 결과 식별자 : 어떤 값을 구별해서 식별해낼 수 있는 고유한 이름 1. 원시값 변경 불가능한 값 한번 생성된 원시 값은 읽기 전용 값으로서 변경할 수 없다. => 변수는 언제든지 재할당을 통해 변수 값을 변경 가능하다. 변수의..
/* -----------------------------------------------------------------------------*/ // - 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: ..
용어정리..
이름설명변수하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름값의 위치를 가리키는 상징적인 이름할당(대입, 저장)변수에 값을 저장함참조변수에 저장된 값을 읽음식별자변수 이름어떤 값을 구별해서 식별할 수있는 고유한 이름메모리 주소에 붙인 이름키워드자바스크립트 코드를 해석하고 실행하는 자바스크립트 엔진이 수행할 동작을 규정한 일종의 명령어ex) var 키워드를 만나면 자바스크립트 엔진은 뒤에 오는 변수 이름으로 새로운 변수를 선언실행 컨텍스트자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역소스코드를 실행하는데 필요한 환경을 제공하고 코드..
// 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..