CSS 이전의 엘리먼트 선택하기

CSS 에서 일반 형제 선택자 (General Sibling Selector ~)와 인접 형제 선택자 (Adjacent Sibling Selector +)를 사용하여, 특정 엘리먼트의 뒤 또는 바로 뒤에 있는 엘리먼트들을 선택할 수 있습니다. 그러나 앞에 위치한 엘리먼트를 선택할 수 있는 방법은 없었죠.
CSS Combinators 참고

그런데 CSS Selectors Level 4 에서 추가된 :has() 수도-클래스(pseudo-class)를 응용하면 앞의 엘리먼트들 또는 직전의 엘리먼트를 선택할 수 있습니다.

<div class="parent">
  <span class="child"></span>
  <span class="child"></span>
  <span class="child"></span>
  <span class="child target"></span>
  <span class="child"></span>
  <span class="child"></span>
  <span class="child"></span>
</div>
.parent{display:flex;flex-direction:row;gap:10px;justify-content:center;padding:20px;}
.child{padding:20px;border:1px solid orange;font-size:32px;}
.child:before{content:"child";}
 
.child.target{background-color:orange;}
.child.target:before{content:"target";}
 
.target ~ .child{background-color:lightgrey;}
.target ~ .child:before{content:"after";}
 
.target + .child{background-color:grey;}
.target + .child:before{text-transform:uppercase;color:white;}
 
.child:has(~ .target){background-color:greenyellow;}
.child:has(~ .target):before{content:"before";}
 
.child:has(+ .target){background:green;}
.child:has(+ .target):before{text-transform:uppercase;color:white;}


단, :has() 셀렉터를 일부 브라우저에서 아직 지원하지 않기 때문에, 사용에 주의가 필요합니다. 파이어폭스 Nightly에서 지원을 시작했기 때문에 조만간 파이어폭스도 지원할 것으로 보이네요.
Can I use :has?

소스트리에서 파일 인덱스 제외하기

소스트리에서 액션 > 터미널 실행하고 아래 명령어를 입력

  • 파일을 인덱스에서 제외
    git update-index –assume-unchanged (파일명)
    예 : git update-index –assume-unchanged myFolder/myFile.js
  • 제외된 파일을 인덱스에 다시 추가
    git update-index –no-assume-unchanged (파일명)
    예 : git update-index –no-assume-unchanged myFolder/myFile.js
  • 인덱스 제외된 파일들의 목록
    git ls-files -v | grep “^[[:lower:]]”

NVM 버전 변경 배치

프로젝트에서 일시적으로 Node 버전을 2가지 설치해서 번갈아 사용할 일이 있어서, 배치 파일로 현재 버전을 확인하고 버전을 변경할지 선택할 수 있도록 만들어 봤습니다. 텍스트 편집기에서 bat 파일로 저장한 다음, 이 파일을 관리자 권한으로 실행하면 됩니다.
@echo off
chcp 65001 &gt; nul
 
for /F "delims=" %%i IN ('nvm current') do set v1=%%i
set v2=%v1:~1%
 
cls
echo 현재 Node 버전: %v2%
echo.
if %v2%==16.19.0 (set v3=10.24.1) else (set v3=16.19.0)
set /p rp=Node 버전을 %v3%로 변경하겠습니까? (y/n)
 
if %rp%==y (
    cls
    nvm use %v3%
}

Nuxt + Swiper 페이지 이동 시 화면 깨짐

Nuxt + Swiper에서 페이지 이동 시에 첫번째 슬라이드의 내용이 잠시 노출 되었다가 화면이 전환되는 문제가 발생합니다. 페이지를 벗어날 때 Swiper.destroy()가 자동으로 실행되어 생기는 문제입니다.
직접 destroy() 함수를 호출할 때는 파라메터로 제어가 가능하지만, 자동으로 실행이 되어 이 방법을 사용할 수는 없네요.

그럴 때 아래와 같이 delete-instance-on-destroy, cleanup-styles-on-destroy 속성을 추가하면 문제를 해결할 수 있습니다.

<swiper :options="mySwipeOpt" :delete-instance-on-destroy="false" :cleanup-styles-on-destroy="false">
  <swiper-slide>...</swiper-slide>
</swiper>

The Web and beyond