Front-End/HTML,CSS2

• style lint selector-max-type: 0은 어떻게 작동할까? 0. 개요업무 코드리뷰 중 동료분이 클릭 가능 여부에 따라 다른 스타일이 필요하여 다음과 같은 코드를 제시해주셨는데, style lint selector-max-type: 0에 걸려 에러가 발생하게 되었습니다.selector-max-type 룰은 태그 선택자를 사용함으로 인해서 여러 컴포넌트가 중첩되어 있을 때 하위 컴포넌트의 스타일에 영향을 주는 걸 차단하기 위해서 적용해 두었습니다&__content { background-color: #{$opacity-gray-16}; &:where(button) { &:hover { background-color: #{$opacity-gray-24}; } &:active { background-color: #{$opacit.. Front-End/HTML,CSS 2024. 10. 27.

• input,label을 감싸는 div click event가 두 번 실행되는 이슈 이 글로 얻을 수 있는 정보1. Event와 CustomEvent ( + dispatchEvent )2. 합성 이벤트의 개념 3. 이벤트 발생 방식 및 순서4. input,label에서 click event가 두 번 실행되는 이슈의 해결 방법 0. 개요업무(Next.js 14, storybook 사용 중) 코드 리뷰 중 다음 예시와 같이 input과 label을 연결 후, onClick 이벤트를 넣은 div로 감싸는 마크업을 구성하게 되면 label 영역을 눌렀을 때 click event가 두 번실행되는 이슈가 발생하여 해당 이슈에 대해 알아보려고 합니다.See the Pen Untitled by 윤창현 (@ibgcsnij-the-selector) on CodePen.     1. 문제 접근 방법1-1.. Front-End/HTML,CSS 2024. 10. 21.