티스토리

FE4902

검색하기

블로그 홈

FE4902

fe4902.tistory.com/m

블로그 이사했습니다! https://fe4902.github.io/

구독자: 1

방명록 방문하기

주요 글 목록

[Component] Tooltip See the Pen Tooltip by FE4902 (@fe4902) on CodePen. 공감수 0 댓글수 0 2024. 1. 25.
[Component] Slider See the Pen Slider by FE4902 (@fe4902) on CodePen. 공감수 0 댓글수 0 2024. 1. 21.
[Component] Drawer See the Pen Drawer by FE4902 (@fe4902) on CodePen. 공감수 0 댓글수 0 2024. 1. 18.
[Component] Counter See the Pen Counter by FE4902 (@fe4902) on CodePen. 공감수 0 댓글수 0 2024. 1. 12.
[Component] Dropdown See the Pen Dropdown by FE4902 (@fe4902) on CodePen. 공감수 0 댓글수 0 2024. 1. 9.
[Component] Tab See the Pen Tab by FE4902 (@fe4902) on CodePen. 공감수 0 댓글수 0 2024. 1. 8.
[Component] Accordion See the Pen Accordion by FE4902 (@fe4902) on CodePen. 공감수 0 댓글수 0 2024. 1. 1.
[React] Tailwind tailwind, postcss, autoprefixer 설치 npm install -D tailwindcss postcss autoprefixer tailwind config 파일 생성 npx tailwindcss init -p tailwind.config.js 파일 설정 tailwind 를 적용할 파일들의 path 설정 /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}" ], theme: { extend: {}, }, plugins: [], } global.css 파일 설정 @tailwind base;.. 공감수 1 댓글수 0 2023. 12. 18.
[CSS] WebView 작업 pinch to zoom & zoom-in action 설정 HTML head 안에 위 속성을 추가해서 줌을 이용한 축소, 확대 기능을 막아줍니다. user-scalable=0 : 확대 및 축소 작업 허용 여부를 설정합니다. 0 이 아닌 no 로 설정해도 동일한 효과를 불러옵니다. maximum-scale=1.0 : 페이지에서 허용되는 확대 정도를 1배로 설정합니다. minimum-scale=1.0 : 페이지에서 허용되는 축소 정도를 1배로 설정합니다. 터치 관련 설정 * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 버튼 클릭시 생기는 highlight 를 제거합니다. */ -webkit-touch-callout: none; /* 길게 터치할 때 표시되는 .. 공감수 1 댓글수 0 2023. 11. 29.
[ETC] og:image(오픈그래프 이미지) 캐시 삭제 페이스북 https://developers.facebook.com/tools/debug/ 공유 디버거 - Meta for Developers 공유 디버거를 사용하면 Facebook에 공유될 때 콘텐츠가 표시되는 모습을 미리 보거나 오픈 그래프 태그를 사용하여 문제를 디버깅할 수 있습니다. 이 도구를 사용하려면 Facebook에 로그인하세요. developers.facebook.com 1. 페이스북 공유 디버거 사이트로 이동 2. 공유 디버거 메뉴에서 캐시 삭제할 URL 입력 3. 디버거 버튼 클릭 4. 스크랩한 시간 항목에서 다시 스크랩 버튼 클릭 5. 링크 미리 보기를 통해 업데이트된 오픈그래프 이미지 및 페이지 정보 표시 확인 카카오톡 https://developers.kakao.com/tool/de.. 공감수 1 댓글수 0 2023. 8. 30.
[CSS] iOS filter 사용시 생기는 이슈 iOS에서 filter 속성이 적용된 경우 렉이 걸리는 이슈가 있습니다. 해당 이슈는 transform: translate3D(0, 0, 0) 를 사용하여 해결할 수 있습니다. div { filter: blur(4px); transform: translate3D(0, 0, 0); } 공감수 2 댓글수 0 2023. 8. 26.
[CSS] scroll-padding-top 적용시 생기는 이슈 html 에 scroll-padding-top 적용시 고정된 header 의 input 에서 텍스트 입력시 스크롤이 이동하는 이슈 발생 /* 수정 전 */ html { scroll-padding-top: 100px; } html 에는 scroll-margin-top 이 적용되지 않아서, :target, #anchor-point 에 scroll-margin-top 속성을 주는것으로 해결 /* 수정 후 */ :target, #anchor-point { scroll-margin-top: 100px; } 공감수 1 댓글수 0 2023. 8. 16.
[React] Next.js 13 설치 해당 명령어로 설치, 선택지는 취향껏 선택해주되 App Router 는 Yes를 선택해줍니다. npx create-next-app@latest 프로젝트명 라우팅 app 하위 경로에 입력한 폴더 명을 기준으로 라우팅 경로가 구성됩니다. 구성 요소로는 page 와 layout 두 가지가 있으며, 다음과 같이 정의할 수 있습니다. page - 경로에 접근했을 때, 사용자 화면에 보이는 페이지 layout - 페이지를 둘러싸고 있는 레이아웃 컴포넌트 next/Link 이제 하위 a 태그가 필요하지 않습니다. 기본적인 사용법은 아래 코드와 같습니다. import Link from 'next/link'; export default function Home() { return ( Home About Us Blo.. 공감수 1 댓글수 0 2023. 8. 9.
[JavaScript] localStorage API localStorage 데이터 저장하기 setItem 키-값 쌍을 저장합니다. localStorage.setItem(key, value) 문자열 형태로 저장되므로, 객체의 형태로 저장하려면 JSON.stringify() 를 통해 문자열로 변환해주어야 합니다. localStorage.setItem(key, JSON.stringify(value)) localStorage 데이터 받아오기 getItem 키에 해당하는 값을 받아옵니다. localStorage.getItem(key) 문자열 형태로 받아오므로, 객체의 형태로 받아오려면 JSON.parse() 를 통해 객체로 변환해주어야 합니다. JSON.parse(localStorage.getItem(key)) key 인덱스에 해당하는 키를 받아옵니다. local.. 공감수 1 댓글수 0 2023. 7. 31.
[CSS] :has() :has() 선택자는 해당 부모 선택자가 특정 자식 선택자를 가지고 있을 경우 적용하는 CSS의 if문입니다. 기존 CSS로는 구현할 수 없었던 것들을 구현할 수 있지만, 현재 파이어폭스에서 지원하고 있지 않아 사용 시 유의해서 사용해야합니다. 기본적인 사용법 /* div 요소가 h2를 가지고 있을 경우 */ div:has(h2) { border: 2px solid #fe4902; } /* div 요소가 h3 그리고 p를 가지고 있을 경우 (and 논리) */ div:has(h3, p) { background-color: #fe4902; } /* div 요소가 형제로 p를 가지고 있을 경우 */ div:has(+ p) { border: 2px solid #000; } See the Pen :has() -.. 공감수 1 댓글수 0 2023. 7. 12.
[React] Vite 절대 경로 설정 vite.config.ts base 를 입력하고, vite-tsconfig-paths 를 설치 후 plugins 에 추가해줍니다. // vite.config.ts import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import tsconfigPaths from "vite-tsconfig-paths"; // https://vitejs.dev/config/ export default defineConfig({ base: "./", plugins: [react(), tsconfigPaths()], }); tsconfig.json baseUrl 를 입력해줍니다. // tsconfig.json { "compilerOption.. 공감수 1 댓글수 0 2023. 7. 6.
[React] Emotion 설치 명령어로 다음과 같은 패키지를 설치해줍니다. $ yarn add @emotion/styled @emotion/react TypeScript 환경에서 사용하기 위해서는 tsconfig.json에 jsxImportSource를 추가해 주어야 합니다. // tsconfig.json { "compilerOptions": { //... "jsxImportSource": "@emotion/react" } } Global Styles 우선 Globalstyle.tsx 파일을 생성하고 아래와 같이 작성해줍니다. // GlobalStyle.tsx import { css, Global } from '@emotion/react'; const style = css` /* global로 사용할 css 작성 */ ` con.. 공감수 1 댓글수 0 2023. 6. 13.
[React] Create React App 이미지 경로 CRA 4.0 버전부터 권장하는 asset 폴더의 위치가 public 폴더에서 src 폴더로 이동하였습니다. src 폴더 (권장) 설정 // tsconfig.json { "compilerOptions": { "baseUrl": "src", ... }, "include": [ "src" ] } 해당 설정 후 서버가 실행되어있었다면, 수정 후 재실행해야합니다. img background-image div { background-image: url("images/logo.svg"); } public 폴더 img background-image 공감수 1 댓글수 0 2023. 5. 23.
[CSS] iOS border-radius + overflow: hidden 이슈 iOS에서 border-radius 와 overflow: hidden 속성이 같이 적용된 경우 제대로 동작하지 않는 이슈가 있습니다. 해당 이슈는 '쌓임 맥락(Stacking Context)' 과 관련된 이슈로 아래의 방법으로 해결할 수 있습니다. div { z-index: 0; /* OR */ isolation: isolate; /* OR */ -webkit-mask-image: -webkit-radial-gradient(white, black); ... } 해당 포스팅은 이 글을 참고하여 작성했습니다. 공감수 1 댓글수 0 2023. 5. 11.
[CSS] PC와 Mobile 구분 방법 기본(Primary) 포인팅 장치를 고려한 방법 기본(Primary) 입력 메커니즘을 기준으로 기능을 지원합니다. @media (hover: none) and (pointer: coarse) { /* touch 가능 (스마트폰, 터치스크린) */ } @media (hover: hover) and (pointer: fine) { /* hover 가능 (마우스, 터치패드) */ } 보조 장치까지 고려하는 방법 다수의 입력 메커니즘을 가졌을때, '적어도 하나' 에서 해당 값을 만족하는 경우 기능을 지원합니다. @media (any-hover: none) { /* 호버링할 수 없거나 포인팅 입력 메커니즘이 없습니다 */ } @media (any-hover: hover) { /* 하나 이상의 사용 가능한 입력 메.. 공감수 1 댓글수 0 2023. 5. 7.
[CSS] input 태그 자동완성 사용시 스타일이 변경되는 이슈 input 태그 자동완성 기능을 사용하면, 기존에 적용한 스타일이 변경됩니다. 이유는 Chrome 내부 스타일시트에는 아래의 에이전트 스타일이 적용되어 있기 때문입니다. background-color: rgb(232, 240, 254) !important; background-image: none !important; color: -internal-light-dark(black, white) !important; !important 로 선언이 되어있어 위에서 사용된 코드로는 수정이 불가능하고, 아래의 방법을 이용해서 수정할 수 있습니다. 자동완성 기능 해제 자동완성 기능이 필요하지않다면, 이 방법이 가장 간단하고 좋습니다. !important 사용 !important 를 사용하기 때문에, 다른 문제를 야.. 공감수 1 댓글수 0 2023. 5. 1.
[CSS] 이미지 흐림 현상 이미지를 원래의 사이즈 혹은 사이즈의 배수에 해당하지 않는 사이즈로 넣지 않을 경우 이미지가 흐려보이는 경우가 많은데, 아래 속성들을 적용함으로써 이미지가 흐리게 나오는 현상을 많이 해소할 수 있습니다. img { /* 이미지 렌더링 방식 변경 */ image-rendering: -webkit-optimize-contrast; /* z축을 0으로 초기화, 입체감 삭제 */ transform: translateZ(0); /* 뒷면 숨기기, 입체감 삭제 */ backface-visibility: hidden; } 해당 포스팅은 이 글을 참고하여 작성했습니다. 공감수 2 댓글수 0 2023. 4. 28.
[CSS] border-width가 변경될 때 레이아웃이 틀어지는 이슈 border-width 가 변경될 때 레이아웃이 틀어지는 이슈가 있는데, 이를 해결하기 위해서 box-shadow 를 사용해서 border-width 가 늘어나는 것 처럼 보이게 하는 방법이 있습니다. 다른 방법도 있지만, 아래와 같은 이슈가 있어 사용을 권장하지 않습니다. outline 은 Safari에서 border-radius 가 적용되지 않고, 애니메이션 성능이 좋지 못하다는 이슈가 있습니다. pseudo-element 는 input 과 img 에서 적용되지 않으며, 다른 방법들에 비해서 코드량이 많다는 이슈가 있습니다. See the Pen border-width Change Animation by FE4902 (@fe4902) on CodePen. 공감수 1 댓글수 0 2023. 4. 23.
[CSS] 미디어쿼리 새로운 문법 기존 미디어쿼리 범위 지정 방법은 min-width, max-width 를 사용했었는데, 주요 문제점으로는 직관성이 떨어지고 아래와 같이 '같거나 작다'로 통용되기 때문에 '무조건 작다'를 표현하려면 원하는 숫자보다 작은 수를 사용하는 수 밖에 없었습니다. /* width 공감수 1 댓글수 0 2023. 4. 17.
[CSS] 텍스트 세로 나열 writing-mode 를 이용해서 텍스트를 세로로 나열할 수 있습니다. div { /* 가로 방향, 기본 값 */ writing-mode: horizontal-tb; /* 세로 방향, 왼쪽에서 오른쪽으로 */ writing-mode: vertical-lr; /* 세로 방향, 오른쪽에서 왼쪽으로 */ writing-mode: vertical-rl; } .en { /* 영문일 경우, 해당 속성을 추가해주지 않으면 자동으로 각도가 조절됩니다. */ text-orientation: upright; } See the Pen writing-mode by FE4902 (@fe4902) on CodePen. 해당 포스팅은 이 글을 참고하여 작성했습니다. 공감수 1 댓글수 0 2023. 4. 10.
[CSS] :is()와 :where() :is() 와 :where() 는 요소를 그룹화하는 기능적인 의사 클래스 선택자입니다. 두 선택자의 사용법은 같지만 명시도에 차이가 있습니다. :where() 은 명시도가 없습니다. :where() 은 매개변수로 전달된 선택자 목록의 모든 명시도를 무시합니다. :is() 는 가장 구체적인 선택자의 명시도를 따라갑니다. :is(a, div, #id) 의 명시도는 ID의 명시도인 100점입니다. /* 선택자 처음 */ :where(h1, h2, h3, h4, h5, h6) > b { color: hotpink; } /* 선택자 중간 */ article :is(header, footer) > p { color: gray; } /* 선택자 끝 */ .dark-theme :where(button, a) { col.. 공감수 2 댓글수 0 2023. 4. 6.
[HTML] 접근성 좋은 모달 만들기 dialog 요소를 이용해서 접근성 좋은 대화 상자를 간단하게 만들 수 있습니다. 대화상자를 닫거나 값을 전송하기 위한 모든 키보드 이벤트와 모바일 OS의 네이티브 이벤트가 구현되어 있습니다. 네이티브 이벤트가 구현되어있다는 것은 iOS에서 VoiceOver로 두 손가락 문지르기를 통해 대화상자를 닫거나 하는 행위가 가능함을 말합니다. 모달로 열린 대화상자는 닫기 전까지는 대화상자 내부에서만 탐색이 가능합니다. 키보드 초점뿐만 아니라, 스크린리더의 가상커서 또한 마찬가지입니다. 모달로 열린 대화상자는 닫기버튼 외에 ESC 키를 눌러도 닫을 수 있습니다. 기본 속성 dialog 요소는 기본적으로 숨겨져 있으며, 표시여부는 open 속성에 따라 달라집니다. /* 브라우저들은 유저 에이전트 스타일에 다음의 C.. 공감수 1 댓글수 0 2023. 1. 18.
[HTML] 모바일 크롬 브라우저 Toolbar 색상 변경 아래 태그를 선언하고 content 에 원하는 색상을 넣어주는 것으로 크롬 기반 브라우저 툴바 색상을 변경할 수 있습니다. 해당 포스팅은 이 글을 참고하여 작성했습니다. 공감수 1 댓글수 0 2023. 1. 13.
[CSS] 블렌드 모드 mix-blend-mode 속성을 사용하여 포토샵의 블렌딩 모드와 비슷한 효과를 낼 수 있습니다. div { mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; mix-blend-mode: color-dodge; mix-blend-mode: color-burn; mix-blend-mode: hard-light; mix-blend-mode: soft-light; mix-blend-mode: difference; mix-blend-mode: exclusion; mix-blend-mode: hue; .. 공감수 1 댓글수 0 2023. 1. 4.
[CSS] 체크박스 색상 커스텀 input { accent-color: #fe4902; } See the Pen 체크박스 - 1 by FE4902 (@fe4902) on CodePen. 전체 커스텀 See the Pen 체크박스 - 2 by FE4902 (@fe4902) on CodePen. 토글 스위치 See the Pen 체크박스 - 3 by FE4902 (@fe4902) on CodePen. 해당 포스팅은 이 글을 참고하여 작성했습니다. 공감수 1 댓글수 0 2022. 12. 26.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.