MINYA

Sass(SCSS) 재활용(Mixins) - 인수(Arguments) Mixin은 함수(Functions)처럼 인수(Arguments)를 가질 수 있습니다. 하나의 Mixin으로 다양한 결과를 만들 수 있습니다. 인수(Arguments) 매개변수(Parameters)란 변수의 한 종류로, 제공되는 여러 데이터 중 하나를 가리키기 위해 사용된다. 제공되는 여러 데이터들을 전달인수(Arguments) 라고 부른다. @mixin 믹스인이름($매개변수) { 스타일; } @include 믹스인이름(인수); SCSS: @mixin dash-line($width, $color) { border: $width dashed $color; } .box1 { @include dash-line(1px, red); } .box..

Sass(SCSS) 재활용(Mixins) - @include Sass Mixins는 스타일 시트 전체에서 재사용 할 CSS 선언 그룹 을 정의하는 아주 훌륭한 기능입니다. 약간의 Mixin(믹스인)으로 다양한 스타일을 만들어낼 수 있습니다. 선언하기(@mixin)와 포함하기(@include) @mixin 기본적인 Mixin 선언은 아주 간단합니다. @mixin 지시어를 이용하여 스타일을 정의합니다. SCSS: @mixin 믹스인이름 { 스타일; } @mixin large-text { font-size: 22px; font-weight: bold; font-family: sans-serif; color: orange; } Sass: =믹스인이름 스타일 =large-text font-size: 22px fo..

Sass(SCSS) 가져오기(Import) @import로 외부에서 가져온 Sass 파일은 모두 단일 CSS 출력 파일로 병합됩니다. 가져온 파일에 정의된 모든 변수 또는 Mixins 등을 주 파일에서 사용할 수 있습니다. Sass @import는 기본적으로 Sass 파일을 가져오는데, CSS @import 규칙으로 컴파일되는 몇 가지 상황이 있습니다. 파일 확장자가 .css일 때 파일 이름이 http://로 시작하는 경우 url()이 붙었을 경우 미디어쿼리가 있는 경우 @import "hello.css"; @import "http://hello.com/hello"; @import url(hello); @import "hello" screen; 여러 파일 가져오기 하나의 @import로 여러 파일을 가져..

Sass(SCSS) 문법 - 변수(Variables) 반복적으로 사용되는 값을 변수로 지정할 수 있습니다. 변수 이름 앞에는 항상 $를 붙입니다 $변수이름: 속성값; SCSS: $color-primary: #e96900; $url-images: "/images/"; $w: 200px; .box { width: $w; margin-left: $w; background: $color-primary url($url-images + "bg.jpg"); } Compiled to: .box { width: 200px; margin-left: 200px; background: #e96900 url("/images/bg.jpg"); } 변수 유효범위(Variable Scope) 변수는 사용 가능한 유효범위가 있습니다...

Sass(SCSS) 문법 - 중첩 Sass는 중첩 기능을 사용할 수 있습니다. 상위 선택자의 반복을 피하고 좀 더 편리하게 복잡한 구조를 작성할 수 있습니다. SCSS: .section { width: 100%; .list { padding: 20px; li { float: left; } } } Compiled to: .section { width: 100%; } .section .list { padding: 20px; } .section .list li { float: left; } Ampersand (상위 선택자 참조) 중첩 안에서 ＆ 키워드는 상위(부모) 선택자를 참조하여 치환합니다. SCSS: .btn { position: absolute; ＆.active { color: red; } } .lis..

Sass(SCSS) 문법 - 주석 위의 ‘Sass와 SCSS의 차이점’에서 설명한대로 Sass와 SCSS의 기능은 동일하니, 편의를 위해 SCSS 문법으로 설명을 진행합니다. 단, Sass와 SCSS의 차이점이 있다면 나눠 설명합니다. 주석(Comment) CSS 주석은 /* ... */ 입니다. Sass(SCSS)는 JavaScript처럼 두 가지 스타일의 주석을 사용합니다. // 컴파일되지 않는 주석 /* 컴파일되는 주석 */ Sass: /* 컴파일되는 * 여러 줄 * 주석 */ // Error /* 컴파일되는 * 여러 줄 * 주석 */ Sass의 경우 컴파일되는 여러 줄 주석을 사용할 때 각 줄 앞에 * 을 붙여야 하고, 중요한 것은 * 의 라인을 맞춰줘야 합니다. SCSS: /* 컴파일되는 여러 ..

Sass(SCSS) 컴파일 방법 Sass(SCSS)는 웹에서 직접 동작할 수 없습니다. 어디까지나 최종에는 표준 CSS로 동작해야 하며, 우리는 전처리기로 작성 후 CSS로 컴파일해야 합니다. 다양한 방법으로 컴파일이 가능하지만 자바스크립트 개발 환경(Node.js)에서 추천하는 몇가지 방법을 소개합니다. SassMeister https://www.sassmeister.com 간단한 Sass 코드는 컴파일러를 설치하는게 부담될 수 있습니다. 그럴 경우 SassMeister를 사용할 수 있습니다. 페이지 접속 후 바로 Sass나 SCSS 문법으로 코딩하면 CSS로 실시간 변환됩니다. HTML를 작성하여 적용된 결과를 보거나 Sass 버전 설정 등 여러 환경 설정들을 지원하니 학습에 도움이 될 것입니다. n..

Sass와 SCSS는 차이점 Sass(Syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 이다. SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다 더 쉽고 간단한 차이는 {}(중괄호)와 ;(세미콜론)의 유무 이다 Sass: Sass는 선택자의 유효범위를 ‘들여쓰기’로 구분 .list width: 100px float: left li color: red background: url("./image.jpg") &:last-child margin-right: -10px SCSS: SCSS는 {}로 범위를 구분 .list ..

CSS Preprocessor 란? Sass, Less 등이 있습니다. 이 친구들은 CSS 전(예비)처리기 입니다. 보통 CSS Preprocessor 라고 부릅니다. CSS가 동작하기 전에 사용하는 기능으로, 웹에서는 분명 CSS가 동작하지만 우리는 CSS의 불편함을 이런 확장 기능으로 상쇄할 수 있습니다. 사스는 기초 언어에 힘과 우아함을 더해주는 CSS의 확장이다. 어떻게 사용할까? 위에서 언급한 것처럼 웹에서는 CSS만 동작합니다. Sass, Less, Stylus 같은 전처리기(이하 ‘전처리기’로 표기)는 직접 동작시킬 수 없습니다. 그렇다면 어떻게 사용할 수 있을까? CSS는 불편하니 일단 배제하고 우선 전처리기로 작성(코딩)합니다. 전처리기는 CSS 문법과 굉장히 유사하지만 선택자의 중첩(N..

포그라운드(foreground), 백그라운드(background) 포그라운드와 백그라운드 작업의 이해 쉘은 프로세스를 작업(job) 단위로 관리 유닉스는 동시에 여러 작업을 할 수 있는 다중 작업(Multitasking) 운영체제 포그라운드(foreground, 전위) 처리와 백그라운드(background, 후위) 처리 방식으로 동작 포그라운드 처리 사용자가 입력한 명령이 실행되어 결과가 출력될 때까지 프롬프트가 출력되지 않아 다른 명령을 입력할 수 없어 기다려야 하는 경우 사용자가 명령을 입력하면 쉘이 명령을 해석하여 실행한 결과를 화면에 출력 사용자는 화면에 출력된 결과를 보고 다시 명령을 입력하여 대화식 작업을 함 포그라운드 프로세스 : 포그라운드 처리로 실행되고 있는 프로세스, 포그라운드 작업 포..