오열매의 코딩 공간

mixin을 이용하다가 parameter를 사용하지 않아도 default 값을 설정하고 싶을 때가 있다. 그런 경우에는 기존에 올렸던 포스팅처럼 변수를 파라미터로 보내어 if elseif 문으로 처리하는 방식은 적용되지 않는다. (parameter없이 사용 불가하다는 뜻) 프로젝트를 진행하고 있는데 위 박스에 있는 코드들이 자주 반복된다. 매번 쓰는 것도 상관은 없지만, 반복되는 코드들이 거슬려서 mixin을 사용하려 한다. @mixin flex-center($jcc: center, $aic: center) { display: flex; justify-content: $jcc; align-items: $aic; } 위 코드처럼 parameter 자리에 변수 및 default값을 직접 설정할 수 있다. 해..

Mixins의 사용 방법 중 하나이다. 정의한 mixin에 기존 코드를 옮기는 방법이다. mixin에서의 코딩 문법과 활용하기에 적절하며, 반응형 웹을 위한 미디어 쿼리에도 활용할 수 있다. 메인 scss 파일에서 @include 와 mixin 이름 + 파라미터 를 선언하고, 그 안에 추가 속성을 넣어 선언한다. mixin 파일에는 파라미터와 추가 속성 값이 넘어가게 된다. 추가 속성 값은 mixin 파일의 @content 부분에 해당한다. 이를 if else 등에 적절히 활용하여 media query를 사용하는 코드이다. 위 media query에 사용한 변수 값을 정확하지 않으므로, 추후 포스팅에서 자세하게 쓸 예정이다. (사용 금지) 이런 방식이 있다는 정도만 소개하는 포스팅이다. 참고) https..

SCSS를 더욱 파워풀하게 쓸 수 있는 방식에 대해 소개한다. Mixins 와 Extends이다. 1) Mixins Mixins는 CSS를 '프로그래밍'하여 상황에 맞게 효과를 적용시키는 데 적합하다. 파일을 따로 분리하는 것이 좋다. 이름은 _mixins.scss로 하고 import 하면 된다. (확장자 .scss 는 생략 가능) 실습에 사용할 html 태그들이다. 상자 6개를 가지고 진행한다. 우측 상단이 _mixins.scss 이다. mixin을 사용할 땐, 메인 scss 파일에서 @include mixin명(파라미터) 로 사용한다. 좌측의 styles.scss에서 @include를 사용하여 변수를 보낸다. 함수를 사용하는 것과 같은 방식으로, 파라미터를 보내고 해당 변수에 맞는 값을 효과로 설정한..

네스팅과 변수를 선언하고 사용하는 방법에 대해 포스팅한다. 위 두 가지는 기본 사용법으로, CSS와는 아주 차별화되고 훨씬 편안한 방식들이다. 한 번 맛을 보면, 다신 CSS로 돌아갈 수 없다.(주관적 생각) 또한, SCSS로 BEM을 사용하는 방식도 위 두 가지 대상들을 통해 함께 알아본다. 1) Nesting 기존 CSS를 사용하려면, 태그나 클래스, 아이디 등을 대상으로 지정하여 '독립적'으로 속성을 선언해야 했다. Nesting은 이러한 틀을 깨버리는 아주 효율적인 방식이다. 하나의 태그 안에 다른 태그가 속해있다면, 처음 정의한 태그를 벗어나지 않고 그 안에 정의할 수 있다. 원래는 body 태그의 괄호를 닫은 뒤에 클래스명이 container인 태그에 대해 새롭게 괄호를 열어야 했다. 하지만,..

Sass란 Syntactically Awesome Style Sheets의 약자이다. CSS pre-processor(전처리기)로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성 및 가독성을 높여주어 유지보수를 쉽게 해준다. scss는 sass의 3버전에서 등장한 언어이다. 퍼블리셔에게 익숙한 css와 비슷한 구문을 가지고 있으며, css와 완전히 호환되도록 새로운 구문을 도입한 css의 상위 호환 스타일시트이다. sass기능을 지원하되, css와 거의 같은 문법으로 사용된다는 점에서, 퍼블리셔들에게 각광받는 언어이다. 설치 과정) 1. git 설치: https://git-scm.com/ Git git-scm.com 2. NodeJS LTS 설치: https://nodejs.org/en/ N..