건강관리
- 산책
- 스트레칭 V
- 감사일기 V
코딩기록
Javascript 코플릿 H - 1+(5)
function c(obj, property, value) { obj[property] = value }function a(obj, property) { return obj[property] }function k(num, obj) { for(let el in obj){ if(typeof obj[el] === 'number' && obj[el] > num){ delete obj[el] } }function b(obj, property) { obj[property] = true // TODO: 여기에 코드를 작성합니다. } //return이 없으면 객체에 결과값이 적용되지만 함수의 결과값은 undefined //return이 있어야 함수는 결과값을 낸다.function d(obj1, property, obj2) { obj1[property] = obj2 }function e(obj, property) { delete obj[property] }function f(obj) { for(let key in obj){ if(typeof obj[key] === 'number'){ delete obj[key]; } // 키값은 변수일 뿐이어서 객체의 속성값을 삭제하고 싶다면 속성값을 삭제해야한다 객체의 속성이 본체이다!! 기억!! } return obj; } //반복문의 반복은 어떤 장치가 없다면 그 자체만으로 보이지는 않는다. //그래서 코드의 작동을 모두 기록하는 console.log()를 사용하면 안보이는 동작들을 확인할 수 있다 //ex) for(let key in obj){ obj.[key] } ---> 마지막 키값의 속성만 보여준다 // 3 //ex) for(let key in obj){ console.log(obj.[key]) } ---> 모든 속성이 찍힌다 // 123 // obj[key] 객체의 키값의 속성 // key 객체의 키값 // 배열 객체 함수(메서드)는 참조타입 // 참조타입은 특정 자료의 주소를 내부로 가져와 직접적으로 접근하여 변경이 가능 // 원시자료형은 직접적 변경불가능 그저 그 위에 변경사항을 덮어쓸 뿐function M(obj){ let result = '' for(let el in obj){ result = result + el + ': ' + obj[el] + '\n' } return result // TODO: 여기에 코드를 작성합니다. } // Question //왜 '\n'는 console.log()에서만 적용되는 것일까?function g(obj) { for(let el in obj){ if(Array.isArray(obj[el])){ delete obj[el] } } }function h(obj) { for(let el in obj){ if(typeof obj[el] === 'number' && obj[el] % 2 !== 0){ delete obj[el] } } }function I(person) { for(let el in person){ if(person[el] >= 18){ return true }else{ return false } } }function j(obj) { let fullName = ''; obj.fullName = obj.firstName + ' ' + obj.lastName; return obj; // TODO: 여기에 코드를 작성합니다. } //obj[key] 브라켓은 변수 생성하여 이중으로 키값에 접근하기 때문에 키값을 키 할당을 할 수없다 //하지만 obj.fullName 닷은 해당 키네임을 입력해 키에 바로접근하기 때문에 키 할당이 가능하다.function L(obj) { let count = 0; for(let key in obj){ count = count + 1; } return count; } function L(obj) { return Object.keys(obj).length; } //새로운 메서드 발견function N(obj, key, index) { let arrProperty = obj[key]; if(Array.isArray(arrProperty)){ return arrProperty[index] } }function select(arr, obj) { let result = {} for(let el of arr){ for(let key in obj){ if(el === key){ result[el] = obj[key] } } } return result }
HTML/CSS 따라하기
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"></meta> <title>CodePen - Slide Sign In/Sign Up form</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="./style.css"> </head> <body> <!--partial:index.partial.html--> <div class="container right-panel-active"> <!-- Sign Up --> <div class="container__form container--signup"> <form action="#" class="form" id="form1"> <h2 class="form__title">Sign Up</h2> <input type="text" placeholder="User" class="input" /> <input type="email" placeholder="Email" class="input" /> <input type="password" placeholder="Password" class="input" /> <button class="btn">Sign Up</button> </form> </div> <!-- Sign In --> <div class="container__form container--signin"> <form action="#" class="form" id="form2"> <h2 class="form__title">Sign In</h2> <input type="email" placeholder="Email" class="input" /> <input type="password" placeholder="Password" class="input" /> <a href="#" class="link">Forgot your password?</a> <button class="btn">Sign In</button> </form> </div> <!-- Overlay --> <div class="container__overlay"> <div class="Overlay"> <div class="overlay__panel overlay--left"> <button class="btn" id="signIn">Sign In</button> </div> <div class="overlay__panel overlay--right"> <button class="btn" id="signUp">Sign Up</button> </div> </div> </div> </div> <!-- partial --> <script src="./script.js"></script> </body> </html>
:root{ /* COLORS */ --white: #e9e9e9; --gray: #333; --blue: #0367a6; --lightblue: #008997; /* RADII */ --button-radius: 0.7rem; /* SIZES */ --max-width: 758px; --max-height: 420px; font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; } body{ align-items: center; background-color: var(--white); background: url("https://res.cloudinary.com/dci1eujqw/image/upload/v1616769558/Codepen/waldemar-brandt-aThdSdgx0YM-unsplash_cnq4sb.jpg"); background-attachment: fixed; background-position: center; display: grid; height: 100vh; place-items: center; } .container{ background-color: var(--white); border-radius: var(--button-radius); box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25), 0 0.7rem 0.7rem rgba(0, 0, 0, 0.22); height: var(--max-height); max-width: var(--max-width); width: 100%; } .container__form{ }
배워서 남 주자