HTML5+CSS3 & 반응형 모바일웹

일반
재직자

다른 훈련 과정 보기

닫기

국가직무능력표준(NCS)은 무엇인가요?

국가직무능력표준(NCS, National Competency Standards)은 산업현장에서 직무를 수행하기 위해 요구되는 지식·기술·태도 등의 내용을 국가가 체계화한 것입니다.

닫기

분야

다른 분야 · 훈련과정을 한 눈에 볼 수 있습니다.

과정소개
커리큘럼
강사소개
포트폴리오
수강후기
추천과정

HTML5+CSS3 & 반응형 모바일웹

오랜 시간동안 사용되어 오던 XHTML+CSS2의 웹 페이지 제작기술은 그래픽적인 요소를 표현하기 위해서 이미지를 사용해야 합니다. 그리고 화려한 시각적 효과 혹은 인터렉티브한 요소를 사용하기 위해서는 Flash나 다른 ActiveX와 같은 요소를 사용했습니다. 무엇보다 표준화 되지 않은 제작기술의 범람으로 호환성이 높은 웹페이지를 제작하는데 많은 어려움이 있었습니다.

HTML5는 이러한 웹 페이지 제작의 어려움들을 해소하기 위해서 고안되었습니다.
더욱 정확한 의미를 가진 태그 요소들과, 그래픽적인 부분을 보완하기 위한 다양한 언어툴, 멀티미디어를 HTML 자체에서 지원하기 위한 방법을 제공하는 등 HTML5로 제작된 웹 페이지는 기존의 XHTML 기반의 웹 페이지보다 더욱 더 인터렉티브해 집니다.
특히 CSS3에서 추가된 “미디어 쿼리”기능은 한 번의 작업으로 다양한 해상도에 따라 각기 다른 UI 형태를 제공할 수 있도록 하여 PC + 테블릿 + 스마트 폰을 한번에 지원하는 “반응형 웹”이라는 새로운 제작 기법을 탄생시켰습니다.

이 과정에서는 기존의 웹 표준 기술 위에 새로워진 HTML5와 CSS3 요소를 더하여 인터렉티브한 반응형 웹페이지 기술을 제작할 수 있는 웹 퍼블리싱 기법들을 소개합니다. CSS3의 코드를 편리하게 작성할 수 있도록 도와주는 LESS를 기반으로 한 Twitter Bootstrap3를 활용한 반응형 웹페이지 제작 기법도 소개하여 최고의 웹 퍼블리셔로 성장할 수 있도록 도와드립니다.

HTML5와 CSS3의 새로워진 내용들을 습득하고자 하는 웹 디자이너나 웹 퍼블리셔
HTML5를 기반으로 하는 웹 페이지 및 모바일 웹 페이지의 제작과정을 이해하고자 하는 웹 디자이너나 웹 퍼블리셔
최반응형 웹을 구성하고자 하는 웹 디자이너나 웹 퍼블리셔

과정소개
커리큘럼
강사소개
포트폴리오
수강후기
추천과정

html5+css3 & 반응형 모바일웹
강의과목	html5+css3 & 반응형 모바일웹
1일차	html5의 개요 웹 페이지와 웹 어플리케이션 html5의 탄생 html5 소개 플러그인이 필요 없는 웹 html5의 현재와 미래 작업 환경 구성하기 사용할 브라우저의 선정 aptana studio의 설치 aptana studio의 설정 핸드폰 접속을 위한 추가 설정 핸드폰 접속을 위한 추가 설정 html5의 기본 문서 구조 html5를 지원하지 않는 브라우저에 대한 처리 html5를 지원하지 않는 브라우저에 대한 처리 새롭게 추가된 시멘틱 태그들 웹 접근성과 시멘틱 웹 문서의 구조를 표현하기 위한 태그 사파리 브라우저의 “읽기도구”를 사용하기 위한 웹 페이지 콘텐츠 구성법 내용을 강조하기 위한 태그
2일차	멀티미디어 지원 태그 이 단원에서 필요한 멀티미디어 파일의 준비 음악 재생을 위한 [ audio ]태그 동영상 재생을 위한 [ video ]태그 html5 폼 요소 기존의 form요소 살펴보기 새롭게 추가된 html5 폼 요소 input태그에 추가된 공통 속성 css3 시작하기 css의 표현방법 css의 셀렉터와 구체성 단위 css3의 새로운 가상 클래스 브라우저마다 다르게 구현되는 프로퍼티
3일차	텍스트 / 문단 관련 효과 줄바꿈을 제어하는 속성 단 나누기를 지원하는 속성 웹 폰트 지원 기능과 구글 웹 폰트 사용하기 텍스트 그림자 효과 새로워진 색상 처리 방법들 투명도 설정하기 그라데이션 효과 css3로 제작된 타이틀 바 예제 박스 관련 효과 css2의 박스 관련 속성 박스 투명도 설정하기 둥근 모서리 효과 박스 그림자 효과 이미지 태두리 효과 css3를 활용한 버튼 구현하기 css3 button generator
4일차	배경이미지 관련 효과 css2에서의 배경이미지 관련 속성 배경이미지 중첩 적용 배경이미지 적용 범위 지정 배경이미지 크기 조절 포털사이트에서 사용하는 이미지 클립핑 기법 아이콘 리스트 예제 요소의 형태 변환 - transform 회전속성 크기 변환 속성 위치 변환 속성 기울기 변환 속성 형태 변환 예제 css 애니메이션 효과 css3 transition 애니메이션 효과가 적용된 submenu 예제 애니메이션 효과를 적용한 아코디언 메뉴 예제 애니메이션 트위닝 효과
5일차	html5 modile web site demo 작업 내용 살펴보기 실행결과 미리보기 파일 구성 이미지 파일 메인페이지 작업 - index.html html 태그 구성 공통 파일의 준비 메인페이지 스타일 시트 구성 서브페이지 작업 - a.html html 태그 구성 공통요소 적용 서브페이지 스타일 시트 구성
6일차	twitter bootstrap3 시작하기 twitter bootstrap3 소개 작업을 위한 준비 hello bootstrap3 기본 css 클래스 제목의 표현 문단의 표현 텍스트 효과 약어를 표현하는 태그 주소/연락처/저작권 정보 표현하기 인용문 목록정의 태그 원본 그대로를 표현하는 [ pre ]태그 이미지 효과 버튼 지원 기능 table의 사용 float 처리 기타 유용한 클래스
7일차	반응형 웹 구성을 도와주는 기능들 장치에 따른 표시 여부 설정하기 부트스트랩 미디어 쿼리 그리드 시스템 bootstrap3. component (1) form icon dropdown groupbutton과 toolbar dropdown button
8일차	bootstrap3 component (2) input groups navs navbar modal collapse carousel
9일차	twitter bootstrap3 component (3) jumbotron + header breadcrumbs pagenation label badge thumbnail alerts progressbar media-list list-group well less를 통한 css 수정 방법 css 수정하기
10일차	bootstrap demo type (1) 교제 따라 해보기 기본 페이지 구성 메뉴바 변경하기 캐러셀과 이미지 적용하기 떠 있는 메뉴바와 상세 콘텐츠 추가하기 bootstrap demo type (2) 전체코드를 통하여 직접 실습해 보기

과정소개
커리큘럼
강사소개
포트폴리오
수강후기
추천과정

과정소개
커리큘럼
강사소개
포트폴리오
수강후기
추천과정

포트폴리오 더 보기 +

과정소개
커리큘럼
강사소개
포트폴리오
수강후기
추천과정

수강 후기 남깁니다.(김성근 강사님)김이*

처음 컴퓨터 활용 능력 2급을 공부하였는데 생각 한 거보다 재밌었고 학원 시설도 좋았습니다. 강의실도 쾌적하고 시설이 깔끔하였습니다. 그리고 김성근 강사님과 수업을 하였는데 지루하지 않게 설명 하시고 또 천천히 반복해서 얘기 해주셔서 놓치지 않고 잘 따라갔던 거 같습니다. 또 중간 중간 편하게 얘기해주실 때 말씀이 너무 재밌으셔서 좋은 시간이 되었습니다. 다음에 지인에게 이 학원을 추천해도 괜찮을 것 같습니다. 감사합니다.
수강후기윤경*

강사님이 설명을 잘해주셔서 이해하기 엄청 쉬웠어요.
조민규 강사님 수강 후기이하*

프리미어 프로는 이전에 독학으로 컷 편집 정도로만 사용했었고, 에프터이펙트의 경우에는 처음 다뤄보는 것이라서 걱정이 많았습니다. 걱정과 다르게 강사님께서 하나하나 꼼꼼히 짚어주시고, 사소한 질문에도 친절하게 알려주셔서 더 자신감 가지고 수업을 들을 수 있었습니다. 감사합니다.
감사합니다.고한*

컴활 1급에 대한 큰 틀을 알수 있게 되었고, 향후 부족한 부분은 수업내용과 필기 내용을 활용하여 합격하는데 큰 도움이 될 것 같습니다. 중간중간 어려운 부분도 많았지만 선생님이나 주변 동료를 통해서 수업을 듣고 이해하는데 크게 도움이 되었고 컴활1급 합격에 대한 전반적인 지식 및 기술을 습득할 수 있어서 좋았습니다. 자격증 획득에 대한 방향성을 알고 틀에 맞춰서 자격증을 획득에 대한 지식을 습득하기 용이하였습니다.
컴활 1급김현*

체계적인 커리큘럽을 통해 배울 수 있어 컴활 1급 필기와 실기 기본적인 이해와 자격증 취득 준비 과정에 많은 도움이 되었습니다. 감사합니다.
컴활2급 필기/실기 (임인규강사님) 수강후기안민*

매 수업 때마다 열정적으로 가르침 덕분에 자격증 취득에 한 걸음 가까워진 것 같습니다. 이해가 안 되는 부분이 있으면 최선을 다해 알려 주시고 잘 챙겨주신 덕분에 엑셀 공부에 도움이 많이 되었습니다. 1달 동안 너무 감사했습니다!