빠른 수강료 조회

운영 시간 내에는 3분 안에 연락 드리겠습니다.

230901_2023 한가위 이벤트
230908_윙배너_게임원화
230908_윙배너_인테리어
230922_메카댐_컴활라이브

모션
그래픽

취업특화
소수정예

바로 가기

국비 과정 ‘나도 들을 수 있을까?’
고민하지말고 문의하세요!

title

-

-

디자인(웹/편집/공간)

HTML/CSS

웹페이지를 제작하기 위한 필수 기초 과정!

웹사이트의 원하는 기능을 구현하기 위해 HTML과 CSS를 활용하여, 웹사이트가 이루어지는 요소, 분석 및 CSS의 응용을 학습!

수업 소개

HTML/CSS란 무엇인가요?

HTML과 CSS는 웹을 구성하는 기본 프로그래밍 요소입니다. HTML은 텍스트, 이미지, 표 등과 같은 구성 요소를 웹 문서에 포함해 뼈대를 만들고 CSS는 색상이나 크기, 위치, 배치 방법 등의 웹 문서의 디자인적 요소를 담당합니다.

수업 목표

HTML/CSS의 수업 목표는 무엇인가요?

인터넷 웹페이지를 제작할 수 있는 방법을 습득하여 실무에 적용할 수 있게 함으로써 컴퓨터를 이용한 인터넷 활용 능력을 배양시키고자 합니다. 이를 위하여 HTML5의 개념을 이해하고 다양한 태그를 사용하여 웹페이지를 만드는 능력을 향상하며 CSS 학습을 통해 웹페이지의 디자인 및 스타일을 적용하는 방법을 익힙니다.

수업 포인트

HTML/CSS의 수업 포인트는 무엇인가요?

  • HTML

    HTML의 정의와 개념 정리하고 태그와 기본 문서 구조를 익힙니다.

  • CSS

    폰트, 배경 ,레이아웃 등 사이트를 예쁘게 만들어주는 스타일 시트를 배웁니다.

  • Web Publishing

    사이트를 따라 만들면서 웹 구조에 따른 태그 사용과 스타일 작성 방법을 익힙니다.

  • Responsive

    PC, 태블릿 그리고 모바일 사이트 반응형 퍼블리싱을 배울 수 있습니다.

수업 방식

HTML/CSS의 수업 방식은 무엇인가요?

  • 1

    퍼블리싱의 전반적인 이해를 위하여 기능 설명과 이를 활용한 예제를 만들어 보는 실습형 수업으로 진행합니다.

  • 2

    태그의 원리를 이해시켜 다양한 응용 작업과 예제를 통해 웹 구조를 파악하도록 합니다.

  • 3

    과제물에 대한 코멘트를 통해 태그의 사용법을 다시 한번 복습합니다.

  • 4

    디자인과 접목하여 웹 사이트가 어떤 구조를 가지는지 스스로 파악해 볼 수 있게 합니다.

사전 준비 항목

HTLM/CSS 수업의 사전 준비 항목은 무엇인가요?

[ 준비 항목 ]

과제와 복습을 할 수 있도록 Visual Studio Code 프로그램을 설치할 수 있는 컴퓨터

[ 선수강과목 ]

없음

[ 사용 프로그램 ]

VS Code

취업분야 및 전망

HTML/CSS 수업의 취업분야 및 전망은 어떤가요?

인터넷 & 앱은 현재도 확장되고 있고, IT업계에서 디자이너와 개발자를 이어주는 웹 퍼블리셔는 그 수요가 계속해서 늘어나는 추세입니다. 또한, 웹 퍼블리셔는 비전공자도 개발자로 나아갈 수 있는 첫 발걸음입니다.

[ 수강 후 어떤 분야로 취업할 수 있을까요? ]

  • 웹 디자인
  • 웹 퍼블리셔
  • 웹 개발자
  • 인하우스 개발팀
  • 웹 에이젼시
  • 솔루션 사업부

[ 수강 후 어떤 작업을 할 수 있을까요? ]

  • 웹 퍼블리싱
  • 프론트앤드
  • 백앤드
  • 풀스택

포트폴리오

  • [웹포트폴리오] 이OO 학생작품

  • [웹포트폴리오] 이OO 학생작품

  • [웹포트폴리오] 최OO 학생작품

  • [웹포트폴리오] 유OO 학생작품

  • [웹포트폴리오] 김OO 학생작품

  • [웹포트폴리오] 김OO 학생작품

  • [웹포트폴리오] 서OO 학생작품

  • [웹포트폴리오] 서OO 학생작품

  • [웹포트폴리오] 서OO 학생작품

  • [웹포트폴리오] 심OO 학생작품

커리큘럼

비주얼스튜디오코드 / 웹표준 / 웹접근성 크로스브라우징 / HTML 기본 구조

HTML의 정의와 기본 지식을 익히고 웹 표준과 웹 접근성, 크로스브라우징의 개념을 정리합니다. 마크업에 대한 설명 및 HTML 기본 문서 구조를 파악합니다.

INLINE / BLOCK TEXT / FORM / IMG

인라인/블록 요소별 태그를 분리하여 어떤 태그들이 있는지 배워봅니다. 실제로 마크업을 하여 각각의 태그들이 어떤 특성을 가지고 있는지 알아봅니다.

HEADER / SECTION / FOOTER ASIDE / NAV

구조를 담당하는 시멘틱 태그의 역할과 사용법을 학습합니다. 다양한 구조를 만들어 보면서 태그 활용법을 익힙니다.

CASCADING STYLE SHEETS / OR 파일 관리 및 네이밍 규칙

스타일 시트 사용과 개념을 이해하고 기본 문법을 학습합니다. 파일 관리 및 네이밍 규칙에 대해 알아봅니다. 다양한 CSS 선택자 종류를 학습하고 올바른 사용법을 익힙니다.

TEXT STYLE / COLOR / PX EM / REM / WEB FONT

다양한 텍스트 관련 스타일 속성과 컬러 속성에 대해 알아봅니다. 퍼블리싱에서 사용되는 단위들에 대한 개념을 정리합니다. 웹에서 사용하는 폰트의 사용법을 실무 방식에 맞춰 배웁니다.

여백 / 변형 / 전환 효과

여백 속성에 대해서 알아보고 여백의 활용법을 익힙니다. 태그를 변형 시켜주는 속성의 사용법을 배웁니다. 변형과 전환 효과를 이용하여 간단한 동적 구현을 실행시켜 봅니다.

레이아웃 스타일 FLOAT / POSITION / DISPLAY / FLEX

사이트의 구조 당담하는 배치 속성들에 대해서 배워봅니다. FLOAT, POSITION, DISPLAY 그리고 FLEX의 여러 속성까지 익힐 수 있습니다.

미디어 쿼리 / 반응형

디바이스별 특징과 반응형 웹의 상관관계를 알아봅니다. PC, TABLET, MOBILE 디바이스의 브레이크 포인트를 구분하여 작성할 수 있습니다.

웹디자인 기능사 예제 연습

웹 디자인 기능사 예제 1종을 마크업 해봅니다. 기본적인 웹의 구조를 파악하고 구조에 맞는 태그 사용을 익힐 수 있습니다. 웹 디자인 기능사 자격증 취득을 위한 기반을 다져봅니다.

실전 사이트 마크업 실습

실제 구현되어 있는 웹사이트를 따라 제작해봅니다. 웹사이트를 만들기 위해 사용되는 태그의 응용법을 배워봅니다. 제이쿼리로 표현하는 동적인 부분 미리 파악할 수 있습니다.

* 캠퍼스 상세 커리큘럼은 다를 수 있습니다.

디자인(웹/편집/공간)

HTML/CSS

캠퍼스
이름
연락처
--