
🧩 SCSS 기초문법 완전 정복
웹퍼블리셔와 프론트엔드 개발자를 위한 필수 스타일링 기초
SCSS(Sass)는 CSS를 보다 구조적이고 효율적으로 작성할 수 있도록 도와주는 전처리기입니다.
이 강의는 HTML/CSS 기본 지식이 있는 분들을 대상으로, 실무에 바로 적용 가능한 SCSS의 핵심 문법을 짧고 명확하게 전달합니다.
✨ 강의 구성
🔹 1. SCSS 설치 및 시작
- SCSS 개발환경 준비
.scss
파일 작성과 컴파일 흐름 이해
🔹 2. SCSS 기본 문법 익히기
- 변수(
$
) 사용법과 활용 예시 - 문자보간(Interpolation)
#{}
의 원리 - SCSS에서의 데이터 타입: 숫자, 문자열, 컬러, 리스트 등
- 선택자 중첩(Nesting)을 통한 구조적 스타일 구성
- 반복적인 코드를 줄이는
@mixin
과@extend
- 반복문:
@for
,@each
- 조건문:
@if
,@else if
,@else
- 연산자와 함수 정의
@function
- SCSS에서 자주 쓰는 연산자들 소개
🔹 3. 내장 모듈 활용하기 (Built-in Modules)
SCSS는 다양한 기본 모듈을 제공합니다.
- 문자(String)
- 색상(Color)
- 수학 연산(Math)
- 리스트(List)
- 맵(Map)
- 메타 정보(Meta)
➡ 이 모듈들은 @use
와 함께 로드하며, @use "sass:color"
와 같은 방식으로 사용합니다.
🔹 4. 설정 및 재사용 구조 만들기
@import
와@use
,@forward
의 차이와 사용법- 모듈화된 구조를 만드는 설정 방식 이해
🎯 이런 분들에게 추천합니다
- CSS는 익숙하지만 유지보수에 어려움을 느끼는 웹퍼블리셔
- 변수, 반복문, 함수 개념으로 CSS를 더 효율적으로 쓰고 싶은 분
- 반응형 웹에서 재사용성과 관리 편의성을 높이고 싶은 프론트엔드 입문자
⏰ 수강 정보
- 수강 기간: 1개월 열람권
- 가격: ₩29,000
- 난이도: 입문~초중급