퍼블리싱 아카이브

1. $break-point & @mixin 사용하기 반응형 웹을 작성할 때 일반적으로 나누는 $break-point는 1200px, 992px, 768px, 576px이다. 이 기준이 대중적으로 가장 많이 통용되는 기준이므로 반응형 웹을 작성할 때는 다음과 같이 작성하면 된다.(하지만 절대적인 기준은 아니다.) //_responsive.scss $break-point-xl: 1200px;//데스크탑 $break-point-lg: 992px;//태블릿 가로 $break-point-md: 768px;//태블릿 세로 $break-point-sm: 576px;//모바일 @use 'responsive' as r; /*responsive*/ @mixin responsive_xl{ @media screen and ..

용도 공통된 스타일을 반복적으로 사용하기보다 한 번 선언하고 여러번 사용하고 싶을 때 @extends 문법을 쓴다. 예시1) 클래스를 선언하여 extend하는 법 => css 파일에서도 존재하는 클래스 //scss .btn{ width: 100px; height: 100px; padding: 20px; } .btn-green{ @extend .btn; color:rgb(196, 253, 196) } //css .btn, .btn-green { width: 100px; height: 100px; padding: 20px; } .btn-green { color: rgb(196, 253, 196); }/*# sourceMappingURL=main.css.map */ 예시2) 가상클래스 %를 선언하여 exten..

지난 포스팅은 @import를 사용해서 .scss(.sass) 파일을 분리하는 것을 공부해보았다. 그런데 최신버전에서는 @import를 쓰는 대신 @use와 @forward를 쓰라고 한다. @use와 @import는 어떻게 다를까? 그리고 왜 @import 대신 @use, @forward를 쓰는 것이 나을까? 1. @import를 쓰면 생기는 문제 지난 포스팅에서 이야기했듯이 규모가 큰 프로젝트일수록 .scss 파일을 따로 분리해서 사용한다. 예를 들어 배경색은 _bg.scss 파일로, 변수들은 _var.scss 이런식으로 따로 정리해서 모아둔다. 그러다보면 변수명도 겹칠 때가 있을지모른다. 배경색의 메인컬러를 지정하고 싶어서 $main-color라고 변수를 만들어 놨는데 폰트 색을 지정할 때도 $mai..

1. Partial(파일분리, @import 사용하기) 소스에 반복되는 부분들을 분리, 분산시켜서 모듈화시키는 기능. SCSS나 Sass를 사용하면, 프로젝트가 커질수록 유지보수와 수정이 어려운 CSS의 단점을 보완해 준다. SCSS/Sass 파일을 @import 해서 스타일 별로, 기능별로 파일을 분리하여 사용할 수도 있다. 이러면 코드를 관리하기도 편해진다. (@import는 CSS에서도 자주 사용한다. 구글 웹폰트 같은 거 사용할 때 자주 씀) ** @import하는 파일명 앞에는 _(언더바)를 붙여야 한다. 언더바를 붙이지 않는다면 분할 된 파일들 모두가 컴파일 되기 때문에 여러개의 .css 파일이 나눠서 저장된다. 그러나 SCSS/Sass 파일 이름 앞에 언더바를 붙여서 파일명을 저장하면, SC..

1. 믹스인(Mixins)은 왜 사용하는가? 스타일 시트를 작성할 떄, 비슷하거나 동일한 스타일을 반복해서 사용해야 하는 때가 있다. 믹스인을 사용하면 사이트 전체에서 재사용할 스타일 그룹을 정의할 수 있다. 2. 믹스인 사용하기(@mixin, @include) @mixin 지시자로 스타일을 지정하고 @include를 사용해 해당 믹스인을 호출하여 사용한다. 이는 물론 CSS로 컴파일하면 보이지 않는다. mixin을 통해 box-style을 지정하고 .one, .two에서 해당 스타일을 호출했다. mixin을 호출하면서 인자를 사용하여 사용할 수도 있다. //SCSS @mixin box-style($bg-color){ width: 100px; height: 100px; display: flex; just..

1. Maps ( ) 괄호 안에 Key: Value 의 형태로 저장하여 사용한다. Key는 고유해야 하지만 Value는 중복이 가능하다. 변수를 각각 선언하는 대신, 관련있는 변수들을 한번에 모아 maps로 만들어서 사용할 수 있다. 안녕하세요! 계묘년 새해복 많이 받으세요! 이번 해는 돈 많이 버세요! //SCSS $font-size: ("h1" : 48px, "h2" : 28px, "p":18px); section{ h1{ font-size: map-get($font-size, "h1"); } h2{ font-size: map-get($font-size, "h2"); } p{ font-size: map-get($font-size, "p"); } } //CSS section h1 { font-size:..

1. Lists(목록형 변수) 리스트는 순서가 있는 값이다. lists의 요소들을 쉼표나 공백 또는 / 로 구분하여 생성하고, 다른 타입의 변수들과 다르게 특수 괄호를 사용하지 않아도 lists로 인식한다. 빈 lists를 만들 때나 lists에 들어있는 값이 하나인 경우, [] 나 ()를 사용하여 생성한다. lists 값의 인덱스는 1부터 시작한다. 첫번째 두번째 세번째 //SCSS $main-color: orange; $font-color:white; $btn-width: 100px, 200px, 300px; button{ &:nth-child(1){ color:$font-color; background:$main-color; width: nth($btn-width,1); // width: 100px..

1. Sass/SCSS에서 변수를 왜 사용할까? 스타일을 작성하다 보면, 속성값을 반복해서 사용하는 경우가 많다. 자주 반복되는 스타일을 수정하는 일은 무척 번거로운 작업이다. => 유지보수가 매우 쉬워진다. 그렇다고 해서 무분별하게 변수를 남발해서는 안된다. 타당한 이유가 있는 변수들을 우선순위로 생성한다. 값이 두 번 이상 반복되는 경우 기존의 값을 다른 값으로 변경할 가능성이 높은 경우 변수를 생성하면 된다. 변수명은 직관적인 이름으로 짓는 것이 좋다. 영문자와 숫자, 그리고 -, _를 포함할 수 있다. 컴파일된 CSS 파일에서 변수는 보이지 않는다. 2. 변수 생성하기($) $ 기호를 사용해서 스타일을 적용할 값(색상, 폰트사이즈, 이미지 URL)을 저장한다. 첫번째 두번째 세번째 //SCSS $..

1. 주석 scss/sass 파일에서 한줄 주석(//)은 CSS 파일로 빌드되면 보이지 않는다. 여러줄 주석(/* */)은 CSS파일로 빌드되어도 보인다. 2. 중첩(Nesting) 중첩을 사용하면 HTML의 시각적 계층방식과 동일하게 CSS를 중첩하여 작성할 수 있다. CSS 코드가 구조화 되어 가독성이 높아지며 유지 보수하기 편리해진다. 기존 CSS는 부모에게 상속된 자식 요소에게 스타일을 적용하려고 할 때마다 최상위 선택자를 반복 선언해야 한다. 하지만 중첩을 사용하면 최상위 선택자를 한번만 선언하여도 자식 선택자에게 스타일을 적용할수 있게 되어 코드 반복을 줄이게 된다. one two three four //scss nav{ background: yellow; ul{ display:flex; ju..

scss 파일을 작성하다보면 개행을 많이 하게 된다. 이러면 코드의 가독성은 좋지만 파일의 용량이 쓸데없이 늘어날 수 있다. 이를 방지하기 위해 SCSS 파일을 CSS 파일로 빌드할 때, 압축된 형태로 만들 수 있는 명령어를 쓸 수 있다. sass --style compressed style/main.css:style/main.css 명령어를 이렇게 입력하면 개행한 부분이 사라져 압축된 형태로 CSS 파일이 빌드된다. 만약 live로 css 파일을 컴파일하고 싶으며 동시에 compressed한 형태로 빌드하고 싶다면 sass --watch --style compressed style/main.css:style/main.css 라고 입력하면 된다. 참고 https://youtu.be/k0s0iqfZJa4