더 나은 웹개발을 꿈꾸는 기술 블로그. 웹이즈프리.
총 7개의 일치하는 문서를 찾았습니다.
css전처리기 sass/scss css로 컴파일 변환하기
NodeJS 환경에서 sass 또는 scss를 css로 변환하여 사용하는 방법에 대하여 짧게 알아보겠습니다.! 언제 변환이 필요할까?일반적인 상황에서는 필요하지 않습니다. 대부분 빌드 과정의 트랜스파일링 또는 번들링 과정에서 자동으로 변환되도록 설정 후 사용하기 때문이죠. 하지만 이런 과정이 없는 경우가 있을 수 있겠죠? 드물기는 하겠지만 수동으로 직접 빌드하거나 아니면 이미 작업된 css 전처리기를 사용한 파일의 코드를 css로 변환해야하는 상황이 필요할 수 있습니다.그럼 아래에서 순서대로 알아봅니다.하나. sass 모듈 설치하기변환을 위해서는 기본적으로 sass ...
Last Modified : 2022-10-13 13:58:00
Created : 2022-10-04 20:40:00- css
[scss] if else 조건문 사용하는 방법 및 예제
스타일을 사용하기 위한 방법으로 SCSS에서 if 조건문을 사용하는 방법에 대하여 알아보려고 합니다. 아래는 간단한 문법입니다.@if 조건 { 적용할 스타일}SCSS는 if 조건문을 사용하여 스타일을 적용하는 것이 가능합니다. 이 경우 일반적으로 @mixin, @include와 함께 많이 사용되는데 @include를 사용하여 전달된 파라미터 값에 if문을 사용하여 다른 스타일을 적용하기 위함입니다. 그럼 바로 알아보겠습니다.# @include, @mixin에 조건문 사용하는 방법if, else이해를 돕기 위해서 간단한 예제를 코드를 하나 만들어보겠습니다. ...
Last Modified : 2021-04-14 21:04:04
Created : 2021-04-14 20:49:00 - css
[scss] 리스트 타입 선언 방법과 반복문 사용하기, @each
css 전처리기 중 하나인 scss에서 리스트 타입의 선언 방법을 알아보고 리스트 타입의 데이터를 반복문에 사용하는 방법도 함께 알아봅니다.# scss list 타입 알아보기전처리기 css인 scss에는 여러 타입이 존재하며 배열과 같은 리스트 타입 그리고 객체와 같은 맵 타입이 존재합니다.list - 리스트 타입(배열과 비슷)map - 맵 타입(객체와 비슷)이 두 가지 타입은 하나가 아닌 여러 개의 값을 가질 수 있다는 공통점이 있습니다. 아래에서 리스트 타입(lists)에 대하여 자세히 알아보겠습니다.! scss 리스트 타입(list...
Last Modified : 2020-07-21 19:35:26
Created : 2020-07-21 18:11:00 - css
scss 투명도 opacity 설정하기
css의 전처리기 중 하나인 scss를 사용하여 색의 투명도를 설정하는 방법을 알아봅니다.scss는 다양한 방법으로 투명도, Alpha를 설정할 수 있습니다. 이가운데 rgba()를 사용하면 간단하게 투명도를 설정할 수 있습니다.rgba(색상, 투명도)투명도는 0~1의 값을 사용할 수 있습니다. 이 방법은 매우 유용합니다. 일반적으로 ! scss 색에 투명도 opacity, alpha값 적용 예제아래는 간단한 예제입니다. 만약 변수 $red100에 투명도(alpha) 50%를 설정하여 새로운 변수 $red50을 선언하려면 아래와 같이 코드를...
Last Modified : 2020-07-15 17:32:53
Created : 2020-07-15 17:32:00 - css
[scss] 다른 스타일을 가져와 적용하기, @extend 확장
CSS의 전처리기 언어인 SCSS를 사용하는 방법 중 다른 스타일을 가져오는 방법에 대하여 알아봅니다. 바로 @extend를 사용한 스타일 확장 방법입니다.# SCSS의 스타일 확장 알아보기, @extend전처리기 덕분에 CSS 역시 자바스크립트의 객체처럼 다른 스타일을 상속 받는 것처럼 사용하는 것이 가능합니다. 상속과는 다를 수 있으나 스타일을 확장하여 사용할 수 있어 모든 스타일을 정의하지 않아도 다른 스타일을 가져와 사용할 수 있죠. SCSS의 @extend가 바로 그것입니다.@extend <가져올 스타일>문법은 위와 같이 간단하며 가져올 스타일을...
Last Modified : 2020-04-30 21:36:45
Created : 2020-04-27 10:51:17 
css[scss] 변수 선언 방법 및 예제 알아보기
아래는 SCSS를 사용하여 스타일을 선언할 때 어떻게 변수를 선언하고 변수 선언과 관련된 다양한 방법들을 알아보려고 합니다.# scss의 변수 선언하기scss에서도 역시 변수를 선언하고 사용할 수 있습니다. 그렇다면 변수 선언을 왜 할까요?동일한 컴포넌트 UI에 동일한 스타일을 유지할 수 있다.버튼이나 아이콘에 적용된 스타일을 모든 페이지에서 한 번에 바꾸기는 쉽지 않습니다. 이 경우 변수를 사용하여 지정해두면 간단하게 변수의 값만 변경해 모든 페이지의 스타일을 한 번에 변경해 적용할 수 있습니다. 그리고 모든 변수들을 variable.scss 등의 파일을 만들어 한...
Last Modified : 2020-05-27 17:16:17
Created : 2019-11-04 16:51:07- css
[scss] @mixin @include 사용방법 및 예제보기
CSS의 전처리기 css인 SCSS에서 자주 사용되는 @mixin 그리고 @inclue에 대하여 알아보려고 합니다.@mixin@include이 둘은 sass, scss에서 자주 볼 수 있는데요 어떻게 그리고 언제 사용하는지 알아봅니다.# @mixin @include 알아보기먼저 두 가지 @mixin와 @include는 항상 함께 사용되며 @mixin을 사용하면 그룹단위의 스타일을 변수처럼 적용할 수 있습니다. 즉 여러개의 스타일을 설정해두었다가 한번에 적용하는 것이 가능합니다. 이때 설정에는 @mixin을 그리고 사용할 때는 @include를 사용하면 됩니다. 아래 ...
Last Modified : 2020-10-16 11:36:40
Created : 2019-10-08 13:39:12