What You Will Learn!
- CSS 프리프로세서(전처리기) 이해
- 프로그래밍 언어 기본 개념 이해
- 기존 CSS 문법과 비교하여 차이점 숙지
- 기존 CSS에서 제공하지 않는 완성도 높은 기능 구현
Description
[ 수강필요성 (+동기부여) ]
기술 시대
기술 가진 사람이 ‘우대’받는 시대
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. 전역 변수 작성
Who Should Attend!
- 효율적인 CSS 코드 작성에 관심이 있으신 분
