실무자를 위한 Sass (CSS 프리프로세서)
퍼블리싱 실무자를 위해 이론과 실습을 구성하였습니다.
What you will learn
CSS 프리프로세서(전처리기) 이해
프로그래밍 언어 기본 개념 이해
기존 CSS 문법과 비교하여 차이점 숙지
기존 CSS에서 제공하지 않는 완성도 높은 기능 구현
Why take this course?
[ 수강필요성 (+동기부여) ]
기술 시대
기술 가진 사람이 ‘우대’받는 시대
1) 고용 안정성 (필요한 만큼 쉽게 내보내지 못함)
2) 유리한 처우 (구하기 어려운 사람이 되면 될 수록 유리함)
3) 직업 확장성 (프리랜서, 외주제작, 강사, 연사, 출판 등)
보편적인 기술
HTML, CSS, Javascript
1) 웹 페이지를 만드려면 반드시 사용해야하는 기술
2) IT 업계에서 널리 쓰임 (찾는 곳이 많음)
낮은 진입 장벽
HTML, CSS
1) 상대적으로 배우기 쉬운 편
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. 전역 변수 작성
Charts
Price
Rating
Enrollment distribution
