잿꽃's posting Garden

SASS(SCSS)문법을 정리했다. SASS(SCSS)는 최종에는 표준 CSS로 동작해야 하며 전처리기로 작성 후 CSS로 컴파일 해야 한다. 1. 중첩 : 자식 요소를 부모 요소 내부에 작성이 가능 .box{ h2{ color: red; } } 2. & : 바로 상위의 요소를 선택할 수 있음 .box{ /* .box:hover */ &:hover{ color: red; } } 3. @at-root : 하위 요소는 범위 밖에서 사용할 수 없기 때문에 중첩에서 벗어 날 때 사용 .box{ @at-root h2{ color: red; } } /* CSS .box{ } h2{ color: red; } */ 4. 속성 중첩 : 중복되는 속성의 이름을 중첩 .box{ margin: { left : 5px; bot..

background 속성을 이용하여 세련된 hover효과를 만들어보자. 회사에서 웹사이트 동적 구현을 주로 한다지만 그래도 프론트엔드라면 간지나는 hover효과 하나는 만들 줄 알아야 한다는 생각이 들어서 만들어보았다. 유튜브의 '맛있는코딩'님을 참고했다. 간단하면서 세련된 효과를 만드는 영상이 많아서 보면서 만들었다. 맛있는 코딩 yummy coding - YouTube 맛있는 코딩 yummy coding HTML5, css, Javascript와 React.js기반의 다양하고 재미있는 프로젝트들을 연구하는 개발자입니다. 많은 분들께 영감을 주기 위해 노력하겠습니다. www.youtube.com 코드의 핵심은 background에 대한 부분이다. background-color가 아닌 background..