CATEGORIES
CSS의 전처리기 css인 SCSS에서 자주 사용되는 @mixin 그리고 @inclue에 대하여 알아보려고 합니다.@mixin@include이 둘은 sass, scss에서 자주 볼 수 있는데요 어떻게 그리고 언제 사용하는지 알아봅니다.# @mixin @include 알아보기먼저 두 가지 @mixin와 @include는 항상 함께 사용되며 @mixin을 사용하면 그룹단위의 스타일을 변수처럼 적용할 수 있습니다. 즉 여러개의 스타일을 설정해두었다가 한번에 적용하는 것이 가능합니다. 이때 설정에는 @mixin을 그리고 사용할 때는 @include를 사용하면 됩니다. 아래 코드를 봐주세요.@mixin box-default { padding: 20px 30px; margin-bottom: 20px;}위에서는 @m
Last Modified : 2020-10-16 11:36:40
아래는 SCSS를 사용하여 스타일을 선언할 때 어떻게 변수를 선언하고 변수 선언과 관련된 다양한 방법들을 알아보려고 합니다.# scss의 변수 선언하기scss에서도 역시 변수를 선언하고 사용할 수 있습니다. 그렇다면 변수 선언을 왜 할까요?동일한 컴포넌트 UI에 동일한 스타일을 유지할 수 있다.버튼이나 아이콘에 적용된 스타일을 모든 페이지에서 한 번에 바꾸기는 쉽지 않습니다. 이 경우 변수를 사용하여 지정해두면 간단하게 변수의 값만 변경해 모든 페이지의 스타일을 한 번에 변경해 적용할 수 있습니다. 그리고 모든 변수들을 variable.scss 등의 파일을 만들어 한 번에 모아서 관리하기도 합니다. 이런 이유로 유지보수, 고도화에 유리합니다. ! scss 변수 선언의 방법변수 선언시 아래와 같이 $ 키워드
Last Modified : 2020-05-27 17:16:17스타일을 사용하기 위한 방법으로 SCSS에서 if 조건문을 사용하는 방법에 대하여 알아보려고 합니다. 아래는 간단한 문법입니다.@if 조건 { 적용할 스타일}SCSS는 if 조건문을 사용하여 스타일을 적용하는 것이 가능합니다. 이 경우 일반적으로 @mixin, @include와 함께 많이 사용되는데 @include를 사용하여 전달된 파라미터 값에 if문을 사용하여 다른 스타일을 적용하기 위함입니다. 그럼 바로 알아보겠습니다.# @include, @mixin에 조건문 사용하는 방법if, else이해를 돕기 위해서 간단한 예제를 코드를 하나 만들어보겠습니다. 아래의 @mixin를 사용한 setFontSize()는 'small' 또는 'large' 두 가지 값을 인자로 전달 받을 수 있습니다. 그리고 전달 받은
Last Modified : 2021-04-14 21:04:04css 전처리기 중 하나인 scss에서 리스트 타입의 선언 방법을 알아보고 리스트 타입의 데이터를 반복문에 사용하는 방법도 함께 알아봅니다.# scss list 타입 알아보기전처리기 css인 scss에는 여러 타입이 존재하며 배열과 같은 리스트 타입 그리고 객체와 같은 맵 타입이 존재합니다.list - 리스트 타입(배열과 비슷)map - 맵 타입(객체와 비슷)이 두 가지 타입은 하나가 아닌 여러 개의 값을 가질 수 있다는 공통점이 있습니다. 아래에서 리스트 타입(lists)에 대하여 자세히 알아보겠습니다.! scss 리스트 타입(lists) 알아보기리스트 타입은 구분자로, 콤마를 사용하여 각각의 값을 선언합니다. 아래는 변수 site에 여러 값을 선언하였습니다.$site: 'web', 'is', 'fre
Last Modified : 2020-07-21 19:35:26CSS의 전처리기 언어인 SCSS를 사용하는 방법 중 다른 스타일을 가져오는 방법에 대하여 알아봅니다. 바로 @extend를 사용한 스타일 확장 방법입니다.# SCSS의 스타일 확장 알아보기, @extend전처리기 덕분에 CSS 역시 자바스크립트의 객체처럼 다른 스타일을 상속 받는 것처럼 사용하는 것이 가능합니다. 상속과는 다를 수 있으나 스타일을 확장하여 사용할 수 있어 모든 스타일을 정의하지 않아도 다른 스타일을 가져와 사용할 수 있죠. SCSS의 @extend가 바로 그것입니다.@extend <가져올 스타일>문법은 위와 같이 간단하며 가져올 스타일을 명시하면 됩니다.이 방법은 매우 유용합니다. 특히 컴포넌트 등의 인터페이스를 사용할 때도 간단히 확장해 사용할 수 있고 아니면 아이콘 등의 비슷한 그룹끼리
Last Modified : 2020-04-30 21:36:45css의 전처리기 중 하나인 scss를 사용하여 색의 투명도를 설정하는 방법을 알아봅니다.scss는 다양한 방법으로 투명도, Alpha를 설정할 수 있습니다. 이가운데 rgba()를 사용하면 간단하게 투명도를 설정할 수 있습니다.rgba(색상, 투명도)투명도는 0~1의 값을 사용할 수 있습니다. 이 방법은 매우 유용합니다. 일반적으로 ! scss 색에 투명도 opacity, alpha값 적용 예제아래는 간단한 예제입니다. 만약 변수 $red100에 투명도(alpha) 50%를 설정하여 새로운 변수 $red50을 선언하려면 아래와 같이 코드를 입력합니다.$red100: #f00;$red50: rgba($red100, 0.5);이와 같은 방식으로 원하는 색상의 투명도를 조절하여 같은 색상의 다른 투명도를 여러개
Last Modified : 2020-07-15 17:32:53