Web Essential – Basic

Web Core

코스 개요

웹 개발 필수 기본지식을 학습하는 과정

웹개발자나 웹 디자이너가 되기 위해 알아야 하는 기초적인 웹의 표준 기술을 학습하며, 개인별 프로젝트를 통하여 실전 홈페이지를 제작하게 됩니다.
기초부터 단계적으로 진행하며 기본학습과 응용학습을 통하여 웹에 대한 기본적인 지식을 습득하게 하는 과정입니다.

본 과정은 다음과 같은 주제를 다룹니다.

HTML 웹 페이지의 구조와 콘텐츠를 표시하는 데 사용되는 마크업 언어입니다.
-HTML, HTML 태그 및 속성, HTML 양식 및 시맨틱 HTML 요소.
CSS HTML로 작성된 내용에 스타일을 적용하여 디자인을 만드는 데 사용됩니다.
-CSS 소개, CSS 선택기, CSS 속성, CSS 상자 모델, CSS 레이아웃 및 위치 지정, CSS 프레임워크.
JavaScript 웹 페이지의 동적인 기능을 구현하는 데 사용되며, 클라이언트 측 스크립트 언어입니다.
-JavaScript, 변수, 데이터 유형, 연산자, 제어 구조, 함수, 배열, 개체 및 이벤트 소개.
Photoshop 프로페셔널 그래픽 디자이너, 웹 디자이너, 포토그래퍼 및 예술가 등 다양한 분야에서 널리 사용되는 그래픽 편집 프로그램입니다.
-Photoshop 소개, 기본 기능, 웹 이미지 최적화.
WordPress WordPress는 무료 오픈소스 컨텐츠 관리 시스템(CMS)으로, 웹사이트나 블로그를 만드는 데 사용됩니다.
-WordPress 소개, 설치 및 설정, 페이지 및 게시물 만들기, 미디어 관리, 테마 및 플러그인 사용, 웹사이트의 모양 및 기능 사용자 지정.

이 과정은 일반적으로 많이 사용되는 기술을 사용하여 웹 사이트를 구축하고 유지 관리하는 데 필요한 기술과 지식을 학생들에게 제공하는 것을 목표로 합니다.

코스 목표

  • 이 과정의 전반적인 목표는 학생들이 웹 사이트 구축 및 유지 관리에 능숙하고 이러한 기술을 실제 프로젝트에 적용할 수 있도록 준비시키는 것.

  • 웹에 대한 기본 개념 습득

  • 홈페이지 제작에 필요한 기본 기술 습득

  • 홈페이지 제작에 필요한 기본적인 웹 디자인 기술 습득

  • 실전 홈페이지 제작 전체 과정 습득

  • HTML, CSS, JavaScript를 이용한 정적 웹 페이지 디자인 및 개발

  • 반응형 디자인 기술을 이용한 모바일 친화적 웹사이트  구현

  • JavaScript를 이용한 상호 작용하는 동적 웹 페이지 구현

  • WordPress를 이용한 CMS(컨텐츠 관리 시스템)에 대한 이해 및 동적 웹 사이트 구축

  • 테마와 플러그인을 사용하여 WordPress 웹사이트의 모양과 기능을 확장

  • 유용한 서비스를 WordPress 웹사이트에 통합

결과 및 결과물

  • 본인이 제작한 홈페이지

  • IT의 기초 지식을 습득하고 기본적인 필수 웹 기술을 이해함.

상세 내용

  • 코스 유형 :  web core

  • 과정 :  정규 과정

  • 기간 :  1개월

  • 수업시간 : 1일 8시간 – IT(4시간) + 영어(4시간)
  • 개강 일정 : 매월 첫째 주 월요일
  • 수업 일정 : 월 ~ 금(AM8:00 ~ PM5:00)

  • 대상 : 웹 기술을 처음 접하는 학생

  • 요구되는 IT 수준 : 하

  • 수료 후 수준 : 자신의 웹사이트를 쉽게 제작할 수 있는 실력

  • 진출 분야 : 웹 퍼블리셔, 웹 에이전시 프리랜서

  • 준비 사항 : 노트북

학습하게 되는 기술

코스 학습 일정 및 내용

  • Welcome to Module 1: Introduction to HTML
  • Setup, Tools what we need.
  • What is HTML?
  • Relevant History of HTML
  • Anatomy of an HTML Tag
  • Basic HTML Document Structure
  • HTML Content Models
  • Heading Elements
  • HTML Content Models
  • Heading Elements
  • Lists
  • HTML Character Entity References
  • Creating Links
  • Displaying Images
  • Project
  • Welcome to Module 2: Introduction to CSS
  • Power of CSS
  • Anatomy of a CSS Rule
  • Element, Class, and ID Selectors
  • Combining Selectors
  • Pseudo-Class Selectors
  • Style Placement
  • Conflict Resolution
  • Styling Text
  • The Box Model
  • The background Property
  • Positioning Elements by Floating
  • Relative and Absolute Element Positioning
  • Media Queries
  • Project

Practical and Project

  • Practicum of what they have learned?

  • Welcome to Module 3: Introduction to JavaScript
  • Adjusting Development Environment for JavaScript Development
  • Where to Place JavaScript Code?
  • JavaScript Types
  • Common Language Constructs
  • Handling Default Values
  • Creating Objects Using ‘new Object()’ Syntax
  • Creating Objects Using Object Literal Syntax
  • Project
  • Functions Explained
  • Passing Variables by Value vs. by Reference
  • Function Constructors, prototype, and the ‘this’ Keyword
  • Arrays
  • Closures
  • Fake Namespaces
  • Immediately Invoked Function Expressions (IIFEs)
  • Project

Practical and Project

  • Practicum of what they have learned?

  • Welcome to Module 4: Introduction to WordPress
  • What is WordPress?
  • Setup Xampp
  • Install WordPress
  • WordPress Theme
  • WordPress Plugins
  • Photoshop
    • 1. Feature introduction
    • 2. Install Photoshop
    • 3. How to create images for web pages
  • Create a WordPress Website
    • Theme Style
    • Edit Your Website
    • Edit Text
    • Edit Button
  • Practical WordPress
    • Practicum of what they have learned?
    • Copyright Free Images
    • Change Text Color
    • Change Button Colors
    • Change Button Roundness
    • Background Overlay
    • Undo Changes
    • Rearrange Sections
    • Delete Sections
    • Move Columns
    • Delete Columns
    • Spacing
    • Section Spacing
    • Margin & Padding Spacing
    • Deleting Elements
    • Update Website
    • Add a Background
    • Download Correct Image Size
    • Upload Image
    • Add Spacing To Background
    • Resize Background
    • Add Text
  • Practical and Project
    • Practicum of what they have learned?
    • Make Background Fixed Effect
    • Preview Changes
    • Rearrange a Section
    • Add Regular Text
    • Change Text Color
    • Create a divider line
    • Create Multiple Columns
    • Add Text

  • Revisions
  • Mobile Friendly
  • Resize Text For Mobile Device
  • Change Mobile Background Position
  • Mobile Background Width
  • Edit About Page
  • Blocks
  • Services Page
  • Import Entire Page
  • Copy a Section
  • Create a Template
  • Transparent Header
  • Add Page To Menu
  • Sub Menu
  • Delete Page From Menu
  • Create a Simple Text Logo
  • Upload Your Logo
  • Create Your Own Logo
  • Create Site Icon
  • Header
  • Rearranging Header
  • Header Button
  • Change Menu Color
  • Mobile Header
  • Mobile Menu Design
  • Mobile Menu Button
  • Tablet Logo Size
  • Footer
  • Logout
  • Finalized your WordPress Website
  • Practical and Project
    • Practicum of what they have learned?

추천 코스

Web Development – Pro

백-엔드 개발을 위한 다양한 언어와 지식을 선택하여 학습하는 과정

웹 표준 기술을 기반으로 웹어플리케이션 개발자 양성에 초점을 두어 기초부터 단계별로 진행하며 기본학습과 응용학습을 원활히 습득할 수 있도록 TASK & PROJECT형식으로 커리큘럼이 구성되어 있습니다.

전과정을 수료하게 되면 실무에 투입될 수 있는 개발자의 실력을 보유하게 됩니다.

Web Design

웹 디자인을 위한 기본지식을 학습하는 과정

시안 디자인, 디자인 요소 작업 및 퍼블리싱, 인터랙션 까지의 웹디자이너에 필요한 지식을 학습할 수 있도록 커리큘럼이 구성되어 있습니다.

일일 학습 시간표

오전수업 점식식사 오후수업 저녁식사 저녁수업
8:00-12:05 12:05-13:05 13:05-17:00 17:00-18:00 18:00-22:00
영어 1:1, Group 클래스 IT 클래스 프로젝트(자율)