2019. 2. 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
ㆍ박스가 보이는 순서 |
정을수 위원
KIPFA 웹표준분과
|
2019. 2. 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. 2. 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. 2. 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. 2. 27. (수)
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. 2. (토)
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. 6. (수)
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. 9. (토)
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. 3. 13. (수)
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. 16. (토)
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. 3. 20. (수)
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. 23. (토)
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. 3. 27. (수)
19:00~22:00 |
CSS3의 새로운 계산, 범위, 선택 방법
ㆍ새로운 계산식
ㆍ범위
ㆍ다양하고 강력한 선택자
반응형웹에서 중앙 정렬
ㆍposition을 사용한 정렬
변하는 상자안의 이미지 다루기
ㆍ<'picture><'source>
ㆍsrcset속성
%, em, vm, vh 을 이용한 박스 사이징
ㆍem과 %
ㆍmin-width,height / max-width,height
플렉서블하게 박스 다루기
ㆍ블로그 플렉서블하게 만들기
ㆍ웹사이트 플렉서블하게 만들기
미디어쿼리와 뷰포트
ㆍ디바이스 사이즈의 이해
ㆍ미디어 쿼리
반응형 웹 만들기 실습
ㆍ반응하는 블로그 만들기
ㆍ반응하는 사이트 만들기 |
|
2019. 3. 30. (토)
10:00~13:00 |
CSS3의 새로운 계산, 범위, 선택 방법
ㆍ새로운 계산식
ㆍ범위
ㆍ다양하고 강력한 선택자
반응형웹에서 중앙 정렬
ㆍposition을 사용한 정렬
변하는 상자안의 이미지 다루기
ㆍ<'picture><'source>
ㆍsrcset속성
%, em, vm, vh 을 이용한 박스 사이징
ㆍem과 %
ㆍmin-width,height / max-width,height
플렉서블하게 박스 다루기
ㆍ블로그 플렉서블하게 만들기
ㆍ웹사이트 플렉서블하게 만들기
미디어쿼리와 뷰포트
ㆍ디바이스 사이즈의 이해
ㆍ미디어 쿼리
반응형 웹 만들기 실습
ㆍ반응하는 블로그 만들기
ㆍ반응하는 사이트 만들기 |
|
2019. 4. 3. (수)
19:00~22:00 |
CSS3의 새로운 계산, 범위, 선택 방법
ㆍ새로운 계산식
ㆍ범위
ㆍ다양하고 강력한 선택자
반응형웹에서 중앙 정렬
ㆍposition을 사용한 정렬
변하는 상자안의 이미지 다루기
ㆍ<'picture><'source>
ㆍsrcset속성
%, em, vm, vh 을 이용한 박스 사이징
ㆍem과 %
ㆍmin-width,height / max-width,height
플렉서블하게 박스 다루기
ㆍ블로그 플렉서블하게 만들기
ㆍ웹사이트 플렉서블하게 만들기
미디어쿼리와 뷰포트
ㆍ디바이스 사이즈의 이해
ㆍ미디어 쿼리
반응형 웹 만들기 실습
ㆍ반응하는 블로그 만들기
ㆍ반응하는 사이트 만들기 |
|
2019. 4. 6. (토)
10:00~13:00 |
CSS3의 새로운 계산, 범위, 선택 방법
ㆍ새로운 계산식
ㆍ범위
ㆍ다양하고 강력한 선택자
반응형웹에서 중앙 정렬
ㆍposition을 사용한 정렬
변하는 상자안의 이미지 다루기
ㆍ<'picture><'source>
ㆍsrcset속성
%, em, vm, vh 을 이용한 박스 사이징
ㆍem과 %
ㆍmin-width,height / max-width,height
플렉서블하게 박스 다루기
ㆍ블로그 플렉서블하게 만들기
ㆍ웹사이트 플렉서블하게 만들기
미디어쿼리와 뷰포트
ㆍ디바이스 사이즈의 이해
ㆍ미디어 쿼리
반응형 웹 만들기 실습
ㆍ반응하는 블로그 만들기
ㆍ반응하는 사이트 만들기 |
|