가오리의 코딩일기

✏️ z-index → 쌓임 맥락(Stacking context) 자식 엘리먼트들의 z-index 속성 값은 부모 안에서만 의미를 가진다 부모 엘리먼트의 쌓임 맥락을 구성하는 하나의 단위 부모가 가지고 있는 z-index 값이라는 기본 속성이 낮으면 자식의 z-index값이 높아도 부모의 쌓임 순서에 따른다 → position 속성을 이용하면 요소를 겹치게 놓을 수 있다 → 이 요소들의 수직 위치를 z-index 속성으로 정한다 → 숫자가 클수록 위로, 작을수로 아래로, 기본값_0 ✏️ outline → border가 테두리라고 한다면 outline은 border의 바깥 외곽선을 말한다 → outline의 선 너비는 레이아웃에 관여하지 않고 눈에만 선이 보인다 ✏️ display: inline-flex ..

index.html integration_instructions gaori description contacts Information Character Card Cards Halloween Sign Up Gradient Transition Transform SpaceSuit VidTube Information To My Favorite Thing Page 2022.07.10 Character Card Page 2022.07.17 Flip Coin Page 2022.07.24 Gradient Page 2022.07.24 Halloween Page 2022.08.02 Make A VidTube Page 2022.08.14 Movie Information Page 2022.07.10 SpaceSuit Page..

https://www.youtube.com/watch?v=4ykAepVkG5Y index.html Home Explore Subscription Library History Playlist Messages Show More SUBSCRIBED Jack Nicholson Simon Baker Tom Hardy Megan Ryan cameron Diaz Best channel to learn coding that help you to be a web developer Easy Tutorials 15k views • 2days Best channel to learn coding that help you to be a web developer Easy Tutorials 15k views • 2days Best ..

index.html The Best Colors Tomato #FF6347 Teal ##008080 Burlywood #DE8887 Thistle #D78FD7 style.css body { margin: 0; height: calc(100vh - 20px); background-color: lightgray; } h1 { text-align: center; margin-bottom: 50px; margin-top: 20px; } .wrapper { width: 450px; margin: 0 auto; } .container { display: flex; justify-content: space-around; align-items: center; } .color { width: 200px; positio..

index.html Jack-O'-Lantern A jack-o-lantern is a carved pumpkin, turnip,or other root vegetable lantern associated with Halloween. Its name comes from the phenomenon of a strange light flickering over peat bogs, call will-o'-the-wisp or jack-o'-lantern. Information 1234@gmail.com 000-3234-2344 Seoul, Korea Skills Photoshop Web Front-End Education HAPPY HALLOWEEN style.css * { margin: 0; padding:..

index.html style.css body { height: 100vh; display: flex; justify-content: center; align-items: center; } div { transition: background-color 1s ease-in-out; border: 3px solid black; } img { width: 300px; height: 300px; transition: 3s ease-in-out; } img:hover { transform: rotateX(360deg) scale(1.5); } 게임으로 flex 연습(13단계까지) Gradation index.html style.css body { margin: 0; padding: 0; background-col..

index.html index.html Financial App 25 Apr 2030 3+ click star Graphic Design 18 May 2030 2+ click grade Artifact Model 17 Now 2030 3+ click star_half Operating System 20 Apr 2030 2+ click star Business card 15 Oct 2030 3+ click grade Centered Design 20 Apr 2030 2+ click star_half style.css body { margin: 0; padding: 0; height: 100vh; width: 100vw; background: lightblue; display: flex; justify-co..

Object.keys, values, entries Object.keys, values, entries ko.javascript.info 🧩 문제 Q1. 프로퍼티 값 더하기 급여 정보가 저장되어있는 객체 salaries가 있습니다. Object.values와 for..of 반복문을 사용해 모든 급여의 합을 반환하는 함수 sumSalaries(salaries)를 만들어보세요. salaries가 빈 객체라면, 0이 반환되어야 합니다. function sumSalaries(salaries){ let sum = 0; for (let salary of Object.values(salaries)) { sum += salary; } return sum; } let salaries = { "John": 100, "Pe..

메서드와 this 메서드와 this ko.javascript.info ✏️ 메서드 단축 구문 user = { sayHi: function() { alert("Hello"); } }; user = { sayHi() { alert("Hello"); } }; 🧩 문제 Q1. 객체 리터럴에서 ‘this’ 사용하기 함수 makeUser는 객체를 반환합니다. 이 객체의 ref에 접근하면 어떤 결과가 발생하고, 그 이유는 뭘까요? function makeUser() { return { name: "John", ref: this }; }; let user = makeUser(); alert( user.ref.name ); → 에러 발생 밑의 코드처럼 수정하면 된다 function makeUser() { return {..

객체 객체 ko.javascript.info ✏️ 상수 객체는 수정할 수 있다 → 4번째 줄에서 오류를 일으키는 것처럼 보일 수 있지만 그렇지 않다 → const는 user의 값을 고정하지 그 내용을 고정하지 않는다 const nuser = { name: "John" }; user.name = "Pete"; alert(user.name); ✏️ 계산된 프로퍼티(computed property) → 객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우 → [1+4] 혹은 [’Hello’ + ‘World’]와 같은 식 자체가 들어가는 것도 가능하다 let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple"); let bag = { [fruit]: 5 }; al..