인파

You Can Become A

늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !

공부한 내용을 정리합니다
Style Sheet/CSS

🌟 CSS 선택자를 모던하게 :where() / :is() / :has() / :not()

:where() 가상 선택자 :where 의사 클래스 선택자는 css 코딩할때 선택자의 중복을 줄이는 데 도움이 되는 녀석이다. 예를들어 다음과 같이 여러 엘리먼트 안에 있는 anchor 태그에 hover 효과를 주기위해선 각 선택자들을 콤마를 이어 나열하여 표현하여야 했었다. element 1 element 2 element 3 nav > ul a:hover, footer > ol a:hover, aside > p a:hover { color: purple; text-decoration: underline wavy deeppink; } 그런데 코드를 보면 a:hover 부분이 각 선택자마다 중복되는 것을 확인 할 수 있을 것이다. 거기다 적용해야할 요소가 많으면 많을 수록 선택자의 양도 늘어나 나중에 ..

category_image
인파_
2023.03.09
(0)
Snippet/CSS 스니펫

🚀 속성 선택자 not equal 구현하기 [attr!=value]

Attribute Selector not equal 구현 CSS 속성(Attribute) 선택자 문법에는 equal 연산자와 함께 다양한 기호 문법을 지원한다. [attr=value] : attr 속성이 정확히 value인 요소를 선택 [attr~=value] : attr 속성이 정확히 value인 요소를 선택 [attr|=value] : attr 속성을 가지고 있으며, 그 특성값이 정확히 value이거나 value로 시작하면서 -(U+002D) 문자가 곧바로 뒤에 따라 붙으면 이 요소를 선택 [attr^=value] : attr 속성을 가지고 있으며, 접두사로 value가 값에 포함되어 있으면 이 요소를 선택 [attr$=value] : attr 속성을 가지고 있으며, 접미사로 value가 값에 포함되..

category_image
인파_
2023.02.25
(0)