캠퍼스선택바로가기 주메뉴바로가기 본문바로가기

HTML5 & CSS3

  • 일반
  • 재직자
닫기

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

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

닫기

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

HTML5 & CSS3

html5, CSS3



현재의 웹 페이지 제작 기술들 중에서 가장 큰 화두는 HTML5입니다.
10여년간 꾸준히 사용 되어오던 XHTML+CSS2의 웹페이지 제작기술은 그래픽적인 요소를 표현하기 위해서 이미지를 사용하는 것 외에는 다른 대안이 없었으며 인터렉티브한 요소를 사용하기 위해서는 플래쉬나 다른 ActiveX와 같은 요소를 사용해야 했으며, 무엇보다 표준화 되지 않은 제작기술의 범람으로 크로스 브라우징이라는 당연히 적용되어야 하는 주제를 무척이나 까다로운 이슈로 남겨놓았습니다.

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

이 과정에서는 기존의 웹 표준 기술 위에 새로워진 HTML5와 CSS3 요소를 더하여 인터렉티브한 반응형 웹페이지 기술을 제작할 수 있는 웹 퍼블리싱 기법들을 소개하고, CSS3의 코드를 편리하게 작성할 수 있도록 도와주는 LESS를 기반으로 한 Twitter Bootstrap3를 활용한 반응형 웹페이지 제작 기법을 소개하여 최고의 웹 퍼블리셔로 발돋음 할 수 있도록 도와드립니다.
  • HTML5와 CSS3의 새로워진 내용들을 습득하고자 하는 웹 디자이너나 웹 퍼블리셔
  • HTML5 기반 웹 페이지 및 모바일 웹 페이지의 제작과정을 이해하고자 하는 웹 디자이너나 웹 퍼블리셔
  • 반응형 웹을 구성하고자 하는 웹 디자이너나 웹 퍼블리셔
  • 웹표준&웹접근성 가능하신분
교육과목 교육내용
HTML5 개요 및
디지털 콘텐츠
제작 기술
  • - html4와 xhtml, html5의 버전 별 차이 및 DTD 이해
  • - 의미적 마크업(Semantic Markup)
  • - 문서 구조(document structure)
  • - 구조를 나타내는 요소, 콘텐츠 모델(Content Models)
  • - 아웃라인 알고리즘(Outline Algorithm)
  • - 박스 모델(Box Model) 및 콘텐츠 모델 (Content Model)
  • - 인터렉션 요소
폼요소 활용
  • - html5 새로운 웹폼 관련 요소
  • - 동영상 및 오디오
  • - vendor-prefix 이해 및 css3 활용
CSS3 활용
  • - CSS3 Transition 을 이용한 앱과 같은 화면 전환 효과
  • - 변형(Transform), perspective를 이용한 3D 큐브 제작
  • - 비트맵이미지(canvas) 및 API, 벡터이미지(svg) 및 API
  • - 지오로케이션 및 MAP API (google map API, naver map API)
반응형 웹페이지 제작
  • - 미디어 쿼리(Media Query)
  • - Media Query의 변화와 특징 (N-screen 대응)
  • - CSS3를 지원하지 않는 브라우저(IE)에서의 CSS3 적용
  • - 반응형 웹페이지 (Responsive Web Design)
  • - 미디어 쿼리 분기점의 이해 (Break Points)
모바일 웹페이지 제작
  • - 클라이언트에 데이터를 저장
  • - 로컬저장소(Local Storage) vs 세션저장소(Session Storage)
  • - 모바일 웹의 이해, meta viewport 이해 및 적용하기
  • - Screen Density, CSS Pixels / Device Pixels
  • - 레티나 디스플레이 대응 방법, 모바일 페이지 제작
  • 조*솜
    조*솜디지털컨버전스 양성과정
  • 유*영
    유*영[NCS]웹퍼블리셔&프론트엔드 전문가
  • 함보*
    함보*[NCS] 디지털컨버전스 8기
  • 정*종
    정*종웹디자인취업과정
포트폴리오 더 보기 +
  • UI/UX 웹디자인 전문가 취업과정 김세지 쌤 정말 고맙습니다..대장*

    전공과 전혀 다른 분야를 선택해서 처음에 좀 걱정했는데
    좋은 선생님을 만난 덕분에 끝까지 잘 따라갈 수 있었어요.
    쌤이 잘 가르쳐주신 덕분에 새로운 분야에서 저의 장점을 발견할 수 있는 계기가 되었고
    앞으로도 이 길로 가도 괜찮겠다는 생각과 잘 할수 있겠다는 자신감이 생겼어요.

    처음 부터 끝까지 체계적으로 짜여진 커리큘럼과 
    학생들의 요구사항을 적극 반영해 효율적으로 수업을 조정하는 것, 
    그리고 모든 부분에서 유능하신 점이 선생님의 제일 강점인 것 같고 정말 좋았습니다.
    많이 배웠고 잘 배운 것 같습니다.

    지난 4개월 동안 정말 고생많으셨고 고마웠습니다...
    앞으로도 건강하시고 항상 웃을 일만 가득하시길 바랄게요!!

    수원 캠퍼스 직원분들 모두 감사했고
    취업지원실 쌤들 모두 한마음으로 응원해주셔서 감사했습니다.
  • ? UI/UX 웹 디자인 전문가 취업과정을 듣던 학생입니다![김세지선생님]조우*

    2017년 새해를 맞이하고 1월  어느 추운날에 우연히 찾아 강의를 듣게 되었습니다!
    짧은 시간이였지만, 정말 알차다고 생각해요. 아르바이트를 해본 경력도 없고, 기술도 없던 저에게 큰 힘이 되어주셨습니다. 그 힘에는 무엇보다 선생님의 큰 가르침이 제게 크게 다가왔어요. 항상 웃으며 '모르는 문제가 있으면 언제든 말씀하세요.' 라고 말씀하시던 선생님 덕에 저도 선생님께 부담없이 물어보고 많이 배우게 된  시간이였습니다. 언제나 한결같고 학생들보다도 부지런히 수업을 준비하시고 길잡이를 정말 잘 잡아주십니다. 꼼꼼하시고, 때론 지적이 필요하면 마다치 않으시고 지치고 힘들때마다 땅어리를 꺼져라 한 숨도 쉬어보고 여럿 고민에 휩싸인 제게 상담도 곧 잘 들어주시던, 바쁘심에도 걱정 어린 따뜻하고 친절한 말씀 얼마나 위안이 되고 힘이 되던지 덕분에 처음에서 부터 지금에까지 올 수 있던 것 같습니다. 마지막에 선생님께서 말씀하신 이야기도 감명이 깊네요. 동굴에서부터 나와 앞으로를 나아갈 꺼라는 말씀, 잊지 않겠습니다. 저에게 무엇보다도 보람되고 뜻 깊은 따스한 그런 시간이였습니다. 앞으로도 꾸준히 나아가도록 노력하겠습니다.

    항상, 감사하고 늘 밝게 웃으시던 웃음 잊지 못할 것 같아요. 앞으로도 꾸준히 나아가며 일을 해낼 것 같습니다.
     감사합니다 김세지 선생님!
  • 스마트기기 UX/UI 웹디자인(실무자양성과정) 정순범쌤 감사합니다!!강민*

    벌써 끝났다니 믿기지않아요ㅜㅜ 800시간이 이렇게 빨리갈 줄은 몰랐어요!
    길게만 느껴졌는데 벌써 수료했다니..쌤이 말씀했듯이 수료했다고 끝난게 아니니까 
    끝까지 포트폴리오 마무리해볼께요! 모르는거 있으면 쌤한테도 여쭤보고!
    귀찮게 할지도 몰라요ㅋㅋㅋㅋㅋㅋㅋ 수료하는날 쌤의 아쉬워하셨던 표정이 잊혀지지않을꺼같아요..
    막상 그때는 실감안났는데 진짜 월요일되도 학원안가고 이러니까 좀 어색해요ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
    진짜 끝난거구나 싶고~물론 알고 시작했지만 수업시간도 800시간이고 꽤 길어서
    제가 이 수업을 끝까지 잘 수료할 수 있을지  겁나기도 하고 불안했는데
    쌤이 잘 이끌어주셔서 끝까지 잘 따라올 수 있었던 것 같아요!
    지금에서야 말하지만 처음 오티때 쌤 첫인상은 강렬했지만 생각했던거랑 달랐어요ㅋㅋㅋㅋㅋㅋㅋ
    생각보다 되게 정많으시고 재치있으시구!! 
    매일 저희 학생들보다 훨씬 일찍 오셔서 수업준비하시는 모습도..! 인상깊었어요~
    뭔가 급마무리인것 같지만ㅋㅋㅋㅋㅋㅋ아직 부족하지만 제가 코딩이라는 걸  할 수 있게 될지도 몰랐는데 ㅎㅎ
    웹디자인에 대한 기초를 다진 좋은 시간이었던것 같습니당!
    정말 수고 많으셨습니다 쌤~!!
  • 길고 긴 동굴을 나가며...(존경가득 싸랑하는 김세지선생님)맛나*

    4개월동안 길었다고 생각했지만 선생님의 큰 가르침을 받고 성장해서 갑니다!

    처음 시작할 때는 4개월이라는 시간이 길게만 느껴지고 막막했지만 시간이 지날수록 점점 짧게만 느껴지고
    하루하루가 빨리 지나가는 것을 느끼며 그만큼 욕심이 생겨 열심히 했던 것 같습니다.
    선생님께서 앞에서 열정적으로 수업을 하시니 그저 뒤따라갔을 뿐인데
    비전공생이였던 저는 어느덧 반응형 웹페이지를 집에서 혼자 만들 정도로 성장해있었습니다.
    좋은 사람들과 좋은 선생님을 만나 수업을 듣다보니 시간 가는줄 모르고 지나갔습니다.
    이제 저는 이 자리를 떠나 새로운 환경으로 이동하겠지만 4개월이라는 금같은 시간이 제게 
    거름이 되어 더더욱이 빛나게 되리라 생각합니다.

    되돌아 생각해보면 김세지 선생님의 가르침을 받고 떠나는 제가 행운이라고 생각합니다.
    언제나 선생님의 가르침을 잊지 않고 행하며 발전하는 디자이너가 되어 
    저같은 비전공자인 사람들에게 용기를 줄 수 있는 사람이 될겁니다.

    늘 앞에서 열정 가득 아프신 몸을 숨기며 수업하시던 선생님이 존경스럽기도 하지만 
    한편으로는 이제 몸 좀 관리 잘 하셔서 덜 아프셨으면 좋겠습니다.
    앞으로도 몸 관리 잘하셔서 사회에서는 편한 언니같은 선생님으로 쭉 계셨으면 좋겠습니다.
    여태 만났던 선생님 중에 제일 열정 가득하셨던 김세지 선생님
    앞으로도 건강하고 아프지 마세요ㅎㅎ

    좋은 스승을 두어 행운인 저는 반장이였던 김은송입니다.
    그동안 감사했습니다! 건강하세요!
    자랑스러운 제자가 되어 다시 찾아올게요
    그때까지 계셔야해여ㅎㅎㅎㅎㅎ
    사랑해요 쌤♥
  • 김세지 선생님께 실무적으로, 인간적으로 많이 배울 수 있었던 4개월워니*

    김세지쌤과 함께 11명의 학생들과 함께한 뜻깊은 4개월 이였어요. 
    선생님이지만 때로는 언니로써도 상담해주시고 조언해주셔서 정말 감사합니다! 
    쌤밑에서 배우게되서 정말 다행이에요! 세지쌤 진짜 만능.. 너무 신기해요 ㅋㅋㅋ 
    새로운 분야의 도전이라서 많이 불안하고 힘들었는데  
    세지쌤 덕분에, 그리고 함께한 학생들 덕분에 잘 버틸 수 있었어요! 
    동굴 밖으로 나가서 다들 잘 할 거라고 말씀하셨지만 사실 좀 걱정이에요 ㅠㅠ 선생님 없이 잘 할 수 있겠죠!? 
    함께한 학생들도 너무 고생 많았고 다같이 으쌰으쌰 해줘서 고마워용 
    세지 쌤~ 4개월 동안 아낌없는 열정 보여주시면서 가르쳐 주셔서 감사합니다!  
    건강도 좀 생각하세요 ㅠㅠ 잠좀 많이 주무세요 제발ㅠㅠ  
    선생님이 가르쳐주신 열정과 기술(선생님 반의 반도 못 따라가겠지만 ㅎㅎㅎ),  
    그리고 인간적인 면까지 모두 발휘해서 좋은 곳 취업해서 보답할게요 ♡ 

    부원장님  그리고 학원 직원분들!ㅎㅎㅎ 
    수강하는 동안 매일같이 먼저 반갑게 인사해주셔서 감사합니다ㅎㅎ 덕분에 기분좋은 하루 시작이였어요~ 
    물먹고있는데 부원장님께서 너무 반갑게 인사하셔서 물뿜을뻔 했다는 ㅋㅋㅋㅋ 
    그리구 카운터에 가서 맨날 뭐 물어봐서 죄송해요.... ㅋㅋㅋㅋ그럴 때마다 친절하게 가르쳐주셔서 감사해요! 

    직업상담해주시는 선생님도 감사합니다!  
    수원도 서울도 아니고  
    저~~멀리 취업 가는데도 취업 정보 다 찾아서 알아보시고 정보 주셔서 너무 감사해요. 

    매일같이 보던 얼굴들 이제 못 봐서 너무 아쉽지만 다음을 기약하며!!!!  
    정말 정말루 즐겁고 많이 배워가는 4개월 이였습니다 ^^!!!!
수강후기 더 보기▶

그린이 추천하는 관련 교육과정

개강임박
그린컴퓨터아트학원 그린컴퓨터아카데미 (주)지아이티아카데미
  • 주소 : 경기도 고양시 중앙로 1068 2F, 3F, 7F (백석동, 리더스프라자) 
  • 대표자 : 박다함 
  • 사업자등록번호 : 128-93-74739 
  • 통신판매업신고 : 제2014-고양일산동-0600호 
  • 학원등록번호 : 고양 제 2016-1호 
  • COPYRIGHT GITACADEMY ALL RIGHTS RESERVED[수강료게시]
상담
문의
031-905-6712