QUICK
MENU

Hyper Text Markup Language5

HTML5 과정

웹시장에서 그 중요시 되는 "플랫폼화 전략"에 대응하기 위해서 HTML5는 필수 요건이며, 대부분의 기업들이 이젠 인터넷을 접점으로 재활용한 모바일 웹의 활용도가 날로 높아지고 있습니다.

기초디자인-디자인툴- UIUX-웹퍼블리싱으로 진행되는 기본 웹사이트 제작과정에 따라 커리큘럼이 진행되면서 홈페이지 제작의 각 단계를 이해하게 하고 난이도별 실습을 통해 기술과 실력을 키웁니다.

취업분야웹에이전시, 쇼핑몰, 광고, 이벤트 회사(홍보물, 배너 제작), 기업체 홈페이지 관리, 이러닝 업체(홈페이지, 컨텐츠 제작)
  • 01
    취업을 위한 1:1 맞춤형 멘토링
    교육과정 설계
  • 02
    사전 등록시 역대급 할인혜택
    최대 30%할인
  • 03
    복습할 수 있는 온라인 강의
    시스템 구축
  • 04
    취준생 필수 이력서 & 자소서 첨삭
    취업상담 및 취업처 연계

교육과정 상세정보

  • 2개월(8주)
  • 입문 ~ 고급
  • 15명 내외 인터뷰 및 레벨 테스트 후 입학
  • 02-3482-9075 주말·공휴일 상담 및 접수가 가능
평일반 (월~금)
1교시 09:00~11:00 2교시 11:00~13:00 3교시 14:00~16:00 4교시 16:00~18:00 5교시 18:00~20:00 6교시 20:00~22:00
주말반 (토~일)
1교시 09:00~12:00 2교시 12:00~15:00 3교시 15:00~18:00
HTML5 문의하기

  • 개원 17년의 역사 꾸준한 성장과 취업생 배출

    · 누적 수강생 544,409명

    · 소통하고 공감하는 취업 지원 프로그램

    · 개인별 최적 업체 선정

  • 교육 컨텐츠 투자비용 매년 8억원 이상

    · 교육과정 만족도 및 직무능력 향상 솔루션 제공

    · 수강생 역량 수준에 따른 맞춤형 학습

    · 차별화 된 강점요소 함양을 위한 커리큘럼 제공

SBS아카데미는 결과로 증명합니다.
학력, 경력, 경험이 없어도 취업에 성공합니다.

  • 카페 매니저에서 웹디자이너로 취업
  • 광고 디자이너에서 웹 사이트 제작, 관리자로 이직
  • 공무원 준비생에서 웹 기획자로 취업
  • 비전공자에서 프론트엔드 개발자로 취업!
팀팩토리
이한솔 취업생
제 생각보다 더 체계적으로 수업들이 진행되었고 무엇보다 팀원들과 함께 작업을 했던 것이 정말 좋았습니다. 선생님 또한 열정적으로 중간중간 보충수업까지 해주시고 너무 감사합니다!
(주)엔유비즈
이수현 취업생
저도 웹디자이너를 늦은 나이에 새로운 도전이라고 생각해서 뛰어들었지만 전혀 후회하지 않습니다. 취업담당자 선생님이 계시니 너무 성급하게 생각하지 말고 천천히 하고 있으면 언젠가 좋은 기회가 찾아 올거라 생각합니다.
로빈ICT
박원휘 취업생
친한 동기가 생겨서 같이 서로 도와주면서 자격증 준비도 많이 하고, 멘토나 선생님들이 칭찬과 격려 따로 문자로 도움을 많이 주시기도 해서 잘 준비하였습니다!
㈜JOYFULSOFT
김연희 취업생
학원 내부도 엄청나게 깨끗했고, 교육을 받으면서 제가 모르고 있던 팁 같은 걸 알게 되어 엄청나게 좋았습니다. 내가 몰랐던 팁을 아는 그 순간이 제일 즐거웠습니다. 머릿속에 전구가 팟! 하고 켜지는 느낌이었달까요.
(주)아이텍씨앤씨
고지현 취업생
이력서와 자소서, 포트폴리오를 컨펌해 줌으로서 제가 가진 부족한 부분을 말씀해주시며 보완할 기회를 주셨고, 취업관련 공고와 면접질문, 채용사이트에서 확인해야 할 점 등 필요한 정보들을 다루며 같이 상의해 주시는 친절한 상담이 정말 많은 도움이 됐다 생각합니다.
온메이커스
송창현 취업생
취업지원해주시는 선생님께서 항상 자기 일처럼 취업 자리를 알아봐주셔서 취업에 성공할 수 있었던 것 같습니다. 또한 수업을 해주시는 선생님께서 단순한 강의가 아닌 다양한 이야기와 여러가지를 도와주셔서 취업에 성공할 수 있었던 것 같습니다.
(주)데이타이음
송지민 취업생
학원 등록 전에는 학원에 반신반의하면서 등록했는데 학생의 의지만 있다면 멘토님과 선생님들 모두가 한 명의 취업에 진심으로 대해주셔서 놀라웠고 감사했습니다.
Cross Shock
장소영 취업생
비전공자이지만, 학원을 믿고 따라와서 결국 IT분야에 원하는 직종으로 취업할 수 있었습니다. 마지막으로 허지훈 강사님, 박진수 멘토님, 취업담당자 차지연 선생님께 감사 말씀 전하고 싶습니다.
델타인덱스
김도영 취업생
학원에서 배웠던 HTML과 CSS 기술 덕분에 업무에 빠르게 적응할 수 있었습니다. 후에 디자인 작업에도 투입될 예정인데, 포토샵과 일러스트레이터 프로그램을 배운 것이 큰 도움이 될 것 같습니다.
케이앤제이 컴퍼니
채지안 취업생
디자인 업계에서는 창의성을 많이 발휘해야 하는데 강사님께서 색감을 잘 활용할 수 있는 방법을 제시해주시고 다양한 포트폴리오를 볼 수 있는 사이트를 제공해 주셨습니다.
이런 분들이 배우시면 좋아요!
· 홈페이지 기획, 디자인, 제작에 관심이 있는 분
· 웹사이트에 관심이 있는 분
· 웹파트 진로 고민자
· 코딩입문자(비전공자)
· 홈페이지 제작 방식이 궁금하신 분
· 자신만의 홈페이지를 만들고 싶으신 분
· 나만의 포트폴리오 홈페이지를 만들고 싶으신 분
Hyper Text Markup Language5

HTML5 과정 소개

HTML5는 "Hyper Text Markup Language5"의 줄인 말로, 기존에 웹 문서를 제작하기 위해 활용되었던 표준 프로그래밍 언어인 HTML의 최신 버전입니다.

웹 시장에서 중요시 되는 "플랫폼화 전략"에 대응하기 위해서 HTML5는 필수 요건이며, 대부분의 기업들이 이젠 인터넷을 접점으로 재활용한 모바일 웹의 활용도가 날로 높아지고 있습니다. 이로 인해 대부분의 웹 브라우저들은 HTML5의 호환 작업을 빠르게 진행해 나가고 있으며, 차세대 플랫폼으로 점점 각광받고 있습니다.

본 과정에서는 HTML5의 새로운 구조적 태그 및 CSS3의 다양한 스타일 선언을 알아보고 미디어 쿼리를 사용한 반응형 웹사이트를 구현과 모바일 화면에서의 구성을 구현해 볼 수 있습니다.

유진아 학생 작품

정예송 학생 작품

김나윤 학생 작품

송은경 학생 작품

서진솔 학생 작품

박예린 학생 작품

박선아 학생 작품

정현실 학생 작품

김새롬 학생 작품

민지현 학생 작품

김초희 학생 작품

정지윤 학생 작품
HTML5의 새로운 MARKUP
HTML5는 웹 개발을 위한 다양한 새로운 마크업 요소와 기능을 도입했습니다. 일부 주요 HTML5 마크업 요소는 다음과 같습니다.
<article> 요소: 독립적인 콘텐츠를 나타냅니다. 뉴스 기사, 블로그 글, 포럼 게시물 등이 포함될 수 있습니다.
<section> 요소: 문서의 섹션을 정의합니다. 주제별로 그룹화된 콘텐츠를 나타낼 때 사용됩니다.
<nav> 요소: 내비게이션 링크를 그룹화합니다. 주로 메뉴 또는 링크 목록을 표현하는 데 사용됩니다.
등의 다양한 HTML5 요소가 있으며, 이러한 요소들은 웹 애플리케이션 및 멀티미디어 콘텐츠를 구축하는 데 사용됩니다. HTML5는 더 풍부한 웹 경험을 제공하기 위한 다양한 기능을 도입하여 웹 개발자에게 유연성을 제공하고 있습니다.
HTML5 동영상 및 FORM
HTML5에서는 <video> 요소를 사용하여 동영상을 웹 페이지에 삽입할 수 있습니다.
<video> 요소는 다양한 속성과 이벤트를 제공하여 동영상을 컨트롤하고 사용자와 상호작용할 수 있습니다.
그리고 <form> 요소를 사용하여 사용자 입력을 받는 양식을 만들 수 있습니다.
여러 양식 요소를 사용하여 텍스트 입력, 체크박스, 라디오 버튼, 드롭다운 등 다양한 형태의 입력을 받을 수 있습니다.
이러한 HTML5 요소들은 웹 페이지를 보다 동적이고 사용자 친화적으로 만들어 줍니다.
HTML5 미디어쿼리
HTML5 미디어 쿼리(Media Queries)는 CSS3의 일부로서, 웹 페이지의 스타일을 장치의 특성에 따라 동적으로 조정할 수 있는 기능을 제공하는 기술입니다.
주로 반응형 웹 디자인에서 사용되어 다양한 디바이스 및 뷰포트 크기에 대응하는데 도움을 줍니다.
미디어 쿼리는 주로 @media 규칙을 사용하여 정의되며, 특정 미디어 특성(예: 화면 크기, 해상도, 장치 종류 등)에 따라 스타일을 적용하거나 제외할 수 있습니다.
이렇게 미디어 쿼리를 사용하면 다양한 디바이스 및 화면 크기에 대응하여 웹 페이지의 레이아웃과 스타일을 최적화할 수 있습니다.
CSS3 선택자유형
CSS3는 다양한 선택자 유형을 도입하여 웹 개발자가 더 효과적으로 요소를 선택하고 스타일을 적용할 수 있도록 했습니다.
일부 주요 CSS3 선택자 유형은 다음과 같습니다.
일반 선택자 (Universal Selector): 모든 HTML 요소를 선택합니다.
요소 선택자 (Type Selector): 특정 HTML 요소를 선택합니다.
클래스 선택자 (Class Selector): 특정 클래스를 가진 요소를 선택합니다.
자식 선택자 (Child Selector): 특정 요소의 직계 자식 요소를 선택합니다.
등의 선택자가 있습니다.
CSS3의 이러한 다양한 선택자를 조합하여 원하는 대상을 정확하게 선택하여 스타일을 적용할 수 있습니다.
CSS3 배경및 테두리 등의 속성 및 벤더프리픽스
CSS3에서는 배경과 테두리에 관한 다양한 속성이 도입되었으며, 몇 가지 속성은 벤더 프리픽스(vendor prefix)를 사용하여 브라우저 호환성을 유지합니다.
배경 속성 (Background Properties) / 테두리 속성 (Border Properties)의 속성들은 각각의 브라우저에 대응하지 못하기에 각각 웹킷과 모질라등의 브라우저에 대응하고 표준 속성을 적용하고 있습니다.
벤더 프리픽스를 사용하여 브라우저 간 호환성을 확보합니다.
그리드 시스템
웹의 그리드 시스템(Grid System)은 웹 페이지를 레이아웃하는 데 사용되는 구조적인 방법 중 하나입니다. 그리드 시스템은 웹 페이지를 일정한 열과 행으로 나누어 구성하여 컨텐츠를 조직화하고 배치하는 데 도움을 줍니다.
이는 일관된 디자인 및 레이아웃을 유지하고 반응형 웹 디자인을 구현하는 데 도움이 됩니다. 컨테이너 / 열 / 커터 / 로우와 같은 구성 요소를 포함합니다.
웹 디자이너 및 개발자들은 그리드 시스템을 사용하여 웹 페이지의 레이아웃을 쉽게 구성하고 관리할 수 있습니다. 대표적으로 Bootstrap, Foundation, 그리드 시스템을 쉽게 구현할 수 있는 프레임워크들이 있습니다.
그리드 시스템은 반응형 웹 디자인에서도 중요한 역할을 하며, 다양한 화면 크기 및 디바이스에 대응할 수 있도록 도와줍니다.
플로이드 기법 등의 반응형 레이아웃
반응형 웹 디자인은 다양한 디바이스와 화면 크기에 대응하여 최적의 사용자 경험을 제공하는 디자인 접근 방식입니다.
플로이드 기법은 반응형 웹 디자인에서 사용되는 한 가지 기법으로, 유연한 그리드와 미디어 쿼리를 활용하여 웹 페이지의 레이아웃을 조절하는 방법 입니다.
반응형 웹 디자인은 사용자 경험을 향상시키고 다양한 디바이스에 대응하여 웹 페이지를 효과적으로 표현할 수 있는 중요한 디자인 접근 방식 중 하나 입니다.

자주묻는질문

더 궁금한점이 있으시면 고객상담센터(02-3482-9075)로 문의해 주시면 전문 상담사가 자세히 안내해 드리겠습니다.

  • Q웹디자인(기획)/프론트엔드(개발)/퍼블리싱 간의 차이점은 무엇인가요?
    A 현재 우리나라에서 구분 지어지는 웹디자인과 퍼블리싱은 단순히 디자인기획 및 제작을 하는 디자인 파트와 제작된 디자인을 (html css java script를 활용하여 수정 및 배포하여 웹상에 구현화 시키는 퍼블리싱으로 구분 지어질 수 있습니다. 본래 해외에서는 웹디자인+퍼블리싱이 가능한 직업을 웹디자이너라고 통칭하나, 우리나라에서만 특이하게 나뉘어진 케이스 입니다. 나아가 프론트앤드는 단순히 UI개발뿐만 아니라 백엔드 API 데이터와 상호작용 및 웹사이트의 프로그래밍적 배치와 디자인적 영역 전반의 운영을 이해하고 클라이언트 사이드를 담당하는 웹개발자 분야로서 앞서 표현한 디자인과 프론트앤드와는 다른 영역입니다.
  • Q쇼핑몰이나 개인 사이트를 직접 만들 수 있는가?
    A 가능합니다! 디자인부터, 서버셋팅포함 가능한수업으로 진행중에 있습니다. 그러나 개발 or 유지에 따라서 교육과정이 달라지기때문에 어떤 홈페이지를 제작하는지에 따라서 공부기간 및 과정이 달라 질 수 있습니다
  • Q최소 어디까지 배워야 실무에 활용 가능한가?
    A 포토샵, 일러스트, UXUI , HTML , CSS까지는 할수있어야, 디자인파트와 개발자 파트와 소통이 가능합니다. 즉, 개발자여도 디자인을 알아야 디자이너와 소동이 가능하며, 디자이너라도 코딩을 알아야 개발자와 소통이 가능합니다, 실무에서 제일 중요한것은 실무디자인 능력도 있지만, 부서간의 소통 또한 중요한 실무 능력 중 하나입니다
  • Q퍼블리싱을 하지 않고 웹디자이너 취업이 가능할까요?
    A 퍼블리싱을 하지 않고서도 취업은 가능합니다. 단, 퍼블리싱을 하지 않고 취업을 했을 시 우리가 원하는 대우와 급여를 받기는 어렵습니다. 웹디자이너란 본인의 디자인 작업물을 웹이라는 매체를 토대로 전달하는 디자이너입니다. 디자인 작업물을 웹으로 전달하기 위해서는 퍼블리싱 역량이 필요한데, 퍼블리싱을 할줄 모른다면 단순 콘텐츠를 제작하는 오퍼레이터이뿐 웹디자이너라고 할 수 없습니다.
  • QJ-query를 꼭 배워야 하는 이유가 있을까요?
    A 제이쿼리는 자바스크립트의 라이브러리 언어로써 웹상에 그래픽적인 표현을 자유롭게 해주는 언어입니다. 제이쿼리를 다룰 줄 모르는 경우 일반적인 사진이나 이미지와 같은 정적인 디자인 작업물만 표현이 가능하지만, 제이쿼리를 다룰줄 알면 웹모션, 웹드로잉과 같은 동적인 디자인 작업물도 표현이 가능해지기에 범위가 매우 넓어지겠지요? 디자이너에게 표현의 범위는 매우 중요한 요소이기에 제이쿼리는 웹디자이너가 되기 위해서 필수적으로 배워야 합니다.
  • Q웹디자인과 퍼블리셔의 차이가 어떻게 될까요?
    A 웹디자인은 제작된 페이지를 수정 및 디자인하는 과정이며, 퍼블리셔는 하나부터 열까지 상세페이지를 제작하는 과정입니다.
  • Q취업은 어디로 많이 하나요?
    A 웹학과의 경우 웹퍼블리셔, 웹디자이너, HTML컨텐츠관리자, 웹사이트운영, 온라인사보, 웹기획, 인터뷰, 웹진 제작 등 웹 관련 분야로의 취업이 가능합니다.
  • Q자격증은 꼭 취득해야하나요 ?
    A 필수는 아니지만 적극권장 추천합니다. 국가기술자격증은 종류에 따라 차이가 조금씩 있지만, 공공기관이나 공기업등에서 입찰시 평가기준이되기때문에 취업시 유리합니다.
  • Q웹디자이너나 퍼블리셔로 취업하기는 어렵지 않은지?
    A 요즘에 대부분 회사들은 웹사이트가 있고, 당연히 해당 사이트를 유지 보수할 수 있는 인력이 필요합니다! 보통 웹사이트는 분기당 혹은 매달 변경사항이 생기기 때문에 관련 업무를 할 줄 아는 사람이 필요하고, 아예 웹사이트만 만드는 에이전시도 많이 늘어난 상황입니다! 실제로 학원 수강생들 중 취업율도 높은 과정이라고 보시면 됩니다.
전문가와의 상담신청하기수강시작 전 상담이 필요하다면?
01

끝까지 해낼 수 있도록
꼼꼼한 교육관리 1:1 멘토링

  • 01
    언제 어디서나 SBS아카데미컴퓨터아트 학생들을 최우선으로 생각하는
  • 02
    학생들이 힘든 순간 자신감을 가질 수 있게 해주고 든든한 버팀목이 되어주는
  • 03
    학업에 대한 상담은 기본, 스스로의 삶을 개척하고 나아갈 수 있는 힘을 키워주는

그런 사람을 SBS아카데미컴퓨터아트학원 멘토라 부릅니다.

※ 위 카카오톡 대화는 SBS아카데미컴퓨터아트학원 멘토선생님과 수강생들의 실제 대화 내용이며 업로드 동의를 얻었습니다.

02

취업에 휴머니즘을 담다.
소통하고 공감하는 취업 지원 프로그램

취업담당자가 상주하여 작성 어려운 이력서와 자소서를 1:1로 지원하고 기업에서 원하는 지원자격과 우대사항에 대한 정보를 제공합니다.

  • 수강생 Orientation
    -진로상담을 통해 수강생이 원하는 분야 확인 후 맞춤컨설팅 진행
    -취업관리카드 작성
  • 수강생 평가 매칭
    -면접복장, 면접화법, 면접태도
    -면접 질의응답 방법
  • 취업지원 프로그램 소개
    -취업 최신동향 공유
    -실무자 모의면접 진행
  • 면접특강
    -학과별 강사진 논의 평가
    -적정기업 매칭
  • 입사지원 작성법 PT
    -입사지원서 기본요소 및 작성법
    -인사담당자가 싫어하는 요소 분석
  • 1:1 개별면접
    -개별 이력서 수정 및 보완
    -희망분야 개별상담
    -진로설계 및 Career Path 상담
03

취업에 휴머니즘을 담다.
소통하고 공감하는 취업 지원 프로그램

  • 인재 육성에 대한 교육 프로그램 상호 협력
  • 인재 채용 요청 시 인재 프로파일 제공 및 채용교류 적극 협력
  • 수강생, 수료생 대상 채용 및 세미나 개최 등 취업지원
  • 교육 발전을 위한 상호협력 프로젝트 진행
그외 다수 업체와 전문적인 교류를 통해 수강생들의 취업기회를 넓혀가고 있습니다.
04

업계 최고 수준의 교육시설을 제공

SBS아카데미컴퓨터아트의 감각적 인테리어 시설과 최신의 시스템 사양을 통해 교육을 받는 동안 최상의 교육환경을 제공받게 될 것입니다.

HTML5
일반/국비지원 과정 수강료
바로 알아보시겠어요?

문의사항을 남겨주시면
빠른 시일 내 답변해 드리겠습니다.

T. 02-3482-9075
주말·공휴일 상담 및 접수가 가능합니다.

관심있는 분야를 선택해 주세요.
가까운 지점을 선택해 주세요.
    신청하시는 분의 이름과 연락처를 입력해 주세요.
    • -
    • -
    수강료 조회하기

    HTML5
    상담신청하기

    닫기
    가까운 지점을 선택해 주세요.
    신청하시는 분의 이름과 연락처를 입력해 주세요.
    • -
    • -
    HTML5수강료 조회하기