포기할 수 없는 편리함을 제공하는 서비스를 만든다
개발
-
HTML
[CSS] transform 속성을 layer와 stacking context 관점에서 알아보기
[CSS] Stacking Context 쌓임 맥락 쉽게 이해하기Stacking Context 이란?HTML에서 가상의 z 축을 기준으로 쌓이는 순서를 형성하는 영역을 의미해요.stacking context를 그대로 번역하면 "쌓임 맥락"이라고 나오는데, 굉장히 낯선 용어처럼 느껴져요.하지devshelly.com 지난 글에서 stacking context가 어떤 의미인지 알아봤어요!특정 element를 다른 element보다 위에 그리고 싶을 때,z-index를 사용하여 화면에 그려지는 순서를 조절할 수 있습니다. 그런데 css 속성 중 `transform`을 사용할 때에도 다른 element보다 위에 그려지게 됩니다.그 이유는 stacking context가 생성되었기 때문이에요.얼핏 보아서는 화면에 ..
-
HTML
[CSS] Stacking Context 쌓임 맥락 쉽게 이해하기
Stacking Context 이란?HTML에서 가상의 z 축을 기준으로 쌓이는 순서를 형성하는 영역을 의미해요.stacking context를 그대로 번역하면 "쌓임 맥락"이라고 나오는데, 굉장히 낯선 용어처럼 느껴져요.하지만 css의 속성 중 z-index를 사용해 보신 적 있다면, 이미 stacking context를 활용하고 계신 것입니다! DIV #1 z-index: 4; DIV #2 z-index: 3; DIV #3 z-index: 2; DIV #4 z-index: 1; 위 이미지에서 보이듯, z-index가 클수록 상위에 노출됩니다.DIV#1, DIV#2, DIV#3, DIV#4는 하나의 영역(context)에서 z-index를 기준으로 어떤 순서로 쌓일지(stacking)..
-
Next
[Next14] 검색 기능 만들기 with Supabase
기능 정의검색창에 검색어를 입력하면 `title` 또는 `location`에 검색어가 포함된 데이터를 노출시킨다.뒤로가기를 눌렀을 때, 이전 검색 결과로 이동한다.컴포넌트 구현검색창 코드"뒤로가기를 눌렀을 때, 이전 검색 결과로 이동한다."라는 기능을 구현하기 위해서,검색어를 입력했을 때 히스토리 스택이 추가되어야 합니다.따라서 검색어를 검색하면 url 쿼리를 추가하여 히스토리 스택을 쌓아봅시다. import { Input } from "@nextui-org/input";import { ChangeEvent, useState } from "react";interface SearchInputProps { onSubmit: (value: string) => void;}const SearchInput = ..
