HTML&CSS3 Mixins Sass Mixins는 스타일 시트 전체에서 재사용할 CSS 선언 그룹을 정의하는 기능입니다. @mixin(선언하기)과 @include(포함하기) 두 가지만 기억하면 됩니다. @mixin 위와 같이 @mixin 지시어를 사용해 선언할 수 있습니다. 이는 선택자 포함이 가능하고 & 키워드로 참조도 가능합니다. Sass에서는 @mixin 대신 =를 사용합니다. @include 다음과 같이 @include를 통해 스타일을 입힐 수 있습니다. Sass에서는 +를 사용합니다. Arguments 다음과 같이 인수도 설정해 다양한 결과를 낼 수 있으며 기본값을 설정해 따로 인수를 전달하지 않을 경우 적용할 수 있습니다. Variable Arguments 매개변수 뒤에 ...을 붙여 가변 인수를 받을 수 있습니다. 이.. 2023. 5. 26. SCSS(Sass) 선택자(Selector)를 만들 때 매 번 불필요한 선택자를 적어야 하고 동적인 기능이 적어 자동화하기 어렵고 모든 것을 수동으로 변경해야 하고 결국 중복되는 코드가 많아 유지보수에 좋지 않은 기존 CSS의 단점을 극복하기 위해 등장했습니다. Sass(SCSS)는 CSS의 단점을 보완하고 효율을 올리기 위한 CSS 전처리기 언어입니다. 전처리기 언어 문법으로 작성하고 CSS로 컴파일해서 웹으로 동작시키는 자바스크립트와 타입스크립트의 관계와 비슷합니다. vs CSS 선택자의 중첩(Nesting)을 통해 반복되는 부모요소 사용을 줄일 수 있습니다. 변수(Variable)를 사용해 CSS 속성과 값의 일원화한 관리가 가능해집니다. 조건문, 반복문을 사용해서 동적인 CSS 관리가 가능합니다. SCSS vs Sa.. 2023. 5. 16. css 상대 단위 vw, vh 각자 Viewport width, Viewport Height의 약자이며 브라우저 화면의 크기의 비율을 의미합니다. 높이와 너비 각자 꽉 차는 화면의 크기는 100을 의미합니다. % 상위 엘리멘트에 대한 퍼센트를 나타내는 단위입니다. 높이는 최상단에서 기준이 없이 퍼센트로만 나타낼 시 적용이 안 돼 기준을 잡고 시작해야 합니다. em, rem em은 현재 엘리멘트의 폰트 사이즈를 결정하는 단위이며 그 기준이 상위 엘리먼트가 기준이 됩니다. 이 의미는 상위 엘리멘트의 폰트 사이즈가 현재 엘리멘트의 1em이 되는 것입니다. rem은 이 기준이 최상단(root)이 되는 단위입니다. 16px 16px(1em) => 32px(2em) 32px(1em) => 64px(2em) 16px 16px(1em).. 2023. 5. 11. 이전 1 다음
