CSS

[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 요소에 동..

[scss] BEM 방식으로 깊은 중첩 하기

🙄BEM 규칙을 따르고 있다는 가정 아래와 같이 component 와 component--reversed 가 같은 위치에 있고 자식 요소의 클래스가 같다. 🤗부모의 클래스에 따라서 자식요소의 css를 다르게 주고 싶다면? reversed에서 component를 &을 이용해 가져가고 자식 요소에도 component를 같이 가져가고 싶을 때가 있다. 하지만 그렇게 &만을 이용하게 되면 아래의 코드처럼 상위 이름을 그대로 가져가기 때문에 원하던 결과를 얻지 못한다. /* scss */ .component { /* blah blah */ &--reversed { /* blah blah */ &__child-element { /* blah blah */ } } } /* css */ .component {/* bl..

[CSS] 모서리 자르기

HTML 모서리 한개 BUTTON BUTTON BUTTON BUTTON 모서리 두개 BUTTON BUTTON 모서리 여러개 BUTTON CSS body { background: #ddd; } .button { width: 150px; line-height: 40px; text-align: center; margin-bottom: 20px; } .top-left { background: linear-gradient(135deg, transparent 10px, #58a 0); } .top-right { background: linear-gradient(-135deg, transparent 10px, #58a 0); } .bottom-right { background: linear-gradient(-45de..

[SCSS] SCSS 기본 문법 정리

CSS작성(생성)을 위한 작고 가벼운 언어이고, SASS 와 SCSS가 있다. SASS : SCSS와 작성하는데 있어서 구조적 차이가 있고 작성이 번거롭고 복잡할 수 있다. SCSS : 기존에 알던 CSS와 유사하게 작성할 수 있기 때문에 친근하게 느껴져 배우기가 쉽다. 이 둘은 같은 계열의 언어이지만 요즘은 SCSS를 많이 쓴다. SCSS => SASS 컴파일러 => CSS변환 Sass 컴파일러 방식 - VS Code + Live Sass Compiler - Compiler1 Ruby Gem 이용 - Compiler2 Node.js NPM 이용 VScode를 깔고 간단한 셋팅 뒤 sass관련 확장 프로그램을 다운받는다. sass, sass compiler, sass lint - scss 파일을 생성하고..