개발 · 프로그래밍 웹 개발

CSS에 날개를 달아주는 Sass (SCSS) 대시보드

(4.5) 55개의 수강평 ∙ 600명의 수강생

DEvSIGNER

HTML/CSS Sass

27,500원

지식공유자: DEvSIGNER

총 65개 수업 (27시간 38분)

수강기한:

수료증: 발급

난이도: --

지식공유자 답변이 제공되는 강의입니다

폴더에 추가 969

초급자를 위해 준비한
[웹 퍼블리싱, 웹 개발] 강의입니다.

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

✍️
이런 걸
배워요!

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 기본적인 사용법, 개념

이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.

섹션 0. ch00. Intro 1 강 ∙ 3분

intro 미리보기 03:40

섹션 1. ch01. VS Code and Sass Configurations 7 강 ∙ 2시간 42분

Setting up Environment - VSCode, Chrome 06:51

Basic Editing 미리보기 14:44

Extensions Essential 21:03

Visual Studio Code 설정 방법 미리보기 34:28 VSCode Ext: Live Server, Live Sass Compiler 미리보기 28:25 Sass란? 미리보기 12:57 Sass 다른 컴파일 방법 미리보기 43:41

섹션 2. ch02. Sass Basic Project 31 강 ∙ 14시간 10분

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

[지난 내용] mixin 20:17

[지난 내용] extend 08:57

[지난 내용] Partial #2 19:46

[지난 내용] Partial Import Error Solution 05:38

[지난 내용] if 16:57

Wrap up - Boxes Project - 1 미리보기 01:15:15

Wrap up - Boxes Project - 2 55:46

섹션 3. ch03. Lorem Project 16 강 ∙ 7시간 34분

Lorem Project Init 12:18

header, CSS unit, trans, anim - 1 40:24

header, CSS unit, trans, anim - 2 32:49

header, CSS unit, trans, anim - 3 35:20

header finish 31:46

pseudo element 29:17

footer 26:44

main html 27:31

main h2 h3 btn 27:09

main section about 26:33

main complete 27:46

nav basics 22:35

nav button 1 22:47

nav button 2 11:08

nav complete 36:36

media-queries and project complete 43:22

섹션 4. ch04. Conclusion 1 강 ∙ 5분

Conclusion 05:12

섹션 5. [LEGACY] - 지난 내용 9 강 ∙ 3시간 3분

[지난 내용] Sass is 미리보기 07:08

[지난 내용] VS Code 버전 1.3부터 바뀐 설정 방식 04:18

[지난 내용] Visual Studio Code 설정 자세한 설명 (with Live Sass Compiler) 01:09:07

[지난 내용] Extension - Live Server 14:56

[지난 내용] Live Sass Compiler 15:26

[지난 내용] Live Sass Compiler more 11:09

[지난 내용] Writing Example Code 13:27

[지난 내용] Nesting 35:15

[지난 내용] Nesting - Media Queries 12:26

강의 게시일 : 2018년 03월 26일 (마지막 업데이트일 : 2023년 02월 06일)

수강생분들이 직접 작성하신 수강평입니다.

4.5

55개의 수강평

5점

4점

3점

2점

1점

VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순

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

2020-11-23

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

2019-09-11

목소리? 음량? 이 너무 작아서 당황했어요. 컴퓨터 소리 키우고 들으면 중간중간 기계음은 또 너무 크게 들리고.. ㅜㅜ 말 너무 느리셔서 주로 1.75배속이나 2배속으로 들었음. 초반에 세팅할때 좀 지루했음. 그런데 중반으로 갈수록 내용이 예술이었어요. 강의 기술적인 면이 좀 부족하지만 120% 커버할 수 있는 내용을 담고 있습니다. 3년차 코더인데 풀스택 개발하려고 보니 생각보다 css 지식이 부족했는데, 그렇다고 css 공부하면 또 기초적인것만 공부해서 도돌이표였는데 이 수업을 통해서 중급 수업을 들을 수 있었고, 여러가지 활용면을 골고루 보여주셔서 1분도 놓치기 아까운 강의였습니다. 3일만에 완강했는데 차분히 필기하면서 다시 들으려구요. 처음에 좀 지루하게 느껴졌던 세팅도 유용한 것 많았어요! 앞으로도 좋은 강의 부탁드립니다 !

2020-10-09

평소에 Sass에 관심이 있어서 체계적으로 배우고 싶었는데 이 강의를 통해서 Sass의 큰 틀을 잡을 수 있어서 너무 좋았습니다!

2020-10-27

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

2018-10-01