개발 노트

https://inpa.tistory.com/entry/%F0%9F%8C%9F-css-where-is-has-not 🌟 CSS 선택자를 모던하게 :where() / :is() / :has() / :not():where() 가상 선택자 :where 의사 클래스 선택자는 css 코딩할때 선택자의 중복을 줄이는 데 도움이 되는 녀석이다. 예를들어 다음과 같이 여러 엘리먼트 안에 있는 anchor 태그에 hover 효과를 주기위inpa.tistory.com

보통 & 기호는 현재 선택한 요소를 나타냅니다. &::는 이러한 기능을 확장하여 부모 요소에 스타일을 적용하거나 조작할 수 있게 합니다. .button { background-color: blue; &:hover { background-color: red; } } 위의 코드에서 &:hover는 .button 요소에 대한 hover 상태를 나타냅니다. 이때 &는 .button을 나타냅니다. .button { background-color: blue; &.active { background-color: green; } } 위의 코드에서 .button.active는 .button의 자식으로 .active 클래스가 있는 경우에 적용됩니다. 이때 &는 .button을 나타내며, &.active는 .button.a..

간격은 기준을 잡고 기준에서 * 또는 + 해서 사용 ex) gap: 8px A에서는 gap B에서는 gap*2 C에서는 gap+4

SCSS에서 $변수명= 주고싶은 내용 을 작성하면 원하는 원하는 곳에서 속성: $변수명; 으로 사용가능 // new_main_body $backgroundColor: #f1f5fa; $gap: 20px; .new_content_container { background-color: $backgroundColor; padding: $gap; }

antd의 table css를 바꾸기 위해 기본 선택자를 사용하여 변경하면 원활히 변경되지 않는다. antd의 css 변경을 위해서 antd에서 각 태그에 지정한 class이름을 참조하여 변경해야한다. 예) table -> .ant-table

태그 인라인에서 style속성으로 hover을 지정해줄 수 없다. :hover는 의사 선택기 이다. 의사 선택기는 인라인 스타일에서 지정할 수 없다.