본문 바로가기

FRONTEND/HTML & CSS4

220426 CSS Toggles css-toggles 패키지 사용방법 해당 포스팅은 큰 특징만 정리하였습니다. 기타 다른 사항은 oddbird.net/ Docs 를 참고하세요 Global Color Toggle light / dark 모드를 변경할 때 사용할 수 있습니다. html { toggle-root: mode [auto light dark]; } html:toggle (mode light) { ... } html:toggle (mode dark) { ... } .mode-btn { toggle-trigger: mode; } Binary self-toggle switches .todo li { toggle: todo self; list-style-type: '❌ '; } .todo li:toggle(todo) { l.. 2022. 4. 26.
210701 CSS 3D Hover 효과 만들기 https://letsbuildui.dev/articles/a-3d-hover-effect-using-css-transforms?utm_source=CSS-Weekly&utm_campaign=Issue-464&utm_medium=email 2021. 7. 1.
210512 css @property 속성 사용하기 (예시) See the Pen 210512_css property1 by Jaeeun Jung (@dmsdl950823) on CodePen. ** 지원하지 않는 브라우저가 있을 수 있으니 주의하기! 2021. 5. 12.
SASS CSS, SASS, SCSS는 서로 완벽호환되며, Ruby와 node에서 사용 할 수 있습니다. SCSS는 { 코드블럭 }을 사용하지만, SASS는 { 코드블럭 } 대신 tab을 사용하며, 세미콜론( ; )을 사용하지 않는다 - indented syntax사용 SASS 사용 1. Variable :: $ SASS의 변수는 이미 변수에 값이 할당되었을 경우 재할당될 수 없습니다. !default를 변수와 함께 할당할 경우 해당값이 변수에 기본으로 할당됩니다. $myval1: null; $myval1: "Sass was developed" !default; p:after { content: $myval1; // content: "Sass was developed" } 2. @use /* scss */ @us.. 2020. 5. 16.