맨 땅에 프론트엔드 개발자 되기

SASS(SCSS) 색상 내장 함수 SASS(SCSS)에서는 색상과 관련된 내장 함수를 제공하고 있다. 공식문서 https://sass-lang.com/documentation/modules/color Sass: sass:color The hue is a number between 0deg and 360deg (inclusive). The whiteness and blackness are numbers between 0% and 100% (inclusive). The hue may be unitless, but the whiteness and blackness must have unit %. The alpha channel can be specified as either a unit sass-lang.c..

SASS(SCSS) Mixin 과 Include SASS(SCSS)의 편리한 기능 중 하나인 Mixin 기능은 코드의 재사용을 가능하게 해준다. 한 번 작성된 코드로 여러 곳에 같은 코드를 적용시킬 수 있다. 예를 들어, 아래와 같이 코드를 작성해둔다면 어디에서나 이 코드를 불러와 사용할 수 있다. @mixin flex { display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: nowrap; } 사용할 때는 아래와 같이 사용한다. .container{ @include flex; } 미리 정해둔 속성에서 불러올 때마다 값만 다르게 하고 싶다면 함수의 매개변수처럼 아래와 같이 mixin 을 만들 수..

간단한 SASS(SCSS) 사용 방법 - Live Sass Complier SASS(SCSS)는 CSS 전처리기(Pre-processor)로 CSS의 사용을 더 편리하게 도와주는 도구다. 웹 브라우저는 자체적으로 SASS를 해석하지 못 하기 때문에 컴파일을 통해 SASS 파일에 작성된 SASS 문법을 CSS 문법으로 작성된 CSS 파일로 변환시켜주는 작업이 필요하다. node.js 환경에서 작동되는 컴파일러를 실행할 수도 있지만 실제 사용환경이나 최신 기술을 고려하지 않고 단순히 만든 SASS 작업의 결과를 가시적으로 확인하고 싶을 땐 VS Code의 Extension 기능인 Live Sass Complier 를 사용할 수 있다. Live Sass Complier 를 설치하고 나면 우측 하단에 Watch..

VS Code로 코드 작성시에 코드 작성을 편하게 도와주는 Extension 몇 개를 소개해볼까한다. 1. Indent-rainbow indent는 들여쓰기라는 뜻으로 코드를 작성할 때 들여쓰기 단계에 따라 4가지 색상으로 구분해서 코드 작성을 도와주는 기능이다. 코드의 길이가 짧을 때는 별 유용함을 느끼지 못하지만, 코드가 길어지면 포함관계를 구분해서 작성해야할 때 위치를 잘 찾을 수 있도록 도와준다. 2. Auto Close Tag / Auto Rename Tag HTML/XML 태그의 닫힘 태그를 자동으로 완성해주는 기능이다. 태그 명을 수정할 때에도 닫힘 태그를 자동으로 수정해준다. 꼭 필요하고 없어서는 안 되는 기능이라고 생각한다. 정말정말!!! 3. Color Highlight 색을 많이 다루..