css와 scss는 무엇이 다를까?

CSS(Cascading Style Sheets)는 웹 페이지의 디자인과 레이아웃을 담당하는 스타일 시트 언어입니다.

HTML이 웹의 구조를 정의한다면, CSS는 그 구조에 색상, 글꼴, 여백, 배치, 애니메이션 등 시각적 스타일을 입히는 역할을 합니다.

 

SCSS(Sassy CSS)는 CSS 전처리기인 Sass의 문법 중 하나로, 기존 CSS 문법과 거의 동일하면서도 더 강력한 기능을 제공합니다. CSS보다 더 효율적이고 유지보수가 쉬운 스타일 코드를 작성할 수 있도록 도와줍니다.

 

CSS의 핵심 개념

 

선택자(Selector): 어떤 HTML 요소에 스타일을 적용할지 지정합니다.(예: p, .highlight, #main-header)

속성(Property): 스타일의 종류을 말합니다. (예: color, font-size, margin)

값(Value): 속성에 적용할 구체적인 스타일입니다. (예: red, 18px, center)

선언 블록(Declaration Block): 속성과 값을 {} 안에 묶은 것입니다.

 

css 코드

p {
  color: blue;
  font-size: 18px;
}

 

CSS 적용 방법 3가지

방법	설명
인라인 스타일	HTML 태그 안에 직접 스타일 작성 (style="...")
내부 스타일시트	<style> 태그 안에 CSS 작성 (HTML 문서 내부에 포함)
외부 스타일시트	.css 파일을 만들어 <link> 태그로 연결 (가장 일반적이고 효율적)

 

 

1. 인라인 스타일

<h1 style="color:red;">Hello</h1>

2. 내부 스타일 (head 태그 안)

<style>   p { color: green; } </style>

3. 외부 스타일 시트 (추천)

<!-- HTML --> <link rel="stylesheet" href="style.css"> /* style.css */ body {   background-color: #f0f0f0; }

 

4. 예시 코드

/* 모든 <p> 태그에 파란색 글자와 여백 적용 */ p {   color: blue;   font-size: 18px;   margin-bottom: 10px; } /* 클래스가 highlight인 요소에 노란 배경 */ .highlight {   background-color: yellow;   font-weight: bold; } /* 아이디가 main-header인 요소에 큰 글자와 가운데 정렬 */ #main-header {   font-size: 32px;   text-align: center; }

 

자주 쓰는 CSS 속성들

속성	설명	예시
color	글자 색	color: red;
background-color	배경색	background-color: #eee;
font-size	글자 크기	font-size: 16px;
margin	바깥 여백	margin: 10px;
padding	안쪽 여백	padding: 15px;
border	테두리	border: 1px solid black;
display	레이아웃 방식	display: flex;, block, inline 등
position	위치 지정	relative, absolute, fixed, sticky
flexbox	요소 정렬	display: flex; justify-content: center;
grid	격자 배치	display: grid; grid-template-columns: ...

---

SCSS의 주요 특징

 

CSS와 유사한 문법: 중괄호 {}와 세미콜론 ;을 사용하여 CSS처럼 작성 가능

변수 사용 가능: 색상, 폰트 크기 등을 변수로 관리

중첩(Nesting): 선택자 안에 선택자를 중첩시켜 구조적으로 작성

Mixin: 재사용 가능한 스타일 블록 정의

조건문/반복문: 프로그래밍처럼 동적 스타일 작성 가능

모듈화: @import 또는 @use로 파일 분리 및 재사용

 

SCSS의 주요 기능

기능	설명	예시
변수	색상, 크기 등 반복되는 값을 저장	$primary: #3498db;
중첩(Nesting)	선택자 안에 또 다른 선택자 작성	.nav { ul { li { ... } } }
믹스인(Mixin)	재사용 가능한 코드 블록	@mixin button { ... }
상속(Extend)	스타일 복사해서 확장	@extend .btn;
연산	수학 연산 가능	width: 100% / 3;

 

SCSS 예제

// 변수 선언 $primary-color: #3498db; $padding: 10px; // 믹스인 정의 @mixin rounded($radius) {   border-radius: $radius;   -webkit-border-radius: $radius; } // 스타일 작성 .button {   background-color: $primary-color;   padding: $padding;   &:hover {     background-color: darken($primary-color, 10%);   }   @include rounded(5px); }

 

SCSS vs CSS 예제 비교

1. CSS 방식

.button {   background-color: #3498db;   color: white;   padding: 10px 20px; } .button:hover {   background-color: #2980b9; }

2. SCSS 방식

$primary-color: #3498db; $hover-color: #2980b9; .button {   background-color: $primary-color;   color: white;   padding: 10px 20px;   &:hover {     background-color: $hover-color;   } }

 

SCSS 사용 방법

SCSS 파일은 .scss 확장자를 가지며, 브라우저가 직접 읽을 수 없습니다. 반드시 CSS로 컴파일해야 합니다.

 

1: Node.js 환경에서 sass 패키지 설치

npm install -g sass

2. 컴파일: SCSS 파일을 CSS로 변환

sass style.scss style.css

3. VS Code 사용 시: Sass 확장 프로그램 설치하면 자동 컴파일 가능

VS Code에서 “Live Sass Compiler” 설치를 한 후 .scss 파일 만들고 저장하면 자동으로 .css로 변환됩니다.

 

실전 예제

$font-stack: Helvetica, sans-serif; $primary-color: #333; body {   font: 100% $font-stack;   color: $primary-color;   h1 {     font-size: 2rem;     margin-bottom: 1rem;   }   a {     color: lighten($primary-color, 20%);     text-decoration: none;     &:hover {       text-decoration: underline;     }   } }

컴파일되면 일반 CSS로 변환됩니다.

---

 

SCSS vs Sass

SCSS는 Sass의 기능을 모두 포함하면서도 CSS와 문법이 유사해 대부분의 프로젝트에서 SCSS를 선호합니다

항목	SCSS 문법	Sass 문법
문법 스타일	CSS와 유사 (중괄호, 세미콜론 사용)	들여쓰기 기반, 중괄호 없이 작성
가독성	CSS에 익숙한 사람에게 친숙함	더 간결하지만 익숙해지기까지 시간 필요
예시	.nav { color: red; }	.nav\n color: red