로딩 스피너 뒤에서도 드래그 이벤트 활성화하기애플리케이션에서 로딩 스피너를 전체 화면에 표시할 때, 사용자가 뒤쪽 요소들과 상호작용 가능해야 하는 경우가 있다. 이 글에서는 로딩 중에도 드래그 이벤트 등을 가능하게 하는 방법을 다룬다.먼저 CSS 스피너 애니메이션을 위한 스타일을 추가해야 한다.@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}1. 문제 상황일반적인 로딩 컴포넌트는 다음과 같이 구현된다.function Loading() { return ( );}이 코드의 문제점은 position: fixed로 전체 화면을 덮고 있어서 마우스 이벤트가 뒤쪽 ..

CSS !important 없이 스타일 적용하기: 특이성을 활용한 해결법1. 문제 상황1-1. !important 의존성 문제Vue.js 프로젝트에서 검색 입력 필드의 스타일을 적용할 때, !important를 사용하지 않으면 스타일이 제대로 적용되지 않는 문제가 발생했다..search-input { border-radius: 0.5rem !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; height: 50px;}!important를 제거하면 스타일이 적용되지 않음CSS 특이성 문제로 인한 스타일 충돌 발생Bootstrap과 같은 CSS 프레임워크와의 우선순위 경쟁1-2. HTML ..

CSS를 활용한 요소의 확장 기준점 제어하기1. 개요웹 개발에서 동적으로 크기가 변하는 요소를 구현할 때, 확장의 기준점을 제어하는 것은 중요한 기술이다. 이 글에서는 CSS를 활용하여 요소가 왼쪽, 중앙, 오른쪽을 기준으로 확장되는 세 가지 방식을 구현하는 방법을 설명한다.2. 핵심 개념2.1 확장 기준점의 종류왼쪽 기준 확장: 요소가 왼쪽을 기준으로 오른쪽으로 확장중앙 기준 확장: 요소가 중앙을 기준으로 좌우로 동일하게 확장오른쪽 기준 확장: 요소가 오른쪽을 기준으로 왼쪽으로 확장2.2 사용된 주요 CSS 속성position: 요소의 위치 지정 방식 결정display: 요소의 표시 방식 설정transform: 요소의 변형 적용justify-content: Flexbox 내 요소의 정렬 방식 지정3. ..

1. 커스텀-오버레이-마커의 앵커와 위경도 좌표 불일치 서버로부터 오는 데이터에 따라 컬러, 애니메이션 등 스타일이 변경 적용되는 마커를 만들어야 하는 상황이었다. 카카오 지도 API에서는 HTML, CSS, JavaScript를 이용해 커스텀하게 마커를 만들 수 있는데 이것을 커스텀 오버레이라고 부르고 있다. 이 글에서는 커스텀한 마커를 만들고 마커 아래에 있는 뾰족한 부분, 즉 앵커에 위경도 좌표가 정확하게 위치하도록 하는 방법에 대해 다룬다. 2. 커스텀-오버레이-마커 만들기 1) 카카오 지도 마커와 div 요소 지도에 찍기 [그림 1]과 같이 카카오 지도의 특정 위경도에 카카오 지도 마커와 커스텀-오버레이-마커로 만들 div 요소를 찍었다. 카카오 지도 마커의 경우 앵커 부분이 지정한 위경도에 위..

1. 홈 화면에 반응형 레이아웃이 필요한데... 진행 중인 Next.js 프로젝트의 홈 화면에는 대표 이미지, 대표 문구, 그리고 가입 및 로그인 버튼이 있다. PC화면과 모바일 화면에 모두 대응해야 하는 상황이다. module css를 사용하고 있어서 미디어쿼리를 직접 작성하려다가 일단 구글링을 해보기로 했다. 그런데 이렇게 알잘딱깔센 한 포스팅이 있누! 2. 모듈 CSS에 간단하게 적용하고 싶어 검색하다가 어썸한 발견! 아래의 참고 자료는 flex를 이용한 반응형 레이아웃에 대해 잘 정리해 놓았다. 중간 중간 삽입된 움직이는 삽화로 해당 코드의 결과를 한눈에 확인할 수 있어 친절하다! 아래 코드는 미디어 쿼리를 사용하지 않는 반응형 레이아웃 구현 방식인데 깔끔하다! flex-basis 속성을 유의해서..

1. 노트북 화면에서는 꽉 찬 화면인데 스마트폰에서는 왜 이러지?! 노트북에 기본으로 달려있는 카메라로 테스트해 가며 웹 AR을 이용한 프로젝트를 개발하고 있다. 프레임워크는 Next.js를 사용했다. mind-ar 라이브러리를 이용해서 웹 AR을 구현하였고 프로젝트를 실행해 노트북에서 꽉 찬 카메라 화면을 확인했다. https-단말기 카메라 제어는 http에서는 불가하다-가 기본으로 적용되는 Vercel에 배포해 스마트폰에서 테스트해 봤는데 기대했던 꽉 찬 화면으로 카메라가 작동하지 않았다! ㅠ_ㅠ 2. object-fit 적용 video 선택자에 object-fit을 cover로 적용하면 카메라로 촬영 중인 화면이 꽉 차게 보이게 된다. 이미지의 왜곡 없이 화면에 꽉 차게 보이기 때문에 가로가 세로보..

1. 중첩된 CSS가 감지되었다고? (8:3) Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin *before* Tailwind in your configuration. See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting 진행 중인 Next.js 프로젝트의 layout에 스타일을 지정하려고 했고, 이때 다른 프로젝트의 SCSS 코드 일부를 복붙 했더니 발생한 경고문이다. 이유는 복붙 한 스타일 코드에 중첩 CSS가 포함되어 있어서였다. 이 포스팅에서는 중첩 CSS에 대해-핵심..

input 자동완성 입력 시 배경색과 글자색이 비슷해서 구분이 잘 가지 않았다. 그래서 아래의 CSS 코드를 추가하여 자동완성 폰트 색상을 변경하였다. input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; -webkit-transition: background-color 9999s ease-out; -webkit-box-shadow: 0 0 0 1000px #161010 inset !important; -webkit-text-fill-color: #fff !imp..