본문 바로가기

전체 글

 (215)
<img> img 테두리에 흰색 선이 생기는 이유와 해결방법 https://stackoverflow.com/questions/22096860/removing-default-border-around-an-image-chrome-browser Removing default border around an image - Chrome browser I can't believe I ran on this problem for the first time. I have searched lot of other similar question on SO regarding the same issue, but none of them worked for me. I have a img tag with a class stackoverflow.com img 태그를 쓰려면 src 속성을 필수로 사..
#3 NETFLIX SLIDER motion을 사용할 때 위와 같이 모든걸 render하지않고 key만 사용하면 한 줄에서 표현 가능 ! 해당 컴포넌트를 사용하게 되면 나타날때나 특정 요소가 사라지기 전에 지정한 애니메이션 효과 const rowVariants = { hidden: { x: window.innerWidth, }, visible: { x: 0, }, exit: { x: -window.innerWidth, }, }; window.outerWidth : 브라우저 전체의 너비 window.outerHeight : 브라우저 전체의 높이 window.innerWidth : 브라우저 화면의 너비 window.innerHeight : 브라우저 화면의 높이 outerWidth vs innerWidth 비교 이미지 https://www...
offset, 오프셋, 상대주소 컴퓨터 과학에서 배열이나 자료 구조 오브젝트 내의 오프셋(offset)은 일반적으로 동일 오브젝트 안에서 오브젝트 처음부터 주어진 요소나 지점까지의 변위차를 나타내는 정수형이다. 이를테면, 문자 A의 배열이 abcdef를 포함한다면 'c' 문자는 A 시작점에서 2의 오프셋을 지닌다고 할 수 있다. 어셈블리어와 같은 저급 프로그래밍 언어에서 오프셋은 상대 주소(relative address)로 부른다. 오프셋이란, 두 번째 주소를 만들기 위해 기준이 되는 주소에 더해진 값을 의미한다. 예를 들어, 만약 아래의 수식에서 C가 100번지의 주소를 가리키고 있다면, 그 수식의 결과는 107번지를 의미할 것이다. C + 7 여기서 이 수식내의 7이, 바로 오프셋이다. 오프셋을 이용하여 주소를 나타내는 것을 상대주..
#2 NETFLIX HOME SCREEN 우리가 받아올 결과 데이터를 확인하는 것은 매우 중요하다. 주소창에 미리 입력해서 확인해보기 api.ts const API_KEY = "api사이트에서 받아온 키 "; const BASE_PATH = " response.json() ); } export default getMovies; Home.tsx import { useQuery } from "react-query"; import { getMovies } from "../api"; function Home() { const { data, isLoading } = useQuery(["movies", "nowPlaying"], getMovies); console.log(data, isLoading); return ; } export default Hom..
elaborate 자세히 말[설명]하다, 상술하다 형용사 1 정교한, 정성[공]을 들인 elaborate designs 정교한 디자인 동사 1 (더) 자세히 말[설명]하다, 상술하다 He said he was resigning but did not elaborate on his reasons 그는 사직할 것이라는 말은 했지만 이유에 대해서는 자세한 말이 없었다. 2 (계획사상 등을) 정교하게 만들어 내다 In his plays he takes simple traditional tales and elaborates them. 그는 희곡 작품들에서 단순한 전통 이야기를 가져와 정교하게 발전시킨다.
#1 NETFLIX HEADER justify-content와 justify-items차이점 justify-content: Grid 아이템들의 너비를 모두 합한 값이 Grid 컨테이너의 너비보다 작을 때 Grid 아이템들을 통째로 정렬합니다. justify-items: 아이템들을 가로(row축) 방향으로 정렬합니다. 컨테이너에 적용합니다. place-items align-items와 justify-items를 같이 쓸 수 있는 단축 속성이에요. align-items, justify-items의 순서로 작성하고, 하나의 값만 쓰면 두 속성 모두에 적용됩니다. place-content align-content와 justify-content를 같이 쓸 수 있는 단축 속성이에요. align-content, justify-content의 순서로..
deprecated be deprecated (chiefly of a software feature) be usable but regarded as obsolete and best avoided, typically because it has been superseded. 종합해보면, 소프트웨어에서, 어떤 기능이 아직까지 사용되고는 있지만, 신기능이 나왔기 때문에 조만간 사라지게 될 상태를 말한다.
React animaiton #framer-motion stylecomponent 자동채우기 https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components import styled from "styled-components"; import { motion } from "framer-motion"; const Wrapper = styled(motion.div)` height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; `; const Box = styled(motion.div)` width: 200px; height: 200px; background-c..

티스토리툴바