BEST

웹 개발

CSS에 날개를 달아주는 Sass (SCSS)

Name: CSS에 날개를 달아주는 Sass (SCSS)
Price: 27500 KRW
Rating: 4.5 (58 reviews)

스마트한 CSS의 작성! Sass (SCSS) Sass (Syntactically Awesome Style Sheets)

(4.5) 수강평 58개

수강생 637명

난이도 초급

수강기한 무제한

DEvSIGNER

메가존

임직원들도 이 강의를 듣고 있어요!

메가존

임직원들도 이 강의를 듣고 있어요!

먼저 경험한 수강생들의 후기

4.5

5.0

superior

55% 수강 후 작성

너무 재밌게 잘 들었습니다!!! 생활코딩에서 SASS에 대한 동영상을 가볍게 듣고나서 들으니깐 훨씬 이해가 잘 됩니다 ! 그리고 Lorem project 만들면서 많은걸 배운 시간이었네요 ! 그리고 기존에 일하면서 css 중에 이미지 블렌딩, 그라데이션, 애니메이션, 트랜지션 같은것들도 쉽게 쉽게 알려주셔서 헷갈렸던 부분이 완벽하게 이해되는 시간이었습니다 !! 다만 아쉬운거 한가지는 강좌에서 중간중간 화면이 흐려지는 부분들이 있어서 코드를 보는데 좀 힘들었습니다 !! 그런거 빼면 전체적으로 아주 완벽했습니다 ! 강좌 추천합니다 !

5.0

이메모

95% 수강 후 작성

sass 문법도 문법이지만 프로젝트할 때 폴더를 어떻게 구성해서 사용하면 좋을지 궁금했는데 Lorem 프로젝트 실습하면서 그부분에 있어 많이 배웠습니다! 원래 bracket을 써서 vs code에 대한 장벽이 높았는데 vs code에 대해서도 처음부터 확장프로그램이나 환경설정까지 차근차근 알려주셔서 좋았습니다. 이제는 vs code로 작업해보려구요! 그밖에 css의 헷갈리는 em, rem 개념이나 애니메이션 등에 대해서 잘 정리해주셔서 정말 유익했습니다.

5.0

경민

58% 수강 후 작성

scss 를 처음 배우시는 분들께 강추드립니다. html, css 기본기가 어느정도 있으시다면 무리없이 수강 가능하실 것 같습니다. 말이 약간 느리신 감이 있어서 배속 기능을 사용하여 빠르게 들으신다면 답답한 부분 없이 수강하실 수 있으리라 생각합니다. 기본개념 자세하게 알려주시고, 타 강의에서 종종 나오는 '이건 기본이니 다들 아시죠?' 하고 넘어가는 부분이 제 기억에는 없었습니다. 강사님이 말로는 '이건 다 아시죠?' 해놓곤 줄줄 설명해주십니다. scss를 처음 배우는데 개념을 쉽게 이해할 수 있었습니다. 얻어가는게 많은 강의였습니다. 감사합니다. 소리가 조금 작은데, 다른 강의 계획이 있으시다면 오디오를 조금만 크게 부탁드립니다. :)

수강 후 이런걸 얻을 수 있어요

scss
css

CSS에 날개를 달아주는 Sass (SCSS)

스마트한 CSS의 작성! Sass (SCSS) Sass (Syntactically Awesome Style Sheets)는 세계에서 가장 성숙하고 안정적이며 강력한 전문적인 CSS 확장 언어입니다. Sass는 CSS pre-processor로서, Sass는 CSS의 모든 버전과 완벽하게 호환되고, 단조롭거나 복잡할 수 있는 CSS 작성 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐 만 아니라, 코드의 가독성을 높여주어 유지보수를 쉽게해줍니다. 거기에 CSS 작성에 능률과 재미를 불러일으킵니다!

도움이 되는 분들

웹 분야에 있어서 중급으로 발돋움 하고자 하시는 분들
CSS를 더욱 더 고급스럽고 세련되게 작성하고자 하는 웹 개발자, 디자이너, 퍼블리셔 등

지식공유자 소개

DEvSIGNER

안녕하세요. DEvSIGNER 입니다. DEvSIGNER는 Developer와 Designer 두단어를 섞은 활동명이 되겠습니다. 그에 부응하도록 2003년경 부터 플래시를 필두로한 웹디자인에서 지금의 웹개발자에 이르기 까지 다양한 플랫폼을 경험하고 습득하고 있습니다. 제가 수행한 다양한 프로젝트들과 거기서 경험한 시행착오들을 통해, 강의 내용에 있어서 최대한 수강생을 혼동시키지 않는 간단하고 직선적인 방법으로 설명할 수 있다고 생각합니다. 저의 강의 코스들이 여러분들의 커리어에 활력을 더해줄 수 있는 좋은 기회로 다가가 환영받기를 기대합니다!

강의 보완: 여러가지 소소한 웹관련 컨텐츠들이 있습니다~

저의 유튜브 채널: https://www.youtube.com/channel/UCzdBm7dzIEht0ATtshAVfAA?view_as=subscriber

이런 분들께
추천드려요

학습 대상은
누구일까요?

css의 생산성을 높이고 더 고급스럽게 작성하고자 하시는 분들
css의 실제 활용 기법

선수 지식,
필요할까요?

html
css 기본적인 사용법, 개념

안녕하세요
DEvSIGNER입니다.

637

명

수강생

개

수강평

개

답변

4.5

점

강의 평점

개

강의

커리큘럼

전체

65개 ∙ (27시간 38분)

해당 강의에서 제공:

수업자료

섹션 1. ch00. Intro

1개 ∙ (3분)

1. intro
03:40

섹션 2. ch01. VS Code and Sass Configurations

7개 ∙ (2시간 42분)

2. Setting up Environment - VSCode, Chrome
06:51
3. Basic Editing
14:44
4. Extensions Essential
21:03
5. Visual Studio Code 설정 방법
34:28
6. VSCode Ext: Live Server, Live Sass Compiler
28:25
7. Sass란?
12:57
8. Sass 다른 컴파일 방법
43:41

섹션 3. ch02. Sass Basic Project

31개 ∙ (14시간 10분)

9. [지난 내용] Sass: 변수 (Variables)
24:40
10. Sass: 변수 - 기초 개념
01:04:59
11. Partial #1
39:49
12. Sass: 변수 - 기초 개념 + 추가 내용
34:35
13. Sass: Nesting
52:14
14. Sass: Nesting 추가 내용
19:38
15. Sass: map file
06:54
16. Sass: 기초 활용 예제
57:47
17. Sass: 함수 기초
19:51
18. Sass: 함수 활용 예제
50:12
19. CSS 가상요소(::before, ::after)를 이용한 링크 애니메이션 (Link Animation)
15:32
20. mixin 기초 개념
18:12
21. mixin 예제 - flex
25:49
22. Lists 목록형 변수 기초
13:48
23. Maps 맵 데이터 변수 (미디어 쿼리)
16:40
24. Bootstrap Breakpoints와 기능 분석을 통한 Media Query Mixin 만들기
54:36
25. CSS 선택자 우선순위와 :is, :where 선택자
30:10
26. 반응형 웹에 유용한 CSS: min(), max(), clamp() 함수
16:57
27. 특정 부모 요소 선택자 :has()
22:33
28. CSS: 일정한 범위와 간격별 자식 요소들 선택
20:43
29. CSS: inset으로 position 위치 지정
06:09
30. CSS: 가로 / 세로 비율 지정 aspect-ratio
01:59
31. CSS: position 타입 - absolute, fixed, sticky
14:28
32. CSS, SCSS 레이아웃 개념잡기
19:42
33. [지난 내용] mixin
20:17
34. [지난 내용] extend
08:57
35. [지난 내용] Partial #2
19:46
36. [지난 내용] Partial Import Error Solution
05:38
37. [지난 내용] if
16:57
38. Wrap up - Boxes Project - 1
01:15:15
39. Wrap up - Boxes Project - 2
55:46

섹션 4. ch03. Lorem Project

16개 ∙ (7시간 34분)

섹션 5. ch04. Conclusion

1개 ∙ (5분)

섹션 6. [LEGACY] - 지난 내용

9개 ∙ (3시간 3분)

강의 게시일: 2018. 03. 25.

마지막 업데이트일: 2025. 05. 19.

수강평

전체

58개

4.5

58개의 수강평

경민
수강평 1
∙
평균 평점 5.0
2020. 11. 23.
5
58% 수강 후 작성
scss 를 처음 배우시는 분들께 강추드립니다. html, css 기본기가 어느정도 있으시다면 무리없이 수강 가능하실 것 같습니다. 말이 약간 느리신 감이 있어서 배속 기능을 사용하여 빠르게 들으신다면 답답한 부분 없이 수강하실 수 있으리라 생각합니다. 기본개념 자세하게 알려주시고, 타 강의에서 종종 나오는 '이건 기본이니 다들 아시죠?' 하고 넘어가는 부분이 제 기억에는 없었습니다. 강사님이 말로는 '이건 다 아시죠?' 해놓곤 줄줄 설명해주십니다. scss를 처음 배우는데 개념을 쉽게 이해할 수 있었습니다. 얻어가는게 많은 강의였습니다. 감사합니다. 소리가 조금 작은데, 다른 강의 계획이 있으시다면 오디오를 조금만 크게 부탁드립니다. :)
superior
수강평 4
∙
평균 평점 5.0
2018. 10. 01.
5
55% 수강 후 작성
너무 재밌게 잘 들었습니다!!! 생활코딩에서 SASS에 대한 동영상을 가볍게 듣고나서 들으니깐 훨씬 이해가 잘 됩니다 ! 그리고 Lorem project 만들면서 많은걸 배운 시간이었네요 ! 그리고 기존에 일하면서 css 중에 이미지 블렌딩, 그라데이션, 애니메이션, 트랜지션 같은것들도 쉽게 쉽게 알려주셔서 헷갈렸던 부분이 완벽하게 이해되는 시간이었습니다 !! 다만 아쉬운거 한가지는 강좌에서 중간중간 화면이 흐려지는 부분들이 있어서 코드를 보는데 좀 힘들었습니다 !! 그런거 빼면 전체적으로 아주 완벽했습니다 ! 강좌 추천합니다 !
wally-wally
수강평 15
∙
평균 평점 5.0
2020. 10. 27.
5
100% 수강 후 작성
평소에 Sass에 관심이 있어서 체계적으로 배우고 싶었는데 이 강의를 통해서 Sass의 큰 틀을 잡을 수 있어서 너무 좋았습니다!
이메모
수강평 1
∙
평균 평점 5.0
2019. 09. 11.
5
95% 수강 후 작성
sass 문법도 문법이지만 프로젝트할 때 폴더를 어떻게 구성해서 사용하면 좋을지 궁금했는데 Lorem 프로젝트 실습하면서 그부분에 있어 많이 배웠습니다! 원래 bracket을 써서 vs code에 대한 장벽이 높았는데 vs code에 대해서도 처음부터 확장프로그램이나 환경설정까지 차근차근 알려주셔서 좋았습니다. 이제는 vs code로 작업해보려구요! 그밖에 css의 헷갈리는 em, rem 개념이나 애니메이션 등에 대해서 잘 정리해주셔서 정말 유익했습니다.
특별한 지렁이
수강평 25
∙
평균 평점 4.2
2020. 10. 09.
5
100% 수강 후 작성
목소리? 음량? 이 너무 작아서 당황했어요. 컴퓨터 소리 키우고 들으면 중간중간 기계음은 또 너무 크게 들리고.. ㅜㅜ 말 너무 느리셔서 주로 1.75배속이나 2배속으로 들었음. 초반에 세팅할때 좀 지루했음. 그런데 중반으로 갈수록 내용이 예술이었어요. 강의 기술적인 면이 좀 부족하지만 120% 커버할 수 있는 내용을 담고 있습니다. 3년차 코더인데 풀스택 개발하려고 보니 생각보다 css 지식이 부족했는데, 그렇다고 css 공부하면 또 기초적인것만 공부해서 도돌이표였는데 이 수업을 통해서 중급 수업을 들을 수 있었고, 여러가지 활용면을 골고루 보여주셔서 1분도 놓치기 아까운 강의였습니다. 3일만에 완강했는데 차분히 필기하면서 다시 들으려구요. 처음에 좀 지루하게 느껴졌던 세팅도 유용한 것 많았어요! 앞으로도 좋은 강의 부탁드립니다 !

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

최고의 프론트엔드 CSS Frameworks, UIkit

코딩웍스(Coding Works)

부트스트랩(Bootstrap)과 함께 대표적인 CSS Frameworks인 UIkit을 기초부터 활용까지 체계적으로 배우실 수 있습니다. 퍼블리셔 취업을 위해 잘 만들어진 개인 포트폴리오 홈페이지가 반드시 필요합니다. 개인 포트폴리오 홈페이지에서 포트폴리오 결과물을 세련되게 보여주기 위해 Slideshow, Slider, Lightbox, Full Screen Modal, Filter 등 UIkit 컴포넌트의 상세한 사용법과 실전 제작에 활용하는 퍼블리싱 스킬과 노하우를 배울 수 있습니다.

초급

HTML/CSS, 포트폴리오

최고의 프론트엔드 CSS Frameworks, UIkit

코딩웍스(Coding Works)

웹 퍼블리셔를 위한 자바스크립트 & 제이쿼리 핵심이론 실전예제(교재, 완성본)

코딩웍스(Coding Works)

웹 퍼블리셔를 위한 JS 핵심이론 및 실전예제 교재 및 완성본은 PDF로 제작된 강의 교재입니다. 해당 교재는 웹 퍼블리셔가 꼭 알아야 하는 자바스크립트와 제이쿼리 기본기를 충실히 갖출 수 있는 역할을 합니다. 해당 교재 특징으로는 이론과 연결된 스몰미션(Small Mission)을 통해서 이론을 더욱 탄탄히 할 수 있습니다. 특히 배운 모든 이론을 활용한 실전 예제 역시 충실히 준비된 교재입니다. 해당 PDF 전체 페이지는 순수 자바스크립트(Vanlila JavaScript)와 제이쿼리(jQuery) 페이지 수는 320페이지 이상으로 코딩웍스가 쉽게 이해할 수 있도록 충분한 설명을 덧붙여 놓았습니다. 특히, 퍼블리셔가 웹사이트 제작을 위해 필수적인 제이쿼리 상호작용 실전 예제를 학습하실 수 있습니다.

초급

JavaScript, jQuery, HTML/CSS

웹 퍼블리셔를 위한 자바스크립트 & 제이쿼리 핵심이론 실전예제(교재, 완성본)

코딩웍스(Coding Works)

시험 전에 꼭 봐야 할 웹디자인기능사 공개 문제 (2020) Part.1

유용한IT학습

웹디자인기능사 실기를 준비하기 위한 기초 내용을 공개 문제를 통해 학습하는 강의입니다. 실무에서 웹 코딩을 활용하고자 하는 웹디자이너에게도 유익한 강의에요.

초급

HTML/CSS, JavaScript

시험 전에 꼭 봐야 할 웹디자인기능사 공개 문제 (2020) Part.1

유용한IT학습

시험 전에 꼭 봐야 할 웹디자인기능사 공개 문제 (2020) Part.2

유용한IT학습

초급

HTML/CSS, JavaScript

시험 전에 꼭 봐야 할 웹디자인기능사 공개 문제 (2020) Part.2

유용한IT학습

코딩은 처음이라 with 웹 퍼블리싱 - CSS

이지웹

CSS 기초부터 애니메이션, 반응형까지 학습합니다. 실전 예제를 통해 학습한 내용을 복습하면서 확실하게 기본기를 다집니다.

입문

HTML/CSS

코딩은 처음이라 with 웹 퍼블리싱 - CSS

이지웹

효과적인 모바일 UX 만들기 (디자인 + 코딩)

유용한IT학습

Photoshop과 Adobe XD 프로그램을 활용해 다양한 디바이스의 웹, 앱 레이아웃을 디자인해 본 뒤 간단한 코딩 기술을 학습해 직접 구현해볼 수 있게 됩니다.

초급

HTML/CSS, jQuery, XD

효과적인 모바일 UX 만들기 (디자인 + 코딩)

유용한IT학습

Do It! 장고+부트스트랩: 파이썬 웹개발의 정석

SungYong Lee

만들면서 배우는 파이썬 웹개발 A to Z! 웹 기초부터 블로그 개발, 배포까지 한 번에 배워요.

초급

Python, Django, Bootstrap

Do It! 장고+부트스트랩: 파이썬 웹개발의 정석

SungYong Lee

3D리플릿 만들기 - 인터랙티브 웹 프로젝트

1분코딩

인터랙티브 웹 프로젝트는, CSS와 자바스크립트를 이용해 창의적인 인터랙션이 있는 예제를 하나씩 만들어보는 시리즈입니다.

중급이상

HTML/CSS, JavaScript, 인터랙티브 웹

3D리플릿 만들기 - 인터랙티브 웹 프로젝트

1분코딩

퍼블리셔 취업 진짜 실전 가이드(PDF)

코딩웍스(Coding Works)

퍼블리셔 취업을 위한 진짜 가이드 전자책(PDF)으로 효율적인 퍼블리싱 학습방법, 좋은 퍼블리싱 강의 잘 가르치는 퍼블리싱 강사 고르는 안목, 신입이지만 경력자처럼 퍼블리싱하는 요령, 바람직한 코딩 습관과 원칙, 개인 포트폴리오 홈페이지 제작 방법, 디자이너 개발자와의 협업 요령, 퍼블리셔로 알아야 할 필수 사이트, 포토샵 UI 디자인 실력키우기 등 퍼블리셔 취업을 위해 반드시 알아야 하는 HTML+CSS+JQUERY 퍼블리싱 기본기를 상세하게 알려드립니다. 또한, 국비지원 퍼블리셔 과정에 대해 상세히 설명합니다.

입문

HTML/CSS

퍼블리셔 취업 진짜 실전 가이드(PDF)

코딩웍스(Coding Works)

웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)

두노피

전국 합격률 60%중에 우리반 합격률은 90%! 시험요구사항을 파악하면 가능합니다. 실기 책 사지마요 어려워요

초급

HTML/CSS, jQuery

웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)

두노피

Vanila JS 기반 UI Component - 탭메뉴 만들기

코딩고스트

하나의 웹 페이지를 구성하려면, 부분부분 각 컴포넌트들을 만들 수 있어야 합니다. 순수코딩만으로 UI component를 만들어 봅니다. html,css,javascript를 사용하실 줄 아는 분께 추천드립니다.

초급

HTML/CSS, vanilla-javascript

Vanila JS 기반 UI Component - 탭메뉴 만들기

코딩고스트

프론트엔드 입문: HTML, CSS 가장 쉽게 이해하기

3년차 프론트엔드 개발자가 가장 쉽게 알려주는 HTML, CSS 기초 강의입니다.

입문

HTML/CSS, html5, css

프론트엔드 입문: HTML, CSS 가장 쉽게 이해하기

생성형 AI로만 웹사이트 제작과 배포까지

JEngineer

AI 시대에 반드시 필요한 AI를 활용하여 최적의 결과물을 얻고 싶으신 분들을 위해 준비했습니다. 2시간 만에 AI 활용을 코딩으로 제대로 알아보실 수 있습니다.

입문

HTML/CSS, JavaScript, 업무 생산성

생성형 AI로만 웹사이트 제작과 배포까지

JEngineer

실무중심의 HTML5 시각화 프로그래밍

트레이딩온

데이터를 가공하여 표의 형태로 표현할 수도 있지만 가장 중요한 것은 데이터를 인간이 한 눈에 알아 볼 수 있게 표현하는 것입니다.

초급

HTML/CSS

실무중심의 HTML5 시각화 프로그래밍

트레이딩온

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

코딩웍스(Coding Works)

웹디자인개발기능사(구 웹디자인기능사) 출제기준(2025.1.1 ~ 2027.12.31)까지 시행되는 출제기준에 정확히 맞춘 웹디자인 기능사 실기 시험 내용에 최적화 되어 있는 실기시험 전문 강의로서, HTML+CSS+JQUERY 퍼블리싱, 코딩웍스 웹디자인개발기능사 실기시험 강의는 다릅니다. 2026년 웹디자인개발기능사 모든 시험 유형(A,B,C,D,E,F 유형) 완벽 제작 수업영상이 모두 반영되어 있습니다.

입문

HTML/CSS, jQuery, 웹 디자인

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

코딩웍스(Coding Works)

풀면서 배우는 정보처리산업기사 과정평가형 실기 완벽정리

Neo

풀면서 배우는 정보처리산업기사 정보처리산업기사 과정평가형 실기 합격을 위해 모든것을 준비했습니다.

입문

HTML/CSS, Java, SQL

풀면서 배우는 정보처리산업기사 과정평가형 실기 완벽정리

Neo

웹디자인기능사 실기 B-3 유형 html+css

두노피

자격증 시험이 아니더라도 연습하기 좋은 예제입니다. 웹디자인 기능사 실기 B-3 유형을 천천~~히 따라해보아요

초급

HTML/CSS

웹디자인기능사 실기 B-3 유형 html+css

두노피

퍼블리셔 개인 포트폴리오 홈페이지 제작 완벽 가이드(PDF)

코딩웍스(Coding Works)

취업을 위해 면접을 자주 봐야 합니다. 면접을 자주 보기 위해서는 괜찮은 퍼블리셔 개인 포트폴리오 홈페이지가 반드시 있어야 합니다. 코딩웍스가 심혈을 기울여 만든 괜찮은 개인 포트폴리오 홈페이지 제작 가이드 교재(PDF)입니다. 해당 교재는 인터넷에서 구글링 해서 구할 수 있는 내용이 아닙니다. 코딩웍스가 수년간 현장에서 300여 명의 학생에게 퍼블리싱 이론, 실전, 개인 포트폴리오 홈페이지 제작 강의하고 학생들이 빨리 원하는 회사에 취업할 수 있도록 개인 포트폴리오 홈페이지 제작 방법을 상세하게 담은 세상에 하나뿐인 퍼블리셔 취업 개인 포트폴리오 홈페이지 제작 가이드(PDF) 입니다.

초급

포트폴리오, 웹 디자인, HTML/CSS

퍼블리셔 개인 포트폴리오 홈페이지 제작 완벽 가이드(PDF)

코딩웍스(Coding Works)

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

그랩

왕초보도 할 수 있는 웹, 서버, 모바일 앱, 머신러닝까지 익히는 끝판왕 풀스택 강의!! 개발을 어디서부터 시작할지 막막했다면 이 강의를 강력 추천할게요. Javascript 하나로 진행합니다!

입문

JavaScript, React, Node.js

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

그랩

[환상의족발] 디자인부터 코딩까지

두노피

맛있는 족발이에요~ 요즘 족발 장난 아니던데...꿀꺽

초급

Photoshop, HTML/CSS, 클론코딩

[환상의족발] 디자인부터 코딩까지

두노피

CSS에 날개를 달아주는 Sass (SCSS)

4.5

수강 후 이런걸 얻을 수 있어요

CSS에 날개를 달아주는 Sass (SCSS)

도움이 되는 분들

지식공유자 소개

이런 분들께 추천드려요

안녕하세요 DEvSIGNER입니다.

커리큘럼

수강평

비슷한 강의

이런 분들께
추천드려요

안녕하세요
DEvSIGNER입니다.