실무자를 위한 Sass (CSS 프리프로세서)

[ 수강필요성 (+동기부여) ]

기술 시대

기술 가진 사람이 ‘우대’받는 시대

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. 전역 변수 작성