728x90 300x250 SMALL Front-end314 Sass variable(Scss 변수) Sass에서 변수를 사용하기 위해서는 $로 시작해야 하며 변수 값으로 올 수 있는 것은 문자, 숫자(px, em포함), 컬러(#1c6eff)가 있다. 1. SCSS 변수 사용예시 SCSS $font-stack: Helvetica, sans-serif; /* font-stack 변수선언 */ $primary-color: #333; /* primary-color 변수선언 */ body { font: 100% $font-stack; color: $primary-color; } CSS body { font: 100% Helvetica, sans-serif; color: #333; } 위와 같이 sass 변수를 사용하면 일괄적으로 관리하고 변경 가능하기 때문에 색상이 수정 되더라도 변수값만 수정 하면 되고 같은 .. 2021. 12. 27. Chain Reaction 연계반응 부모 엘리먼트에 마우스를 hover 했을때 자식인 버튼이 변경되는 코드 See the Pen Chain Reaction by kim oya (@ttuttu) on CodePen. 2021. 12. 25. 가상 클래스 순서 링크 관련의 네 가지 클래스를 한꺼번에 정의할 경우 :link부터 정의해서 :visited, :hover, :active 순서대로 정의한다. 이 순서가 바뀌면 제대로 적용되지 않는다. 2021. 12. 24. background-clip background-origin 차이 background-clip과 background-origin은 언뜻 비슷해 보입니다. 둘 다 border-box, padding-box, content-box 이 세가지 옵션을 가지고 있고 경우에 따라서는 결과값이 같게 나타나기 때문에 차이가 없어 보일 수 있습니다. 하지만 background-clip과 background-origin은 어면히 다른 기준을 가지고 백그라운드를 설정합니다. background-origin 배경 위치 시작점을 결정 background-clip 배경이미지를 잘라낼 위치 결정 border-box background-clip border-box는 background-origin의 기본값이 padding-box 이기 때문에 background-clip예제에서 패딩 값부터 시작하기.. 2021. 12. 23. 이전 1 ··· 42 43 44 45 46 47 48 ··· 79 다음 728x90 반응형 LIST