Web

[CSS] :is(), :where() 알아보기

CSS의 ':is()' 와 ':where()' 의사 클래스는 CSS Selectors Level 4의 새로운 함수로,복잡한 선택자를 간단하게 하고 코드의 가독성을 높이는 데 유용하다.이 두 의사 클래스는 유사하지만, 선택자 특이성 처리 방식에서 중요한 차이가 있다.     1. :is()목적: :is() 의사 클래스는 괄호 안의 선택자 중 하나라도 일치하는 요소를 선택한다.특이성: 괄호 안에서 가장 높은 특이성을 가진 선택자의 특이성을 상속받는다. 즉, 선택자 중 하나라도 높은 특이성을 가지면, 전체 :is()의 특이성도 높아진다. /* 여러 선택자를 하나오 그룹화 */:is(h1, h2, h3) { color: red; font-weight: bold;} 위 예제에서는 h1, h2, h3 요소에 동..

[자바스크립트] scrollIntoView()

'scrollIntoview()' 메서드는 웹페이지에서 특정 요소가 화면에 보이도록 자동으로 스크롤하는 메서드이다.예를 들어, 버튼을 클릭했을 때 페이지의 특정 부분으로 스크롤하고 싶을 때 사용한다.       예제) Scroll to Element Hello, I'm the target element!   #코드 설명HTML'button' : 클릭하면 스크롤을 실행하는 버튼'div#targetElement' : 스크롤해서 화면에 보이게 하고 싶은 요소CSS'body'의 'height'를 2000px로 설정하여 페이지를 길게 만든다.'#targetElement'의 'margin-top'을 1500px로 설정하여 페이지 아래쪽에 위치시킨다JavaScript'scrollToElement' 함수는 '..

[gulp] include + sass + watch 초간단 셋팅하기

node -v v18.12.0 gulp -v CLI version: 2.3.0 Local version: 4.0.2 1. 터미널을 연다. 2. 경로는 작업할 폴더를 향하게 한다. 3. html, scss 환경이다. 🤗 gulp 환경 셋팅 //package.json 생성 배포할 때 반드시 필요한 파일이다. //별다른 값이 없으면 계속 엔터친다. npm init //gulp를 전역적으로 설치한다. 최초 1회만 하면 된다. npm i gulp -g //해당 폴더에서 gulp를 로컬 설치한다. npm i gulp --save-dev //또는 npm i gulp -D //gulp가 잘 설치되었는지 버전 확인한다. gulp -v 🤗 필요한 패키지 설치 //인클루드 설치 npm i gulp-file-include -..

[자바스크립트] filter

자바스크립트의 'filter()' 함수는 배열을 순회하면서 주어진 조건에 따라 요소를 걸러내는 메서드이다. 이 함수를 사용하면 배열을 필터링하여 새로운 배열을 만들 수 있다. Array. 인스턴스의 filter() 메서드는 주어진 배열의 일부에 대한 얕은 복사본을 생성하고, 주어진 배열에서 제공된 함수에 의해 구현된 테스트를 통과한 요소로만 필터링 합니다. - mdn 👉 얕은 복사 생성? 인스턴스의 filter() 메서드는 배열에서 특정한 조건을 만족하는 요소들을 선택하여 그 요소들로 이루어진 새로운 배열을 반환한다. 여기서 얕은 복사(shallow copy)한 개념이 사용된다. 얕은 복사는 원본 배열의 요소들을 복사하여 새로운 배열을 생성하지만, 그 요소들은 참조만을 복사한다는 뜻이다. 이 말은, 만약..

[자바스크립트] offsetX, screenX, clientX, pageX, layerX 각각의 차이

자바스크립트 MouseEvent 실행 시 (e)의 console을 찍어보면 다양한 속성들이 있는데, 이 중 X들을 정리해 보겠다. offsetX 이벤트가 발생한 요소(Element)를 기준으로 마우스 포인터의 수평(x) 위치를 나타낸다. 이 속성은 주로 이벤트가 발생한 요소 내부에서 상대적인 위치를 파악하는데 사용된다. 요소의 좌측 가장자리를 기준으로 하며, 오른쪽으로 갈수록 양수의 값을 가지고 왼쪽으로 갈수록 음수의 값을 가진다. 요소의 경계를 넘어가면 음수나 요소의 크기보다 큰 양수 값을 가질 수 있다. 스크롤이 발생하면, 요소의 위치가 변경되기 때문에 스크롤에 영향을 받는다. 즉, 스크롤이 발생하면 요소 내부에서의 상대적인 위치가 변하게 된다. 스크롤 up : offsetX 값 증가 / 스크롤 do..

[nunjucks] config.js의 변수를 macro에서 렌더링 되게하기

nunjucksRender가 Gulp의 스트림에서 각 파일을 처리할 때마다 data 옵션으로 전달된 객체를 템플릿의 컨텍스트로 사용하게 된다. 즉, 각 템플릿에서는 data 옵션에 정의된 변수를 직접 참조할 수 있어야 한다. 그러나 여기서 문제가 발생하는 부분은 Nunjucks의 macro가 별도의 scope를 가지고 있어서 macro 밖에서 정의된 변수를 직접 참조하지 못하는 것이다. 이를 해결하기 위해 변수를 macro에 인자로 전달해야 한다. //config.js const config = { local_name: "이름", }; module.exports = config; //gulpfile.js const config = require("./config.js"); function nunjucks..

[css] 변수를 음수로 지정하고 싶을 때

CSS 변수를 사용하여 음수 값을 불러오는 방법은 변수에 -100px를 저장하는 대신 100px를 저장한 다음, 해당 변수를 사용할 때 음수 부호(-)를 붙여서 사용하는 것이다. 예를 들어, --headerHeight 변수를 사용하여 음수 값을 적용하려면 다음과 같이 작성할 수 있다. :root { --headerHeight: 100px; } .selector { height: calc(var(--headerHeight) * -1); } 위의 예제에서는 calc() 함수를 사용하여 변수에 -1을 곱한 값을 적용한다. 이렇게 하면 --headerHeight 변수에 저장된 값인 100px에 -1을 곱한 결과로 -100px가 적용된다. 결과적으로 .selector 요소의 높이(height)에 -100px가 적..

[리액트] Hooks 알아보기

useState 상태(state) 관리를 위한 Hook. 함수형 컴포넌트에서 상태 변수와 해당 상태를 업데이트하는 함수를 제공한다. 컴포넌트의 상태를 변경하고, 변경된 상태를 화면에 렌더링할 수 있다. import React, { useState } from "react"; const Counter = () => { //count: 변수, setCount: 상태 업데이트 하는 함수 //=> 배열 비구조화 할당을 통해 각각의 값을 추출해서 사용 const [count, setCount] = useState(0); const increment = () => { setCount(counst + 1); }; return ( Count: {count} Increment ); }; useEffect 생명주기(lif..

[CSS] 뒤가 투명한 png 이미지 하얗게 변환

뒤가 투명한 png 이미지 하얀색으로 변환 -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); 뒤가 투명한 png 이미지 검정색으로 변환 -webkit-filter: grayscale(100%) brightness(0); filter: grayscale(100%) brightness(0);

[자바스크립트] textContent와 innerText 차이

Node.textContent와 HTMLElement.innerText의 이름이 유사하지만, 중요한 차이가 있다. textContent는 와 요소를 포함한 모든 요소의 콘텐츠를 가져온다. innerText는 "사람이 읽을 수 있는" 요소만 처리한다. textContent는 노드의 모든 요소를 반환한다. innerText는 스타일링을 고려하며, "숨겨진" 요소의 텍스트는 반환하지 않는다. iinnerText의 CSS 고려로 인해, innerText 값을 읽으면 최신 계산값을 반영하기 위해 리플로우가 발생한다. (리플로우 계산은 비싸므로 가능하면 피해야 한다.) IE 기준, innerText를 수정하면 요소의 모든 자식 노드를 제거하고, 모든 자손 텍스트 노드를 영구히 파괴한다. 이로 인해, 해당 텍스트 노..