개발 노트

보통 & 기호는 현재 선택한 요소를 나타냅니다. &::는 이러한 기능을 확장하여 부모 요소에 스타일을 적용하거나 조작할 수 있게 합니다. .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는 의사 선택기 이다. 의사 선택기는 인라인 스타일에서 지정할 수 없다.

display: flex에 클래스 값을 줘서 @media max-width 900px일 때 display:none을 주니 충돌이 일어나서 작동하지 않더라. 해결방법은 오늘 수정해서 올려야겠다. !important를 줘서 우선순위를 주어서 해결했다. 즉 id값을 주던지 해서 우선순위를 주면 해결이 되는 듯 하다.