탐구하는 취르미

CSS를 다루다 보면 위치를 설정할 때 자주 사용하는 속성이 top, right, bottom, left입니다. 하지만 이 속성들을 각각 지정하다 보면 코드가 길어지고 유지보수가 어렵게 느껴질 때가 있죠. 이런 문제를 해결하기 위해 등장한 속성이 바로 inset 속성입니다. 이 포스팅에서는 inset 속성의 기본 사용법과 실전 활용 팁을 알려드리겠습니다.inset 속성이란?inset은 CSS에서 top, right, bottom, left를 한 번에 지정할 수 있는 단축 속성(Shorthand)입니다. 간결한 코드를 작성할 수 있도록 도와주며, 특히 레이아웃 작업 시 깔끔하고 직관적인 스타일링을 제공합니다. element { inset: ;} position 값별 inset 적용 가능 여부✅ re..

Node.js 버전을 관리하기 위해 많이 사용하는 nvm(Node Version Manager)을 설치하려 했으나, 터미널에서 nvm 명령어를 찾을 수 없다는 메시지가 출력되는 경우가 있습니다. 이번 포스팅에서는 nvm 설치 방법과 문제 해결 방법에 대해서 알아봅시다.nvm 이란?nvm(Node Version Manager)**는 Node.js의 버전을 관리하기 위한 도구입니다.프로젝트별로 다른 Node.js 버전이 필요할 때, 손쉽게 설치, 변경, 삭제할 수 있도록 도와줍니다. nvm 주요 명령어설치nvm install  사용nvm use  설치된 버전 확인nvm ls Node.js 버전 확인node -v 오류 1 : Node.js 버전이 맞지 않을 때 경고 메시지 확인yarn 또는 npm을 실행할..

overflow: hidden 대신 CSS의 touch-action: none 속성을 활용해 스크롤 방지를 구현하는 방법에 대해서 알아보겠습니다. 웹에서 팝업을 띄울 때, 배경 스크롤을 막는 것은 흔한 UX 요구사항입니다. 이를 위해 보통 overflow: hidden을 사용하지만, 이 방식은 스크롤바를 숨기고 강제로 스크롤을 차단하는 방식이라 사용자 경험에 영향을 줄 수 있습니다. 특히, 모바일 환경에서는 더 섬세한 조작이 필요합니다.AOS와 iOS 환경에서의 팝업 스크롤 결함1. AOS 환경에서의 문제팝업이 열릴 때 overflow: hidden으로 인해 dim 뒤로 보이는 배경이 scrollTop: 0 위치로 초기화되는 이슈가 발생했습니다. 2. iOS에서의 문제overflow: hidden이 적..

웹 사이트에서 이미지 갤러리나 캐러셀처럼 슬라이더가 필요하다면, Slick 플러그인으로 간단하게 구현할 수 있습니다.  slick - the last carousel you'll ever needslick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!kenwheeler.github.io더 자세한 내용은 Slick 공식 문서를 참조해 주세요. Slick 플러그인 설치 및 사용법1. Slick은 jQuery 기반 플러그인입니다. 아래 코드를 사용해 jQuery와 Slick을 설치하세요. 2. 슬라이더를 표시할 HTML 구조를 작성..

가끔 코드 리뷰나 협업 과정에서 특정 PR의 커밋 해시를 로컬 환경에서 확인해야 할 때가 있습니다. 이 글에서는 원격 저장소에서 해당 커밋을 로컬로 가져와, 그 해시를 기반으로 브랜치를 생성하는 방법을 설명하겠습니다.git fetch로 원격 저장소 업데이트먼저, 원격 저장소에서 최신 정보를 로컬로 가져와야 합니다. 원격 브랜치에서 최신 커밋들이 로컬에 반영되지 않은 경우가 많기 때문이죠.git fetch origin  이 명령어는 원격 저장소(origin)에 있는 모든 브랜치와 태그 정보를 로컬에 업데이트합니다. 이렇게 하면 나중에 필요한 특정 커밋 해시도 로컬에서 접근할 수 있게 됩니다. 해당 커밋 해시가 있는지 확인하고 직접 체크아웃먼저 해당 해시가 로컬에 존재하는지 확인하려면, git log 명..

크롬 웹 개발자 도구(Chrome DevTools)를 활용하는 법에 대해서 알아봅시다크롬 웹 개발자 도구 (Chrome DevTools)크롬 웹 개발자 도구는 구글 크롬 브라우저에 내장된 강력한 도구로, 웹 페이지를 실시간으로 검사하고 디버깅하며 성능을 분석할 수 있게 해 줍니다. 웹퍼블리셔와 개발자 모두에게 유용하며, 웹 페이지의 HTML, CSS, 자바스크립트 등 다양한 요소를 실시간으로 수정해 보고 테스트할 수 있습니다.개발자 도구 열기가장 빠르게 개발자 도구를 여는 방법은 키보드 단축키를 사용하는 것입니다. macOS 기준으로 단축키 option + cmd + i를 눌러 개발자 도구를 열 수 있습니다. ( windows 기준은 ctrl + shift + i )모바일 모드 전환모바일 디바이스 모드는..