• 교육 종합 안내
  • 정규 교육 과정
    • 웹디자인/UX/UI/웹개발
    • IT 서비스 기획/비즈니스
    • 소셜커머스/블로그
    • 경영전략/기획
    • 마케팅/홍보/서비스
  • 기업 위탁 교육
  • 온라인 교육센터
  • 교육센터 FAQ
    • 정규 교육 과정
    • 온라인 교육
    • 결제 및 환불
    • 회원 관련
  • 교육센터 소개
  • 강사모집

단과교육과정

[정부지원] SASS & Frameworks를 활용한 '반응형 웹 디자인' 모던 워크플로우 실무 향상 과정<3.9>

진보된 Sass + Compass + Bourbon + Susy를 활용한 반응형 웹 모던 사이트 제작 워크플로우

교육센터 신청내역 보기

프로그램안내 강사소개 등록관련안내 교육장소

정규교육과정 소개

CSS 중심의 반응형 웹디자인(흔하디 흔한 과정)과는 구축과 운영 측면(생산성, 관리효율)에서 차원이 다른 반응형 웹 모던 사이트 제작 워크플로우를 배우는 과정입니다.

* 수강료 69~86% 정부지원!!
- 교육비: 정규직 182,736원, 계약직 82,170원 (근로자카드 소지자에 한함)

* 근로자 직업능력개발훈련이란?
* 수강료 정부지원시 결제는 사전등록 후 교육당일 근로자카드결제만 지원!!

정규교육과정 참고자료 강의자료 다운로드

정규교육과정 개요

기간 2015년 03월 09일 (월) 오후 7:00 ~ 2015년 04월 10일 (금) 오후 10:00
인원 25명
장소 한국인터넷전문가협회 평생교육원 5층 약도보기
주최 한국인터넷전문가협회
주관 한국인터넷전문가협회 평생교육원
후원

고용노동부

한국인터넷전문가협회
목적 1) CSS 프리프로세서(Preprocessor) Sass의 모든것!
2) 모듈러 CSS 디자인 패턴: `SMACSS` 활용
3) Sass를 보다 강력하게 사용할 수 있도록 지원하는 강력한 프레임워크: Compass, Bourbon, Susy
4) 반응형 웹 모바일 퍼스트 모던 웹 사이트 제작 미니 프로젝트: 효율적이고, 생산적인 관리 시스템 구축 경험!
참여대상 1) 비 생산적이고, 반복 단순작업이 많은 CSS 워크플로우에 질린 웹 전문가
2) Sass에 대해 들어 봤으나, 제대로 공부해 본 적 없는 웹 전문가

정규교육과정 프로그램

구분 강의 주제 및 내용 강사
Session 1 : 2015.3.9 (월)
19:00~22:00
CSS 프리프로세싱이란?
CSS를 파워업(Power Up)하는 확장 컴파일 언어
◆ 프리프로세서(Pre-Processor) vs 프로세서(Processor)
◆ CSS로는 불가능한 것을 가능케 하는 SASS의 위대함!
지훈(야무) 위원
KIPFA 웹표준분과
Session 2 : 2015.3.11 (수)
19:00~22:00
SASS를 배워보자.
◆ Sass vs Scss 문법의 차이점: CSS에 익숙하다면 Scss!
◆ Sass 베이직: 변수, 중첩 규칙, 호출(모듈 관리), 상속, 확장, 연산 등


Session 3 : 2015.3.13 (금)
19:00~22:00
SASS를 전문가(Expert)답게 사용해보자 1
◆ Sass 스크립트 __ CSS 스타일 언어에 `프로그래밍 날개`를 달다.
◆ Sass 믹스인 __ 반복되는 CSS 노가다를 줄이자.


Session 4 : 2015.3.16 (월)
19:00~22:00
SASS를 전문가(Expert)답게 사용해보자 2
◆ Sass 스크립트 __ Sass 데이터 유형: 숫자,문자(컬러),리스트,맵,null
◆ Sass 스크립트 __ 조건문과 반복문을 적재적소에 버무리다.


Session 5 : 2015.3.18 (수)
19:00~22:00
SASS를 전문가(Expert)답게 사용해보자 3
◆ Sass 스크립트 __ 빌트인(Build-in) 함수 & 사용자 정의 함수


Session 6 : 2015.3.20 (금)
19:00~22:00
SASS를 확장하는 애드온(Add-On)을 설치해보자.
◆ Sass 애드온 __ Compass, Bourbon, Sass Globbing


Session 7 : 2015.3.23 (월)
19:00~22:00
플렉서블한 반응형 웹(RWD) 모던 그리드 시스템 - Susy & Breakpoint
◆ Sass 애드온 __ Breakpoint, Susy


Session 8 : 2015.3.25 (수)
19:00~22:00
SASS 프레임워크 - Compass를 배워보자 1
◆ Compass 프로젝트 시작하기
◆ Compass 설치 및 초기화(Init), 생성(Create) / 도움말(Help)을 통해 명령어 공부
◆ Compass CSS3 믹스인(Mixins) 활용 - Background, Border Radius, Box, Shadow, Transform, Transition 등
◆ Compass Helpers 믹스인(Mixins) 활용 - 웹폰트 믹스인, URL 헬퍼 함수, 선택자 헬퍼 함수 등
◆ Compass 레이아웃(Layout), 리셋(Reset), 타이포그래피(Typography) 믹스인 활용


Session 9 : 2015.3.27 (금)
19:00~22:00
SASS 프레임워크 - Compass를 배워보자 2
◆ Compass 유틸리티(Utilities) 활용
◆ Color - contrast-color() 함수, contrasted 믹스인
◆ General - clearfix, float, hacks, minimums, tag clouds
◆ Sprites - 스프라이트 이미지 자동 생성 및 배경이미지 위치, 가로/세로 값 자동 적용 방법
◆ Compass 확장 - 효율적인 플레이스 상속 선택자 활용을 위한 compass-placeholders


Session 10 : 2015.3.30 (월)
19:00~22:00
모듈러 CSS 구현을 위한 SMACSS
◆ SMACSS는 SASS, Compass 같은 프레임워크가 아닌, CSS 스타일 가이드!
◆ SMACSS는 사이트 개발에 일관된 접근 방식을 문서화한 시도!
◆ CSS 규칙 카테고라이징, Base, Layout, Module, State, Theme, Changing State, Icon Rules
◆ CSS 프리프로세서를 활용한 모듈 통합


Session 11 : 2015.4.1 (수)
19:00~22:00
반응형 웹 미니 프로젝트 0 - 프로젝트 스케폴딩(Scaffolding)
◆ 반응형 웹(RWD) 제작을 위한 Compass 프로젝트 생성
◆ Compass 프로젝트 생성 후, 프로젝트에 애드온(Add-On) 추가
◆ RWD 그래픽 디자인 시안(PSD) 제작 - 모바일 퍼스트, 중단점(Breakpoint), 브라우저 지원 범위 설정
◆ 이미지 슬라이싱(고해상도 대응) & 스프라이트 이미지 제작


Session 12 : 2015.4.3 (금)
19:00~22:00
반응형 웹 미니 프로젝트 1 - HTML5 구조화(Markup)
◆ 시멘틱 마크업 + 유효한 문법 검사
◆ 반응형 웹(RWD) PSD → HTML5 구조화
◆ HTML5 마크업 문서 유효성 검사 (HTML5 Validation)


Session 13 : 2015.4.6 (월)
19:00~22:00
반응형 웹 미니 프로젝트 2 - SMACSS를 토대로 모듈 분리
◆ CSS 스타일 가이드 SMACSS 에 맞춰 Base, Layout, Module, State, Theme 모듈 분리
◆ 분리된 모듈 통합을 위해 SASS Globbing 애드온 프로젝트에 추가
◆ 분리된 모듈에 스타일 코드 작성(SCSS) 및 소스맵(Sourcemap) 적용 테스트
◆ 구글 크롬(Chrome) 웹 브라우저에서 SCSS 원본 소스 코드 확인을 위한 소스맵 플래그(Flag) 추가
◆ 커멘드 프롬프트(CLI)를 통해 SCSS → CSS 컴파일 결과 확인


Session 14 : 2015.4.8 (수)
19:00~22:00
반응형 웹 미니 프로젝트 3 - 스타일링(Mobile > Tablet > Desktop)
◆ 모바일 뷰(Mobile View) 스타일링
◆ singularity.gs 를 활용하여 모바일 그리드 생성 / 엘리먼트 레이아웃
◆ 태블릿 뷰(Tablet View) 스타일링
◆ singularity.gs, Breakpoint를 활용하여 태블릿 그리드 생성 / 엘리먼트 레이아웃
◆ 데스크탑 뷰(Desktop View) 스타일링
◆ singularity.gs, Breakpoint를 활용하여 데스크탑 그리드 생성 / 엘리먼트 레이아웃


Session 15 : 2015.4.10 (금)
19:00~22:00
반응형 웹 미니 프로젝트 4 - 최종 테스팅 & 배포(Publish)
◆ 설정한 브라우저 지원 범위에 따른 크로스 브라우징 최종 점검
◆ Moderizr 필터링(Filtering)을 통해 문제(Bug) 수정
◆ 배포할 각 파일을 압축하여 출력
◆ 이미지 최적화, HTML/CSS/JS 코드 압축 성능 개선


정규교육과정 강사소개

교육센터 강사진 보기

  • 강사 사진
    KIPFA 웹표준분과   지훈(야무) 위원

    :: 경력
    (전)KTH, UXD 교육 담당 PD
    (전)모노디아트센터 팀장
    ∙ ㈜정글 커뮤니케이션즈 : 웹 디자인 스페셜리스트, 웹 표준, 액션스크립트
    ∙ Opener : LG전자 POP 그래픽 디자인
    ∙ Sunny Communication : CI,BI / Package / Brochure

    :: 주요프로젝트
    ∙ 신한은행 : 하이브리드 웹앱 제작을 위한 HTML5
    ∙ SKT : 모바일 비즈니스를 위한 웹 앱 환경 이해
    ∙ 매일유업 : 스마트 시대, 웹 표준 플랫폼 테크닉
    ∙ Adobe Systems : Webinar – online Seminar (IT & Design)
    ∙ LG전자 교육원 : 웹 그래픽 디자인 Advanced
    ∙ 나우콤 : 웹 그리드 시스템

    :: 기타
    ∙ Adobe Creative Leader
    ∙ 저서 : 한빛미디어 - 만들면서 배우는 HTML5+CSS3+jQuery 

등록안내

    ▒ 등록방법

    절차

    KIPFA회원가입 > 등록신청 > 근로자카드신청 > 수강>

    비고


    등록신청 내역은 마이페이지 > 교육센터 신청내역을 통해 확인하실 수 있습니다.      

    ★ 필독!!! ★

    수강료 정부지원 신청자의 경우,


    1. 교육신청서 제출 (▶다운받기)
    2. 개인지원금 잔액조회 (▶바로가기)
    3. 근로자카드 신청 (▶바로가기)

    를 하셔야 교육신청이 완료됩니다!

     ▶근로자카드 신청 절차 보기
    * 수강료 정부지원은 고용보험에 가입된 분만 해당됩니다.
    * 정부지원을 원치 않으시는 분들은 신청하지 않으셔도 됩니다.


    ★ 지원 대상 ★

    - 지원대상자는 반드시 고용보험 취득중이여야 하며 아래조건에 해당되어야 함.

    1)이직 예정의 근로자
    ※ 계좌발급 신청일로부터 90일 이내에 사업주와의 고용관계가 끝날 이직예정의 근로자
    2) 무급휴직·휴업자
    ※ 경영상의 이유로 90일 이상 무급휴직·휴업을 하고도 복귀하지 못한 근로자
    3) 비정규직 근로자  
      • 기간제 근로자 (기간제 및 단시간 근로자 보호 등에 관한 법률 제2조 제1호)
       * 기간의 정함이 있는 근로계약을 체결한 자
      • 단시간 근로자 (근로기준법 제2조 제1항 제8호)
       * 주된 일자리에서 1주동안 소정 근로시간이 36시간 미만인 근로자
      • 파견근로자 (파견근로자 보호 등에 관한 법률)
      • 일용근로자
       * 1개월 미만 고용된 근로자로 계좌발급 신청일 이전 90일 이내 10일 이상 근로내역이 있는 근로자
         [비정규직보호법에 의하여 2년 이상 동일 사업장에 근무하는 자는 지원대상에 해당되지 않음]
    4) 우선지원대상기업(중소기업)에 재직중인 근로자
    5) 대규모 기업에 재직중인 만50세 이상인 근로자
    6) 고용보험료 체납액이 없는 자영업자

    * 상기 조건에 해당되시는 경우, 근로자카드 신청 후 본인부담금만 납부하시면 됩니다.

    - 일반인(단, 정부지원금 지원 불가)
    - 재직자내일배움카드제 소지자

            
    ★ 본인이 지원대상자에 해당되는지 회사 고용보험 담당자 또는 노동부 고용보험지원센터(1544-1350)로 연락하여 신청 전 미리 확인해주세요.

    ======================================================
    * 근로자 직업능력개발훈련 과정 정부지원금액 *
      정규직 : 402,264원 / 비정규직 : 502,830원 / 일반 : 해당無

    * 본인부담금(실 수강료) *
    정규직 : 182,736원 / 비정규직 : 82,170원 / 일반 : 585,000원
    ======================================================


     등록안내

    등록비

    비고교육비 : 585,000원
    (일반회원, 평가위원, 개인정회원, 단체회원사 소속 정회원)         

    ∙ 사전등록 후 교육당일 카드결제만 지원
    ∙ 강좌별 분납결제는 지원되지 않음
    ∙ < 환불규정 보기>
      * 근로자 직업능력개발훈련으로 신청시 개인부담금액만 환불규정에 준함

    결제방법

    현장카드결제∙ 개강일 교육센터 방문 후, 현장에서 결제 (근로자카드 등)

    계산서 
    및 
    증명서

    등록확인서∙ 등록확인 및 결제여부확인은 참가신청 버튼을 클릭하면 확인가능
    수강확인증∙ 종강일에 수료증 발급

    기타사항

    비고∙ 강의실에서 사진촬영 및 동영상촬영은 불가합니다.
    ∙ 주차는 지원되지 않습니다.
    ∙ 인원 미달 시 폐강될 수 있습니다.

     교육문의

    담당

    서정호 과장

    김자람 연구원

     전화 070-8672-6616 / 메일 jhseo@kipfa.or.kr

     전화 02-874-8702 / 팩스 02-874-8738 / 메일 jaram122@kipfa.or.kr



hosting.kr