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

단과교육과정

CSS 전문가 양성 과정<3.6>

교육센터 신청내역 보기

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

정규교육과정 소개

참가신청

정규교육과정 개요

기간 2019년 03월 06일 (수) 오후 7:00 ~ 2019년 04월 27일 (토) 오후 1:00
인원 20명
장소 (사)한국인터넷전문가협회 논현 교육장 약도보기
주최 한국인터넷전문가협회 평생교육원
주관 한국인터넷전문가협회 평생교육원
후원
목적
참여대상 - 웹프론트엔드 개발자로 입문하고 싶은 분들
- 자신의 디자인을 웹 화면으로 보여주고 싶은 웹디자이너
- 핵심 개념을 제대로 익히고 싶은 웹퍼블리셔
경품이미지

정규교육과정 프로그램

구분 강의 주제 및 내용 강사
2019. 3. 6. (수)
19:00~22:00

기초 스타일링(1)
ㆍHTML에 CSS 적용하기
ㆍCSS 기초 문법
ㆍreset.css 준비하기
ㆍid와 class 사용하기
ㆍ기초선택자, 가상선택자
ㆍfont 스타일링
ㆍtext 스타일링

기초 스타일링(2)
ㆍ단위
ㆍ상속
ㆍ우선순위
ㆍ속성선택자

박스다루기-1
ㆍ박스로 생각하기
ㆍ박스의 성질
ㆍ박스의 종류
ㆍ넓이와 높이
ㆍ여백과 간격

박스다루기-2
ㆍ선긋기
ㆍ배경색과 배경이미지
ㆍoverflow, display, visibillity

배치하기-1
ㆍ웹에서의 배치란?
ㆍ마크업에서 배치까지
ㆍ관계성 있는 배치
ㆍblock formatted context
ㆍinline formatted context
ㆍposition:relative
ㆍ플롯팅
ㆍ클리어링

배치하기-2
ㆍ관계성 없는 배치
ㆍposition:absolute
ㆍposition:relative
ㆍposition:fixed
ㆍ박스가 보이는 순서
정을수 위원
KIPFA 웹표준분과
2019. 3. 9. (토)
10:00~13:00

기초 스타일링(1)
ㆍHTML에 CSS 적용하기
ㆍCSS 기초 문법
ㆍreset.css 준비하기
ㆍid와 class 사용하기
ㆍ기초선택자, 가상선택자
ㆍfont 스타일링
ㆍtext 스타일링

기초 스타일링(2)
ㆍ단위
ㆍ상속
ㆍ우선순위
ㆍ속성선택자

박스다루기-1
ㆍ박스로 생각하기
ㆍ박스의 성질
ㆍ박스의 종류
ㆍ넓이와 높이
ㆍ여백과 간격

박스다루기-2
ㆍ선긋기
ㆍ배경색과 배경이미지
ㆍoverflow, display, visibillity

배치하기-1
ㆍ웹에서의 배치란?
ㆍ마크업에서 배치까지
ㆍ관계성 있는 배치
ㆍblock formatted context
ㆍinline formatted context
ㆍposition:relative
ㆍ플롯팅
ㆍ클리어링

배치하기-2
ㆍ관계성 없는 배치
ㆍposition:absolute
ㆍposition:relative
ㆍposition:fixed
ㆍ박스가 보이는 순서


2019. 3. 13. (수)
19:00~22:00

기초 스타일링(1)
ㆍHTML에 CSS 적용하기
ㆍCSS 기초 문법
ㆍreset.css 준비하기
ㆍid와 class 사용하기
ㆍ기초선택자, 가상선택자
ㆍfont 스타일링
ㆍtext 스타일링

기초 스타일링(2)
ㆍ단위
ㆍ상속
ㆍ우선순위
ㆍ속성선택자

박스다루기-1
ㆍ박스로 생각하기
ㆍ박스의 성질
ㆍ박스의 종류
ㆍ넓이와 높이
ㆍ여백과 간격

박스다루기-2
ㆍ선긋기
ㆍ배경색과 배경이미지
ㆍoverflow, display, visibillity

배치하기-1
ㆍ웹에서의 배치란?
ㆍ마크업에서 배치까지
ㆍ관계성 있는 배치
ㆍblock formatted context
ㆍinline formatted context
ㆍposition:relative
ㆍ플롯팅
ㆍ클리어링

배치하기-2
ㆍ관계성 없는 배치
ㆍposition:absolute
ㆍposition:relative
ㆍposition:fixed
ㆍ박스가 보이는 순서


2019. 3. 16. (토)
10:00~13:00

기초 스타일링(1)
ㆍHTML에 CSS 적용하기
ㆍCSS 기초 문법
ㆍreset.css 준비하기
ㆍid와 class 사용하기
ㆍ기초선택자, 가상선택자
ㆍfont 스타일링
ㆍtext 스타일링

기초 스타일링(2)
ㆍ단위
ㆍ상속
ㆍ우선순위
ㆍ속성선택자

박스다루기-1
ㆍ박스로 생각하기
ㆍ박스의 성질
ㆍ박스의 종류
ㆍ넓이와 높이
ㆍ여백과 간격

박스다루기-2
ㆍ선긋기
ㆍ배경색과 배경이미지
ㆍoverflow, display, visibillity

배치하기-1
ㆍ웹에서의 배치란?
ㆍ마크업에서 배치까지
ㆍ관계성 있는 배치
ㆍblock formatted context
ㆍinline formatted context
ㆍposition:relative
ㆍ플롯팅
ㆍ클리어링

배치하기-2
ㆍ관계성 없는 배치
ㆍposition:absolute
ㆍposition:relative
ㆍposition:fixed
ㆍ박스가 보이는 순서


2019. 3. 20. (수)
19:00~22:00

기초 스타일링(1)
ㆍHTML에 CSS 적용하기
ㆍCSS 기초 문법
ㆍreset.css 준비하기
ㆍid와 class 사용하기
ㆍ기초선택자, 가상선택자
ㆍfont 스타일링
ㆍtext 스타일링

기초 스타일링(2)
ㆍ단위
ㆍ상속
ㆍ우선순위
ㆍ속성선택자

박스다루기-1
ㆍ박스로 생각하기
ㆍ박스의 성질
ㆍ박스의 종류
ㆍ넓이와 높이
ㆍ여백과 간격

박스다루기-2
ㆍ선긋기
ㆍ배경색과 배경이미지
ㆍoverflow, display, visibillity

배치하기-1
ㆍ웹에서의 배치란?
ㆍ마크업에서 배치까지
ㆍ관계성 있는 배치
ㆍblock formatted context
ㆍinline formatted context
ㆍposition:relative
ㆍ플롯팅
ㆍ클리어링

배치하기-2
ㆍ관계성 없는 배치
ㆍposition:absolute
ㆍposition:relative
ㆍposition:fixed
ㆍ박스가 보이는 순서


2019. 3. 23. (토)
10:00~13:00

기초 스타일링(1)
ㆍHTML에 CSS 적용하기
ㆍCSS 기초 문법
ㆍreset.css 준비하기
ㆍid와 class 사용하기
ㆍ기초선택자, 가상선택자
ㆍfont 스타일링
ㆍtext 스타일링

기초 스타일링(2)
ㆍ단위
ㆍ상속
ㆍ우선순위
ㆍ속성선택자

박스다루기-1
ㆍ박스로 생각하기
ㆍ박스의 성질
ㆍ박스의 종류
ㆍ넓이와 높이
ㆍ여백과 간격

박스다루기-2
ㆍ선긋기
ㆍ배경색과 배경이미지
ㆍoverflow, display, visibillity

배치하기-1
ㆍ웹에서의 배치란?
ㆍ마크업에서 배치까지
ㆍ관계성 있는 배치
ㆍblock formatted context
ㆍinline formatted context
ㆍposition:relative
ㆍ플롯팅
ㆍ클리어링

배치하기-2
ㆍ관계성 없는 배치
ㆍposition:absolute
ㆍposition:relative
ㆍposition:fixed
ㆍ박스가 보이는 순서


2019. 3. 27. (수)
19:00~22:00

실습1. 포털사이트의 게임 소개 영역

실습2. 포털사이트의 자동차 소식 영역

실습3. 포털사이트의 캐스트 영역

실습4. 포털사이트의 만화/웹툰 영역

실습5. 구조설계와 레이아웃
전체적인 컨텐츠와 디자인을 검토하여 CSS구조와 레이아웃 구조를 설계하며, 컨텐츠와 디자인 특성에 맞게 마크업 시작하기
(주요포인트: CSS구조, 네이밍규칙, 디자인구조파악, float&clear)

실습6. 브래드커럼스 / 서브메뉴 / 풋터
접근성을 고려한 마크업과 추가되는 메뉴를 고려해 확장성있는 메뉴와 풋터 작업하기
(주요포인트: vertical-align, background, float&clear)

실습7. 회사소개 페이지
각기 다른 컨텐츠들을 관리하기 쉽도록 규칙을 만들어 작업하기
(주요포인트: 네이밍규칙, background, 음수마진, float&clear)

실습8. 제품, 서비스소개 페이지
동일한 컨텐츠를 최소한의 CSS를 사용하여 효율성있게 작업하기

실습9. 입력양식 / 게시판
접근성있는 입력양식을 디자인 상황에 맞게 만들고
한 사이트에 사용되는 다양한 테이블에 규칙을 부여하고 스타일링 작업하기

실습10. 상단메뉴
자바스크립트를 고려하고 확장성 있는 메뉴를 위한 마크업과 스타일링하기

실습11. 메인 페이지
조밀하고 복잡한 메인 페이지 실습하기


2019. 3. 30. (토)
10:00~13:00

실습1. 포털사이트의 게임 소개 영역

실습2. 포털사이트의 자동차 소식 영역

실습3. 포털사이트의 캐스트 영역

실습4. 포털사이트의 만화/웹툰 영역

실습5. 구조설계와 레이아웃
전체적인 컨텐츠와 디자인을 검토하여 CSS구조와 레이아웃 구조를 설계하며, 컨텐츠와 디자인 특성에 맞게 마크업 시작하기
(주요포인트: CSS구조, 네이밍규칙, 디자인구조파악, float&clear)

실습6. 브래드커럼스 / 서브메뉴 / 풋터
접근성을 고려한 마크업과 추가되는 메뉴를 고려해 확장성있는 메뉴와 풋터 작업하기
(주요포인트: vertical-align, background, float&clear)

실습7. 회사소개 페이지
각기 다른 컨텐츠들을 관리하기 쉽도록 규칙을 만들어 작업하기
(주요포인트: 네이밍규칙, background, 음수마진, float&clear)

실습8. 제품, 서비스소개 페이지
동일한 컨텐츠를 최소한의 CSS를 사용하여 효율성있게 작업하기

실습9. 입력양식 / 게시판
접근성있는 입력양식을 디자인 상황에 맞게 만들고
한 사이트에 사용되는 다양한 테이블에 규칙을 부여하고 스타일링 작업하기

실습10. 상단메뉴
자바스크립트를 고려하고 확장성 있는 메뉴를 위한 마크업과 스타일링하기

실습11. 메인 페이지
조밀하고 복잡한 메인 페이지 실습하기


2019. 4. 3. (수)
19:00~22:00

실습1. 포털사이트의 게임 소개 영역

실습2. 포털사이트의 자동차 소식 영역

실습3. 포털사이트의 캐스트 영역

실습4. 포털사이트의 만화/웹툰 영역

실습5. 구조설계와 레이아웃
전체적인 컨텐츠와 디자인을 검토하여 CSS구조와 레이아웃 구조를 설계하며, 컨텐츠와 디자인 특성에 맞게 마크업 시작하기
(주요포인트: CSS구조, 네이밍규칙, 디자인구조파악, float&clear)

실습6. 브래드커럼스 / 서브메뉴 / 풋터
접근성을 고려한 마크업과 추가되는 메뉴를 고려해 확장성있는 메뉴와 풋터 작업하기
(주요포인트: vertical-align, background, float&clear)

실습7. 회사소개 페이지
각기 다른 컨텐츠들을 관리하기 쉽도록 규칙을 만들어 작업하기
(주요포인트: 네이밍규칙, background, 음수마진, float&clear)

실습8. 제품, 서비스소개 페이지
동일한 컨텐츠를 최소한의 CSS를 사용하여 효율성있게 작업하기

실습9. 입력양식 / 게시판
접근성있는 입력양식을 디자인 상황에 맞게 만들고
한 사이트에 사용되는 다양한 테이블에 규칙을 부여하고 스타일링 작업하기

실습10. 상단메뉴
자바스크립트를 고려하고 확장성 있는 메뉴를 위한 마크업과 스타일링하기

실습11. 메인 페이지
조밀하고 복잡한 메인 페이지 실습하기


2019. 4. 6. (토)
10:00~13:00

실습1. 포털사이트의 게임 소개 영역

실습2. 포털사이트의 자동차 소식 영역

실습3. 포털사이트의 캐스트 영역

실습4. 포털사이트의 만화/웹툰 영역

실습5. 구조설계와 레이아웃
전체적인 컨텐츠와 디자인을 검토하여 CSS구조와 레이아웃 구조를 설계하며, 컨텐츠와 디자인 특성에 맞게 마크업 시작하기
(주요포인트: CSS구조, 네이밍규칙, 디자인구조파악, float&clear)

실습6. 브래드커럼스 / 서브메뉴 / 풋터
접근성을 고려한 마크업과 추가되는 메뉴를 고려해 확장성있는 메뉴와 풋터 작업하기
(주요포인트: vertical-align, background, float&clear)

실습7. 회사소개 페이지
각기 다른 컨텐츠들을 관리하기 쉽도록 규칙을 만들어 작업하기
(주요포인트: 네이밍규칙, background, 음수마진, float&clear)

실습8. 제품, 서비스소개 페이지
동일한 컨텐츠를 최소한의 CSS를 사용하여 효율성있게 작업하기

실습9. 입력양식 / 게시판
접근성있는 입력양식을 디자인 상황에 맞게 만들고
한 사이트에 사용되는 다양한 테이블에 규칙을 부여하고 스타일링 작업하기

실습10. 상단메뉴
자바스크립트를 고려하고 확장성 있는 메뉴를 위한 마크업과 스타일링하기

실습11. 메인 페이지
조밀하고 복잡한 메인 페이지 실습하기


2019. 4. 10. (수)
19:00~22:00

실습1. 포털사이트의 게임 소개 영역

실습2. 포털사이트의 자동차 소식 영역

실습3. 포털사이트의 캐스트 영역

실습4. 포털사이트의 만화/웹툰 영역

실습5. 구조설계와 레이아웃
전체적인 컨텐츠와 디자인을 검토하여 CSS구조와 레이아웃 구조를 설계하며, 컨텐츠와 디자인 특성에 맞게 마크업 시작하기
(주요포인트: CSS구조, 네이밍규칙, 디자인구조파악, float&clear)

실습6. 브래드커럼스 / 서브메뉴 / 풋터
접근성을 고려한 마크업과 추가되는 메뉴를 고려해 확장성있는 메뉴와 풋터 작업하기
(주요포인트: vertical-align, background, float&clear)

실습7. 회사소개 페이지
각기 다른 컨텐츠들을 관리하기 쉽도록 규칙을 만들어 작업하기
(주요포인트: 네이밍규칙, background, 음수마진, float&clear)

실습8. 제품, 서비스소개 페이지
동일한 컨텐츠를 최소한의 CSS를 사용하여 효율성있게 작업하기

실습9. 입력양식 / 게시판
접근성있는 입력양식을 디자인 상황에 맞게 만들고
한 사이트에 사용되는 다양한 테이블에 규칙을 부여하고 스타일링 작업하기

실습10. 상단메뉴
자바스크립트를 고려하고 확장성 있는 메뉴를 위한 마크업과 스타일링하기

실습11. 메인 페이지
조밀하고 복잡한 메인 페이지 실습하기


2019. 4. 13. (토)
10:00~13:00

실습1. 포털사이트의 게임 소개 영역

실습2. 포털사이트의 자동차 소식 영역

실습3. 포털사이트의 캐스트 영역

실습4. 포털사이트의 만화/웹툰 영역

실습5. 구조설계와 레이아웃
전체적인 컨텐츠와 디자인을 검토하여 CSS구조와 레이아웃 구조를 설계하며, 컨텐츠와 디자인 특성에 맞게 마크업 시작하기
(주요포인트: CSS구조, 네이밍규칙, 디자인구조파악, float&clear)

실습6. 브래드커럼스 / 서브메뉴 / 풋터
접근성을 고려한 마크업과 추가되는 메뉴를 고려해 확장성있는 메뉴와 풋터 작업하기
(주요포인트: vertical-align, background, float&clear)

실습7. 회사소개 페이지
각기 다른 컨텐츠들을 관리하기 쉽도록 규칙을 만들어 작업하기
(주요포인트: 네이밍규칙, background, 음수마진, float&clear)

실습8. 제품, 서비스소개 페이지
동일한 컨텐츠를 최소한의 CSS를 사용하여 효율성있게 작업하기

실습9. 입력양식 / 게시판
접근성있는 입력양식을 디자인 상황에 맞게 만들고
한 사이트에 사용되는 다양한 테이블에 규칙을 부여하고 스타일링 작업하기

실습10. 상단메뉴
자바스크립트를 고려하고 확장성 있는 메뉴를 위한 마크업과 스타일링하기

실습11. 메인 페이지
조밀하고 복잡한 메인 페이지 실습하기


2019. 4. 17. (수)
19:00~22:00

CSS3의 새로운 계산, 범위, 선택 방법
ㆍ새로운 계산식
ㆍ범위
ㆍ다양하고 강력한 선택자

반응형웹에서 중앙 정렬
ㆍposition을 사용한 정렬

변하는 상자안의 이미지 다루기
ㆍ<'picture><'source>
ㆍsrcset속성

%, em, vm, vh 을 이용한 박스 사이징
ㆍem과 %
ㆍmin-width,height / max-width,height

플렉서블하게 박스 다루기
ㆍ블로그 플렉서블하게 만들기
ㆍ웹사이트 플렉서블하게 만들기

미디어쿼리와 뷰포트
ㆍ디바이스 사이즈의 이해
ㆍ미디어 쿼리

반응형 웹 만들기 실습
ㆍ반응하는 블로그 만들기
ㆍ반응하는 사이트 만들기


2019. 4. 20. (토)
10:00~13:00

CSS3의 새로운 계산, 범위, 선택 방법
ㆍ새로운 계산식
ㆍ범위
ㆍ다양하고 강력한 선택자

반응형웹에서 중앙 정렬
ㆍposition을 사용한 정렬

변하는 상자안의 이미지 다루기
ㆍ<'picture><'source>
ㆍsrcset속성

%, em, vm, vh 을 이용한 박스 사이징
ㆍem과 %
ㆍmin-width,height / max-width,height

플렉서블하게 박스 다루기
ㆍ블로그 플렉서블하게 만들기
ㆍ웹사이트 플렉서블하게 만들기

미디어쿼리와 뷰포트
ㆍ디바이스 사이즈의 이해
ㆍ미디어 쿼리

반응형 웹 만들기 실습
ㆍ반응하는 블로그 만들기
ㆍ반응하는 사이트 만들기


2019. 4. 24. (수)
19:00~22:00

CSS3의 새로운 계산, 범위, 선택 방법
ㆍ새로운 계산식
ㆍ범위
ㆍ다양하고 강력한 선택자

반응형웹에서 중앙 정렬
ㆍposition을 사용한 정렬

변하는 상자안의 이미지 다루기
ㆍ<'picture><'source>
ㆍsrcset속성

%, em, vm, vh 을 이용한 박스 사이징
ㆍem과 %
ㆍmin-width,height / max-width,height

플렉서블하게 박스 다루기
ㆍ블로그 플렉서블하게 만들기
ㆍ웹사이트 플렉서블하게 만들기

미디어쿼리와 뷰포트
ㆍ디바이스 사이즈의 이해
ㆍ미디어 쿼리

반응형 웹 만들기 실습
ㆍ반응하는 블로그 만들기
ㆍ반응하는 사이트 만들기


2019. 4. 27. (토)
10:00~13:00

CSS3의 새로운 계산, 범위, 선택 방법
ㆍ새로운 계산식
ㆍ범위
ㆍ다양하고 강력한 선택자

반응형웹에서 중앙 정렬
ㆍposition을 사용한 정렬

변하는 상자안의 이미지 다루기
ㆍ<'picture><'source>
ㆍsrcset속성

%, em, vm, vh 을 이용한 박스 사이징
ㆍem과 %
ㆍmin-width,height / max-width,height

플렉서블하게 박스 다루기
ㆍ블로그 플렉서블하게 만들기
ㆍ웹사이트 플렉서블하게 만들기

미디어쿼리와 뷰포트
ㆍ디바이스 사이즈의 이해
ㆍ미디어 쿼리

반응형 웹 만들기 실습
ㆍ반응하는 블로그 만들기
ㆍ반응하는 사이트 만들기


정규교육과정 강사소개

교육센터 강사진 보기

  • 강사 사진
    KIPFA 웹표준분과   정을수 위원

    현) (사)한국인터넷전문가협회 웹표준분과 위원
    전) 펜타브리드 디렉터 ­ 수석
    전) 메가존 웹표준화팀 ­ 팀장
    전) 프리랜스 디자이너

    주요프로젝트
    삼성에스원 - PM
    아산정주영닷컴 - PM
    현대자동차 국내판매사이트 - UI 디렉팅
    삼성haposm - PM
    코스콤 웹접근성 - 디렉팅
    엘지유플러스 ­ UI개발 PL
    신한카드 ­ UI 개발 PL
    삼성모바일닷컴 - UI개발 PL

     

     

등록안내

    ★ 정부지원을 받아 수강하는 경우, 개강 후 교육취소 절대 불가!

    ★★★★★★★★★★★★★★★교육신청서 (▶ 다운받기)★★★★★★★★★★★★★★★


    ▒ 일반 신청 안내
    수강료 ∙ 일반회원, 단체회원사 소속 정회원, 개인정회원 : 705,550원
    카드결제 ∙ 등록신청 후, 본 웹사이트에서 바로 결제
    : 추후 결제시, 로그인 후 마이페이지> 교육센터 신청내역 클릭하여 결제진행
    KIPFA회원을 위한 2019년 2월 카드사 "무이자할부" 이벤트
    실시간이체 ∙ 등록신청 후, 본 웹사이트에서 바로 결제
    : 추후 결제시, 로그인 후 마이페이지> 교육센터 신청내역 클릭하여 결제진행
    무통장입금 ∙ KEB하나 581-910038-91904
    (사)한국인터넷전문가협회 (등록신청 후 3일 이내 입금, 미확인시 자동취소)
    ∙ 계산서발행을 원하시는 경우 하단의 담당자 메일로 사업자등록증 발송바람.
    한국인터넷전문가협회사업자등록증
    (사)한국인터넷전문가 협회통장사본
    『교육비 환불규정』


    - 한국인터넷전문가협회는 「소비자분쟁해결기준」을 준수합니다.
    - 모든 일수는 영업일을 기준으로 합니다.
    - 강의 진행 일자 산정 시 환불 요청을 한 당일은 진행 일수에 포함됩니다.
    - 강의가 시작되는 당일은 강의를 듣지 않았더라도 수업개시일 이후 환불 요청사항에 해당합니다.


    ▒ 공통 안내
    수강신청확인 ∙ 등록확인 및 결제여부확인은 마이페이지>교육센터 신청내역에서 확인가능
    수료증 ∙ 종강일에 배부(출석률 80% 이상일 경우)​​
    비고 ∙ 준비물 : 필기도구
    ∙ 주차지원은 되지 않습니다. 대중교통을 이용하시기 바랍니다.
    ∙ 강의실에서 사진촬영 및 동영상촬영은 불가합니다.
    ∙ 인원 미달 시 폐강될 수 있습니다.

    ▒ 교육문의
    담당 

    정지우 과장

    전화 : 070-8672-6617 /팩스 : 02-874-8738 / 메일 : wangjiwoo@kipfa.or.kr

신청하기



hosting.kr