728x90 반응형 CSS127 [SCSS]작성법 11 - 상위선택자 & [CSS/SASS] - [SCSS]작성법 10 - 주석 중첩 안에서 상위(부모)선택자를 참조할 때 & 기호를 사용합니다. .button{ color:#000; &:hover{ color:red; } } 위와 같이 작성하며 컴파일 결과는 아래와 같습니다. .button{ color:#000; } .button:hover{ color:red; } 또한 응용하여 아래와 같이 작성가능합니다. .font{ &-12{font-size:12px;} &-15{font-size:15px;} &-18{font-size:18px;} &-20{font-size:20px;} } .font-12{font-size:12px;} .font-15{font-size:15px;} .font-18{font-size:18px;} .font-.. 2019. 6. 17. [SCSS]작성법 10 - 주석 [CSS/SASS] - [SCSS]작성법 9 - 다른 선택자에 적용한 속성 그대로가져와 적용하기 (@ extend) 주석의 방법은 두가지로 //컴파일 되지 않는 한줄 주석 과 /* 컴파일이 되는 여러줄의 주석이 있습니다. */ [CSS/SASS] - [SCSS]작성법 11 - 상위선택자 & 2019. 6. 17. [CSS]변경되는 css를 미리 브라우저에 알려 성능을 개선하는 will-change 속성값 { will-change: auto; /* 기본값 - 별다른 동작안함 */ will-change: scroll-position; /* 스크롤할때 엘리먼트가 변경될것을 알려줌 미리 최적화함 */ will-change: contents; /* 엘리먼트 컨텐츠가 변경됨을 미리 알려줌 - 캐시를 하지 않음 */ /* 변경하고 싶은 속성을 적어준다 ,로 여러개를 사용할 수 있다. */ will-change: transform; will-change: top, left; } 너무 많이 사용하면 의미가 없다. 변화 후 will-change: auto로 변경해줘야 더이상 최적화를 하지 않는다. will-change 없이 작동이 잘 된다면 사용할 필요가 없다 오히려 더 느려질 수 있음 will-change는 미리.. 2019. 6. 13. [CSS]a태그 link hover animation 14가지의 다양한 link animation 효과를 구현해 보았다. 메뉴나 네비게이션등에 사용할수 있을 것 같다.. See the Pen css- link hover animation by gahyun (@gahyun) on CodePen. 2019. 6. 13. 이전 1 ··· 6 7 8 9 10 11 12 ··· 32 다음 728x90 반응형