오늘의 집 클론코딩 : 내일의 집

오늘의 집 클론코딩 내일의 집 프로젝트를 진행하면서 배운 Sass(SCSS)에 대해 알아보자.

Sass(SCSS) 를 사용하기 위해 `node-sass` 모듈을 설치하는 방법과 사용하는 방법을 알아보자.

Sass(SCSS)는 CSS 전처리기로써 CSS에 프로그래밍적 요소를 곁들인 언어이다. 따라서 어떠한 스타일링을 변수나 mixin을 선언하고 반복적으로 사용할 수 있다. 먼저 변수에 대해 먼저 알아보자.

그리드 시스템(Grid System)에서 ‘Grid’는 격자나 바둑판 모양의 눈금을 뜻하며, 일반적으로 수직과 수평으로 면이 분할된 것을 의미한다. 그리드 시스템은 웹 페이지를 일정 갯수의 구간으로 나누어서 스타일링을 하는 것을 말한다.

이번에는 스타일링을 함수처럼 사용해 변수보다 다양하게 활용이 가능한 **mixin**에 대해 알아보자. mixin을 한 번 배워놓으면 같은 코드를 절대 반복해서 쓰는 일이 없게 된다.

Sass에서 기호 `&`은 부모 선택자를 참조하는 것을 뜻한다. 스타일링 코드 안에서 `&`은 그 자체로 부모 선택자를 가리키는 것으로, 같은 선택자에서 조금 더 덧붙인 선택자를 입력할 때 유용하게 쓸 수 있다.

프로젝트를 하다보면 자주 사용되는 UI 컴포넌트들이 있다. 가령 버튼 모양 같은 것들 말이다. 그런 것들은 미리 스타일링 해놓고 필요할 때마다 해당 스타일의 클래스 이름을 붙이면 스타일이 자동으로 완성된다. Sass로 좀 더 쉽게 모듈화 하는 방법을 알아보자.

스타일링을 하다보면 곳곳에서 다양하게 쓰이는 글로벌한 스타일링 코드가 있다. 화면에서 어떤 컨텐츠는 안보이게 한다던가, 특정 너비의 화면에서만 보이거나 보이지 않게 하는 것들 말이다. 그런 스타일링을 쉽게 적용할 수 있도록 미리 클래스를 만드는 방법을 알아보도록 하자.

웹 사이트에서 가장 많이 사용하고 중요한 GNB (Global navigation Bar)를 마크업 해보자. 말 그대로 모든 화면에서 나오는 네비게이션 바 라는 뜻이다.