로그인

|

내 강의실

|

마이페이지
프로그래밍

HTML & CSS: 웹 개발의 기초

비주얼 스튜디오 코드(VS code)를 이용하여 웹 사이트를 만드는 데 가장 기본이 되는 HTML 문서의 개념 및 구조를 학습할 수 있는 과정입니다. HTML언어 및 웹프로그래밍을 처음 접하는 입문자를 대상으로하는 기초과정으로, 포토샵 디자인을 참조하고 다양한 태그들을 사용하여 웹페이지의 구조를 구성할 수 있습니다. 웹프로그래밍 입문자가 단기간에 HTML의 기본적인틀과 구성요소들을 익히고 활용할 수 있습니다. CSS3를 활용하여 텍스트나 문단, 배경의 스타일을 설정하고 레이아웃을 구성할 수 있습니다. HTML문서에 스타일을 적용할 대상을 선택하는 선택자부터, 색상, 크기, 박스모델 활용방법, 레이아웃 및 다양한 애니메이션 기법을 학습하여 웹페이지 제작에 활용할 수 있습니다.

 

*활용 소프트웨어 : Visual studio code, Adobe Photoshop CS6 버전 이상

영상 0

총 학습시간

학습기간
  • 수강료

    290,000원

  • 지원금액

    -290,000원

  • 결제금액

    0원

고용24 과정 바로 신청
사업주 직업능력개발 지원 과정
제도안내 Go
  • 수강료

    290,000원

수강 문의
학습기간

* 학습기간 1개월

  • 수강료

    290,000원

  • 지원금액

    -0원

  • 결제금액

    290,000원

학습대상

  • 디지털 역량 부족으로 변화된 노동시장 진입 또는 적응에 어려움을 겪는 분
  • 비전공자로서 디지털 기초역량을 향상하고자 하는 분
  • HTML, CSS 언어를 처음 접하는 분
  • 웹 퍼블리셔 & 웹개발 등에 관심있는 분
  •  
  • 관련 직군 및 직무 : 정보기술개발, 응용SW엔지니어링, 디지털디자인 등

학습목표

  • 태그의 의미 및 활용 등 HTML 문서의 기본 내용들을 이해할 수 있다.
  • 웹 페이지 구성에 필요한 주요 태그들과 그 사용법을 익히고 사용할 수 있다.
  • 웹 표준을 준수하여 웹 페이지의 HTML을 작성할 수 있다.
  • 포토샵 디자인을 참조하여 웹페이지의 기본구조를 생성할 수 있다.
  • CSS 기본 문법과 단위(unit)를 익히고 선택자를 설정할 수 있다.
  • 디자인의 색상, 크기, 레이아웃 등 웹 페이지 스타일을 구현할 수 있다.
  • 박스모델의 개념과 이를 제어하는 CSS3의 프로퍼티를 이해할 수 있다.
  • FLOAT, POSITION, FLEX 레이아웃 기법을 활용하여 스타일을 설정할 수 있다.
  • CSS 문법으로 TRANSITION, ANIMATION을 구현할 수 있다.​ 

강사 경력 사항

  • 김동주 강사
  • 그린컴퓨터아트학원 / 웹 프론트엔드 강사
  • 정보기술개발 분야 강의 경력 9년 이상
    - 웹개발, 관리, 온라인 마케팅 근무 경력 10년 이상
    - 저서 : 웹 디자인 & 웹 퍼블리싱을 위한 피그마 완벽 활용서(비제이퍼블릭/2021.07. 출간)

학습내용

1

학습전 준비사항과 HTML 문서 기초 1

00:41:41
2

HTML 문서 기초 2

00:30:20
3

HTML 문서 기초 3

00:32:52
4

섹셔닝과 리스트 태그

00:38:46
5

테이블

00:32:35
6

링크

00:34:17
7

이미지

00:31:11
8

폼기초

00:40:20
9

폼 활용

00:36:21
10

멀티미디어 활용

00:35:40
11

디자인 참고 코딩하기

00:59:09
12

CSS 기본 문법과 색상구현

00:33:48
13

CSS 단위

00:38:23
14

CSS 기본 선택자

00:31:22
15

CSS 고급 선택자

00:53:37
16

CSS 우선순위

00:32:50
17

CSS 폰트

00:26:40
18

글 스타일, 정렬 및 간격

00:35:22
19

텍스트 스타일과 목록 스타일

00:30:25
20

배경 스타일

00:37:09
21

디스플레이 속성

00:33:57
22

IR(이미지 교체)기법

00:32:37
23

박스모델

00:33:13
24

포지셔닝 스타일

00:31:27
25

플롯 응용

00:28:58
26

Position 기초

00:32:14
27

Position 응용

00:33:17
28

애니메이션 기초 - transition

00:35:59
29

Transition 활용

00:30:06
30

애니메이션 기초 - animation

00:29:42
31

다단 만들기 - column

00:26:14
32

그레디언트(gradient)

00:30:32
33

그림자(shadow)

00:31:24
34

transform 속성 1

00:36:03
35

transform 속성 2

00:33:39
36

Loading animation

00:30:22
37

Link Animation

00:43:07
38

Button Animation

00:29:45
39

Flex 속성 1

00:25:19
40

Flex 속성 2

00:31:35
41

디자인 참고 CSS 작성하기 1

00:50:31
42

디자인 참고 CSS 작성하기 2

00:58:33