닫기
빠른전화상담
손쉽고 간편하게
전문가와 전화상담!
안내받고 싶은 지점을 선택해 주세요.
야간 및 주말 상담 전화 안내

빠른 안내를 위해
평일 야간(오후 6시 ~ 오후 10시)
주말(오전 9시 ~ 오후 6시)에도 안내해 드리고 있습니다.

QUICK
MENU

Hyper Text Markup Language5

HTML5 과정

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

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

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

교육과정 상세정보

  • 2개월(8주)
  • 입문 ~ 고급
  • 15명 내외 인터뷰 및 레벨 테스트 후 입학
  • 052-922-8566 주말·공휴일 상담 및 접수가 가능
평일반 (월~금)
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

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

    · 누적 수강생 544,409명

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

    · 개인별 최적 업체 선정

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, 그리드 시스템을 쉽게 구현할 수 있는 프레임워크들이 있습니다.
그리드 시스템은 반응형 웹 디자인에서도 중요한 역할을 하며, 다양한 화면 크기 및 디바이스에 대응할 수 있도록 도와줍니다.
플로이드 기법 등의 반응형 레이아웃
반응형 웹 디자인은 다양한 디바이스와 화면 크기에 대응하여 최적의 사용자 경험을 제공하는 디자인 접근 방식입니다.
플로이드 기법은 반응형 웹 디자인에서 사용되는 한 가지 기법으로, 유연한 그리드와 미디어 쿼리를 활용하여 웹 페이지의 레이아웃을 조절하는 방법 입니다.
반응형 웹 디자인은 사용자 경험을 향상시키고 다양한 디바이스에 대응하여 웹 페이지를 효과적으로 표현할 수 있는 중요한 디자인 접근 방식 중 하나 입니다.

업계 최고 수준의 교육시설을 제공합니다.

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

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

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

T. 052-922-8566
주말·공휴일 상담 및 접수가 가능합니다.

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

    HTML5
    상담신청하기

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