You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
![[SCSS] 💎 조건문 / 반복문 (@if / @for / @each / @while)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdNcizH%2FbtrhdWoznEy%2Fg4PzaMpY0BKLK81eERsBO0%2Fimg.png)
[SCSS] 💎 조건문 / 반복문 (@if / @for / @each / @while)
SCSS 조건문 인라인 if Sass $width: 555px; div { width: if($width > 300px, $width, null); } CSS div { width: 555px; } @if Sass @function limitSize($size) { @if $size >= 0 and $size 0 { .item-#{$i} { width: 2px * $i; } $i: $i - 2; } CSS .item-6 { width: 12px; } .item-4 { width: 8px; } .item-2 { width: 4px; } Reference https://heropy.blog/2018/01/31/sass/
![[SCSS] 💎 내장함수 모음 (Built-in Functoins)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FqCUqZ%2Fbtrher2Si9h%2FV3iTVqqH8how59BFoNV2G1%2Fimg.png)
[SCSS] 💎 내장함수 모음 (Built-in Functoins)
Built-in Functoins (내장함수) 색상(RGB / HSL / Opacity) 함수 mix($color1, $color2) : 두 개의 색을 섞습니다. lighten($color, $amount) : 더 밝은색을 만듭니다. darken($color, $amount) : 더 어두운색을 만듭니다. saturate($color, $amount) : 색상의 채도를 올립니다. desaturate($color, $amount) : 색상의 채도를 낮춥니다. grayscale($color) : 색상을 회색으로 변환합니다. invert($color) : 색상을 반전시킵니다. rgba($color, $alpha) : 색상의 투명도를 변경합니다. opacify($color, $amount) / fade-in($c..
![[SCSS] 💎 함수형 프로그래밍 (mixin / functions)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb6OMyx%2FbtrhdVXuYvL%2Fm3PdUmxkJtTOtGP9nH9fX0%2Fimg.png)
[SCSS] 💎 함수형 프로그래밍 (mixin / functions)
Mixin (믹스인) Sass Mixins는 스타일 시트 전체에서 재사용 할 css 선언 그룹 을 정의하는 아주 훌륭한 기능입니다. 약간의 Mixin(믹스인)으로 다양한 스타일을 만들어낼 수 있습니다. mixin 을 선언 할 떄는@mixin 를 사용하며, 이를 사용 할 때는 @include 를 사용합니다. Sass @mixin large-text { /* 선언 */ font: { size: 22px; weight: bold; family: sans-serif; } color: orange; &::after { content: "!!"; } span.icon { background: url("/images/icon.png"); } } h1 { @include large-text; /* 사용 */ } d..
![[SCSS] 💎 불러오기 (Import) 기능](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FlUoxu%2FbtrheAyeAlv%2FnqMYdY0KM1wShj5GCMOZr1%2Fimg.png)
[SCSS] 💎 불러오기 (Import) 기능
Import (불러오기) import 기능은 스타일들을 여러 파일들로 나누고, 다른 파일에서 불러와서 사용하는 기능입니다. 다음과 같이 @import directive 를 사용하여 특정.scss 파일을 불러 올 수 있습니다: @import "layout.scss"; 참고로, 확장자를 붙이지 않아도 됩니다. @import "layout"; @import로 외부에서 가져온 Sass 파일은 모두 단일 CSS 출력 파일로 병합됩니다. 또한, 가져온 파일에 정의된 모든 변수 또는 Mixins 등을 주 파일에서 사용할 수 있습니다. Sass @import는 기본적으로 Sass 파일을 가져오는데, CSS @import 규칙으로 컴파일되는 몇 가지 상황이 있습니다. 파일 확장자가 .css일 때 파일 이름이 http:/..
![[SCSS] 💎 연산자 (Operations) 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F7s160%2Fbtrhh73nC4E%2Fb3B9BDQaAHjJ7W9KiOq4V1%2Fimg.png)
[SCSS] 💎 연산자 (Operations) 정리
Operators (연산자) Sass 에서는 수학 연산자들을 사용 할 수 있습니다. 산술 연산자 + 더하기 - 빼기 * 곱하기 하나 이상의 값이 반드시 숫자(Number) / 나누기 오른쪽 값이 반드시 숫자(Number) % 나머지 비교 연산자 == 동등 != 부등 대소 / 보다 큰 = 대소 및 동등 / 보다 크거나 같은 논리(불린, Boolean) 연산자 and 그리고 or 또는 not 부정 숫자(Numbers) 상대적 단위 연산 일반적으론 절댓값을 나타내는 px 단위로 연산을 합니다만, 상대적 단위(%, em, vw 등)의 연산의 경우 CSS calc()로 연산해야 합니다. width: 50% - 20px; /* 단위 모순 에러(Incompatible units error) */ width: ca..
![[SCSS] 💎 중첩 기능 (Nesting)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb6tJ71%2Fbtrhly0uDLf%2FUzfITQNGiVMlXK3tcfk2LK%2Fimg.png)
[SCSS] 💎 중첩 기능 (Nesting)
Nesting (중첩) Sass 의 매우 유용한 기능중 하나는 선언을 중첩시킬 수 있다는 것 입니다. 어떻게 작동하는지, 또 어떤점을 주의해야 할 지 알아봅시다. 일반 CSS 에선 특정 선택자 자식,자손의 선택자를 스타일링 하려면 이렇게 따로따로 하나하나씩 선언해서 해야 했습니다. .section { width: 100%; } .section .list { padding: 20px; } .section .list li { float: left; } 간단한 CSS 면, 큰 문제는 없지만, CSS 파일이 커지면 유지보수가 어려워지죠. Sass 에선, 이런식으로 중첩해서 작성하면 위와 같은 결과물을 얻을 수 있게 됩니다. .section { width: 100%; .list { padding: 20px..
![[SCSS] 💎 변수와 타입 (variable $)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdnvDQE%2Fbtrhgk2XGIA%2F2QKhD8hC7UvzwaXi7nEHf1%2Fimg.png)
[SCSS] 💎 변수와 타입 (variable $)
Comment (주석) Sass의 주석이 CSS 와 다른점은 한 줄 주석이 추가되었다는 점 입니다. Sass /* You can See me */ // You can't see me /* You Can See Mee */ Data Types (데이터 종류) Numbers 숫자 1, .82, 20px, 2em… Strings 문자 bold, relative "/images/a.png", "dotum" Colors 색상 표현 red, blue #FFFF00 rgba(255,0,0,.5) Booleans 논리 true, false Nulls 아무것도 없음. 컴파일 하지 않음. null Lists 공백이나 ,로 구분된 값의 목록 (apple, orange, banana) apple orange Maps List..
💎 SaSS & SCSS 소개 & 설치 세팅 💯 총정리
CSS 와 Sass(SCSS) Sass(SCSS)에 대해 얘기하기에 앞서, CSS에 대한 이야기를 짧게 해보자. 🤔 CSS의 단점 CSS는 복잡한 언어는 아니지만 작업이 커지고 코드가 많아질수록 불편함이 생기게 된다. 예를들어 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 ..등 프로젝트가 커지면 코드 중복이 많아지고 복잡해지어 유지보수가 어려워지게 된다. 프로그래밍에서 가장 흔한 조건문이나 반복문 조차도 문법을 지원하지 않아 '복사 & 붙여넣기' 만 주구장창 해야한다. 이 밖의 CSS의 단점을 열거하면 다음과 같다. 선택자(Selector)을 만들때 매번 불필요한 부모요소 선택자를 적어야 한다. function 같은게 없으니, 규모가 큰 프로제트의 경우 자동화하기..
