전체 글
SASS - @each
@for문 보다 좀 더 다양하고 기능 범용성이 있는 @each에 대해 알아보겠습니다 @for문은 반복문이 간결하고 쉽지만 숫자만 반복됩니다 &:nth-of-type(1) { a { @include button($bg: pink); } } &:nth-of-type(2) { a { @include button($bg: aqua); } } &:nth-of-type(3) { a { @include button($bg: orange); } } &:nth-of-type(4) { a { @include button($bg: lightgreen); } } 여기 값을 보면 각각 컬러값이 다르고 순서값으로 활용하기 애매합니다 하지만 @each로 처리가 가능합니다 먼저 서로 리스트가 다른걸 그룹화 시킬 수 있습니다 styl..
SASS - @for 반복문 사용법
반복문을 이용해서 마우스를 올렸을 때 부드럽게 시간차가 발생하며 아래에서 위로 올라오는 모션을 만들어보겠습니다 먼저 만약에 아래 코드 괄호에 아무런 값이 들어가 있지않으면 에러가 발생합니다 &:nth-of-type(1) a { @include button(); } 그러므로 기본값으로 대체할 곳이 필요한데 이때 mixin 함수에 기본값을 적용해놓습니다 @mixin button($wid: 100px 이렇게 되면 괄호에 아무것도 적지 않더라도 기본적으로 button은 100px을 가지고 있습니다 추가적으로 $bg도 넣어줍니다 그렇다면 background도 인수 값으로 변경합니다 @mixin button($wid: 100px, $bg: gray) { display: block; width: $wid; heigh..
SASS - mixin
자주 만드는 UI 컴포넌트가 있다면 해당 기능을 빠르게 만들어 줄 수 있는 기능이 mixin입니다 외부파일에서 작성해서 import로 불러오겠습니다 SCSS 폴더 내에 _mixin.scss 파일 생성 보통 아래 코드를 보면 boder-radius, color, 위치값 등 자주 쓰는 값을 하나하나 쓰는게 꽤 비효율적입니다 a { display: block; width: 100px; height: 40px; border-radius: 20px; background: gray; font-size: 12px; color: #fff; display: flex; justify-content: center; align-items: center; } 공통적인 UI를 mixin을 통해 바꾸도록 합시다 JavaScript..
SASS - 변수
코드마다 하나하나 색상이 있는 값을 찾아서 컬러값에 지정해야했습니다 많이 바뀌는 코드값을 변수로 지정해서 편리하게 값을 변경할 수 있습니다 Scss에서 변수를 만들 땐 " $ " 표시를 합니다 $bgbody에 #eee라는 컬러값이 들어가 있는 셈입니다 $bgBody: #eee; 해당 변수를 body에 백그라운드에 넣을 수 있습니다 $bgBody: #eee; body { background: $bgBody; } css에서 확인해보면 #eee로 들어가있는걸 확인할 수 있습니다
화살표 함수
기존에는 fuction을 사용해 문법을 작성했었습니다 하지만 좀 더 편리하게 화살표 함수라는걸 사용해서 문법을 만들 수 있는데요 기본적으로 화살표 함수는 " => " 이렇게 화살표 모양으로 사용합니다 기존에 만들어봤던 a + b 함수를 만들어보겠습니다 function add (a, b) { return a + b; } const sum = add(1, 2); console.log(sum) 화살표 함수로 바꿔보겠습니다 const add = (a, b) => { return a + b; } const sum = add(1, 2); console.log(sum); 기존 template literal도 만들어보겠습니다 function hello(name) { console.log(`Hello,${name}!`)..
Template Literal
function hello(name) { console.log("Hello," + name + "!"); } hello("두비_"); 결과값 JavaScript ES6 문법에선 문자열을 조합하기 쉽게 " + " 플러스를 사용합니다 ES6 문법 중 하나인 Template Literal를 사용해보겠습니다 console.log("Hello," + name + "!"); 여기서 괄호 안에 내용만 지워줍니다 문자열을 써볼껀데 기본적으로 백틱을 사용합니다 console.log(`Hello`); 이제 파라미터로 받아온 name 값을 넣어줘야합니다 name을 넣을 땐 달러표시인 $ 이 단축키를 사용합니다 function hello(name) { console.log(`Hello ${name}!`); //파라미터 값 넣..
JavaScript - 함수
함수는 특정 코드를 명령으로 실행할 수 있게 합니다 파라미터가 주어졌을 때 파라미터를 처리해서 결과를 만들어 낼 수 있습니다 const a = 1; const b = 2; const sum = a + b; 이 코드를 함수로 만들어보겠습니다 함수를 사용할 땐 function을 사용합니다 function 앞에 add 를 넣어보겠습니다 여기서 add는 파라미터라 부르며, add에 어떤 값을 넣으면 됩니다 function add 여기서 여러 값을 가져오려면 add에 괄호()를 넣습니다 function add(a, b) a와 b를 더하기 합니다 이때 내부에서 함수를 실행한다 라고 표현합니다 function add(a, b) { //add 함수를 만들어서 a와 b를 더한다 a + b; } 바로 값이 나오는게 아니라..
SASS - nesting 기능 소개, 사용법
nesting이란, 보통 css로 코드를 작성 시 부모 클래스를 써주고 자식이나 자손 클래스명을 써주어야했습니다 코드가 많아지면 많아질수록 가독성이 떨어지고 코드를 보기 힘들어지기도 하죠 하지만 Sass에선 부모 셀렉터를 줄여주고 HTML 구조에 따라서 눈에 보기 쉽게 코드를 작성할 수 있습니다 먼저 CSS로 작성하겠습니다 @charset "UTF-8"; @import "reset"; body { background: #eee; } .wrap { width: 100%; border: 2px solid #bbb; padding: 100px; display: flex; justify-content: center; } .wrap .item { width: 300px; padding: 30px; backgrou..