hyowonii의 블로그

아래 파란 dashed로 둘러싸인 이미지들에 mouse hover 시 이미지가 확대되는 기능을 구현하였다. 그런데 💥문제💥가 발생했다. 먼저 저장된 고양이 이미지가 이후에 저장된 이미지에 가려지는 것 구글링을 하다가 적절한 검색 키워드를 입력하지 못했는지 해결책을 찾지 못하고, 결국 강의 QnA 게시판에 질문을 했다. 강사님의 답변으로 😆해결책😆을 찾을 수 있었다. 내가 앞에서 생각한 것과 같이 먼저 저장된 이미지가 이후에 저장된 이미지에 가려진다기보다는, 이미지가 추가 될 때마다 고양이1 고양이2 이런 식으로 쌓이는데 고양이2가 고양이1 이후에 추가되어서 2가 그 위로 덮어써보이는 것이라고 하셨다. 이 것을 이해하기 위해서는 z-index에 대한 이해가 필요하다. z-index에 대한 자세한 설명은 h..

transform: scale(); .favcat:hover { transform:scale(2.0); transition: transform .35s; } transform: scale(2.0); => 2.0배 확대 transition: transform .35s; => 이미지 확대 시간 딜레이 (부드럽게 커짐)

deleteFavorite(img)}>X .favcat { position: relative; } .btn { position: absolute; right: 0px; } 상위 li 태그에 position: relative; 버튼에 position: absolute; 결과 화면

js의 Array 클래스는 리스트 형태의 고수준 객체인 배열을 생성할 때 사용하는 전역 객체이다. 객체로써 순회와 변형 작업을 수행하는 메소드를 갖는다. 길이 변화 O 데이터 불연속 저장 O -> 밀집성 보장 X 요소 인덱스로 문자열을 사용X, 정수만 허용 >> 자주 사용되는 몇 가지 연산 살펴보기 - 순환하며 처리 => forEach() array.forEach(function (item, index, array) { console.log(item, index) }) - 끝에 항목 추가 => push() let newLength = array.push('value') - 끝에 항목 제거 => pop() - 앞에 항목 제거 => shift() - 앞에 항목 추가 => unshift() - 인덱스 위치에서..

Date() ex) 토이플젝 진행 중에 작성한 코드 {new Date(timestamp).toLocaleString('ko-KR', { year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: true })}; 자세한 내용은 아래 링크 참고 [참고] https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date

HTML : 아래 첨자 요소 1) 각주 표기 2) 수학 변수의 숫자 표기 3) 화학식 원소의 수 표기 C8H10N4O2 결과) [참고] https://developer.mozilla.org/ko/docs/Web/HTML/Element/sub

React 컴포넌트를 별도의 라이브러리 없이 CSS로만 스타일하는 기본적인 방법 1. Inline Style 가장 간단하고 쉬운 방법. HTML 엘리먼트의 style 속성을 이용한다. 하지만, 일반 html 웹페이지에서 인라인 스타일을 적용할 때와는 달리 React에서는 style 속성값에 일반 문자열이 아닌 자바스크립트 객체가 할당되어야 하고, CSS 속성명이 카멜 케이스로 작성되어야 한다. ex) import React form "react"; const btnStyle = { color: "white", padding: ".375rem .75rem", fontSize: "1rem", lineHeight: 1.5, }; function Button() { return Inline; } btnStyle..

em / rem em : 상위 요소 기준 ex) Hello HTML html 요소의 크기를 10px이라고 하면 body 요소의 크기는 10px의 1.5배인 15px이고, .a 요소의 크기는 body 요소의 2.0배인 30px이 된다. rem: 최상위 요소, 즉 html 요소의 크기의 몇 배인지 ex) Hello HTML 2.0rem으로 바꾸면 .a 요소의 폰트 사이즈는 가장 상위 태그인 html 요소의 폰트사이즈인 10px의 2.0배가 되어 20px이 된다. [참고] https://www.codingfactory.net/10748

(cd cra) 1. npm run build 2. npm install gh-pages 3. package.json 파일에서 hompage:""링크 추가, scripts에 deploy:"gh-pages -d build" 추가 4. npm run deploy

구조 분해(Destructuring)는 ES6 문법의 등장과 함께 나타난 방식이다. 자바 스크립트에서의 '구조'란 var arr = [1, 2, 3, 4]; // 배열 구조 var obj = { a: 10, b: 20, c: 30 }; // 객체 구조 이와 같이 '구조'라는 단어는 왼쪽에 변수 이름을 넣고 오른쪽에 데이터 타입을 선언하는 형식을 의미하는 것이다. 그렇다면 '구조 분해'란? '구조 분해'란, 이러한 변수 선언 형식이 자유로워지는 것을 의미한다. var { a, b, c} = obj; console.log(a); // 10 console.log(b); // 20 console.log(c); // 30 1. 배열에서의 구조 분해 할당 var score = [100, 90, 80]; var [a..