Hangun's World – Blog

[카테고리:] Tech

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

그런데 CSS Selectors Level 4 에서 추가된 :has() 수도-클래스(pseudo-class)를 응용하면 앞의 엘리먼트들 또는 직전의 엘리먼트를 선택할 수 있습니다.
```
  
  
  
  
  
  
  
```
```
.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?
2023/10/23
소스트리에서 파일 인덱스 제외하기
소스트리에서 액션 > 터미널 실행하고 아래 명령어를 입력
- 파일을 인덱스에서 제외
  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:]]”
2023/09/19
NVM 버전 변경 배치
프로젝트에서 일시적으로 Node 버전을 2가지 설치해서 번갈아 사용할 일이 있어서, 배치 파일로 현재 버전을 확인하고 버전을 변경할지 선택할 수 있도록 만들어 봤습니다.
텍스트 편집기에서 bat 파일로 저장한 다음, 이 파일을 관리자 권한으로 실행하면 됩니다.
```
@echo off
chcp 65001 > 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%
}
```
2023/03/26
크롬 개발자 도구에서 vue 탭이 안보일 때

가끔 크롬 개발자 도구에서 vue 탭이 사라져서, 브라우저 재시작 등 이런저런 방법도 소용이 없었는데, 단축키 Alt + R 을 실행하여 개발자 도구를 새로고침 해주니 다시 보이네요.

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

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