|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/css-preprocessor/
课程评论：没有评论
**课程名称：** **实务者 위한 Sass (CSS预处理器)** **课程概述：** 本课程旨在提升技术人员在当今技术驱动时代的核心竞争力。学习并掌握CSS预处理器Sass，将显著增强您在就业市场上的吸引力，带来更高的薪资待遇和更广阔的职业发展空间（如自由职业、外包、教学、演讲、出版等）。 **课程目标：** * 理解编程基础概念。 * 使用JavaScript和jQuery实现用户界面（UI）交互，包括鼠标点击（触摸）、键盘输入和滚动事件。 * 学会应用Swiper、Filter、Chart等常用插件。 **课程内容：** 1. **CSS预处理器的理解与Sass的特性：** * 引言：为何选择Sass。 * CSS预处理器的概念。 * Sass的核心特点和优势。 2. **Sass的安装与配置：** * 安装Ruby。 * 安装Sass编译器。 * 手动执行编译。 * 配置自动编译（`-watch`选项）。 * 了解不同的编译风格（`-style`选项）。 * 使用代码映射（`-sourcemap`）和缓存（`-cache`）功能。 * 安装VS Code扩展工具以提高效率。 3. **Sass基础用法：** * 导入文件（`@import`）。 * 嵌套规则，提高代码可读性。 * 引用父选择器（`&`）。 * 嵌套使用时的注意事项。 4. **Sass进阶应用：** * 变量的使用，简化样式管理。 * Mixin，创建可重用的样式块。 * Extend，继承和共享样式。 * 媒体查询（`@media`）的优雅应用。 * 超出父级范围的样式输出（`@at-root`）。 5. **Sass专业技巧：** * 利用运算功能进行数值计算。 * 掌握控制指令，实现更动态的样式。 * 条件语句（`@if`）的应用。 * 循环语句（`@for`和`@each`）的运用。 * 自定义函数（`@function`）的创建。 6. **Sass项目结构与实践：** * 基本的项目结构化。 * 组件化结构设计。 * 全局变量的最佳实践。 本课程将通过理论讲解与实践操作相结合的方式，帮助学习者熟练掌握Sass，从而更高效、专业地进行CSS开发。
[ 수강필요성 (+동기부여) ]기술 시대기술 가진 사람이 ‘우대'받는 시대1) 고용 안정성 (필요한 만큼 쉽게 내보내지 못함)2) 유리한 처우 (구하기 어려운 사람이 되면 될 수록 유리함)3) 직업 확장성 (프리랜서, 외주제작, 강사, 연사, 출판 등)보편적인 기술HTML, CSS, Javascript1) 웹 페이지를 만드려면 반드시 사용해야하는 기술2) IT 업계에서 널리 쓰임 (찾는 곳이 많음)낮은 진입 장벽HTML, CSS1) 상대적으로 배우기 쉬운 편2) 디자인 & 개발 직군에서 업무 확장을 위해 배우기 좋음[ 수업목표 ]프로그래밍 기초 이해Javascript, jQuery를 이용한 UI 구현마우스 클릭(터치), 키보드 입력, 스크롤 이벤트 활용스와이퍼, 필터, 차트 등 플러그인 적용[ 수업내용]2. 이해하기 2.1. 서문 2.2. CSS 전처리기 2.3. Sass의 특징3. 설치하기 3.1. Ruby 설치 3.2. Sass 컴파일러 설치 3.3. 컴파일 수행 3.4. 컴파일 자동수행 옵션 (-watch) 3.5. 컴파일 스타일 옵션 (-style) 3.6. 코드 맵핑 (-sourcemap) 3.7. 캐시 (-cache) 3.8. VS Code 확장도구 설치4. 시작하기 4.1. 불러오기 (@import) 4.2. 중첩 규칙 4.3. 부모 선택자 참조 (&) 4.4. 중첩 사용 시 유의사항5. 본격적으로 사용하기 5.1. 변수 5.2. Mixin 5.3. Extend 5.4. 미디어쿼리 (@media) 5.5. 부모 밖으로 나오기 (@at-root)6. 전문적으로 사용하기 6.1. 연산 6.2. 제어문 6.3. 조건문 (@if) 6.4. 반복문 (@for) 6.5. 반복문 (@each) 6.6. 함수 (@function)7. 공통적으로 사용하기 7.1. 기본 구조화 7.2. 컴포넌트 단위 구조화 7.3. 전역 변수 작성
