로그인

|

내 강의실

|

마이페이지
프로그래밍

[웹 퍼블리싱 전문가] HTML & CSS로 시작하는 실무 웹코딩

웹사이트 구축의 기초를 탄탄하게 다질 수 있는 과정입니다. 

비주얼 스튜디오 코드(VS Code)를 활용하여 HTML 문서의 개념과 구조를 이해하고, 다양한 태그를 사용하여 웹페이지를 구성하는 방법을 학습합니다.


웹 퍼블리싱과 웹 개발을 처음 접하는 입문자를 대상으로 하며, 실무에서 활용할 수 있도록 포토샵 디자인을 참조하여 HTML과 CSS를 적용하는 실습 중심의 교육을 제공합니다. 

웹 표준을 준수하면서도 직관적이고 반응형 웹페이지를 제작하는 핵심 기술을 익히게 됩니다.


특히 CSS3를 활용한 스타일링과 레이아웃 기법(FLEX, GRID 등), 폰트 및 색상 조합, 박스 모델과 애니메이션 효과(TRANSITION, ANIMATION) 등을 배우며, 실전에서 바로 적용할 수 있도록 구성하였습니다.

또한, CSS RESET과 normalize.css를 활용한 초기화 기법을 익히고, 링크 및 버튼 스타일링, 폼 요소 디자인 등 웹사이트의 필수 구성 요소를 효과적으로 디자인하는 방법을 학습합니다.

 

이 과정을 통해 수강생들은 단순한 웹페이지 제작을 넘어, 실무에 적합한 웹 퍼블리싱 역량을 갖출 수 있도록 합니다.

 

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

영상 20

총 학습시간 12:21:20

학습기간
  • 수강료

    129,360원

  • 지원금액

    -84,080원

  • 결제금액

    45,280원

사업주 직업능력개발 지원 과정
제도안내 Go
  • 수강료

    129,360원

학습기간

* 학습기간 1개월

  • 수강료

    129,360원

  • 지원금액

    -0원

  • 결제금액

    129,360원

학습대상

  • 1. 웹 개발 및 퍼블리싱을 처음 접하는 입문자
    ㆍHTML 및 CSS에 대한 사전 지식이 없거나, 기초 개념을 배우고 싶은 초급 학습자
    ㆍ코딩을 처음 배우는 비전공자 및 웹 디자인에 관심이 있는 사람
  •  
  •  
  • 2. 웹 디자인 및 UI/UX에 관심이 있는 디자이너 및 실무자
    ㆍ포토샵, 일러스트레이터 등 디자인 툴은 다룰 수 있지만, 웹 퍼블리싱을 처음 접하는 디자이너
    ㆍUI/UX 기획자로서 HTML, CSS의 기초를 이해하고 싶어 하는 사람
  •  
  •  
  • 3. 기본적인 웹페이지 제작이 필요한 프리랜서 및 취업 준비생
    ㆍ간단한 개인 포트폴리오 웹사이트, 블로그, 랜딩 페이지 등을 직접 제작하려는 프리랜서
    ㆍ웹 퍼블리싱 및 프론트엔드 개발 직무를 준비하는 취업 희망자

학습목표

  • 1. 웹 퍼블리싱 기초 역량 습득
    ㆍHTML과 CSS의 기본 문법을 익히고, 웹페이지의 구조와 스타일을 직접 구현할 수 있도록 한다.
    ㆍ웹 표준을 준수한 HTML 작성법을 학습하고, 실무에서 활용할 수 있는 기본적인 퍼블리싱 능력을 갖춘다.
  •  
  •  
  • 2. CSS를 활용한 레이아웃 및 디자인 구성
    ㆍ플렉스 박스(Flexbox) 및 포지션(Position) 속성을 활용하여 다양한 웹페이지 레이아웃을 구성할 수 있다.
    ㆍ폰트, 색상, 배경, 박스 모델 등 스타일 요소를 활용하여 시각적으로 완성도 높은 웹 디자인을 구현할 수 있다.
    ㆍCSS 애니메이션 및 효과(Transition, Animation)를 적용하여 동적인 웹페이지 제작이 가능하다.
  •  
  •  
  • 3. 디자인 참조 및 실전 적용 능력 배양
    ㆍ포토샵(Adobe Photoshop) 디자인을 기반으로 HTML과 CSS를 활용하여 웹페이지를 제작할 수 있다.
    ㆍ실무에서 요구되는 기본적인 웹 퍼블리싱 작업을 수행할 수 있도록 프로젝트 중심의 학습을 진행한다.
  •  
  •  
  • + 부가 설명
  • 태그의 의미 및 활용 등 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:34:17
6

이미지

00:31:11
7

폼기초

00:40:20
8

디자인 참고 코딩하기

00:59:09
9

CSS 기본 문법과 색상구현

00:33:48
10

CSS 단위

00:38:23
11

CSS 기본 선택자

00:31:22
12

CSS 폰트

00:26:40
13

배경 스타일

00:37:09
14

디스플레이 속성

00:33:57
15

박스모델

00:33:13
16

Position 기초

00:32:14
17

Flex 속성 1

00:25:19
18

Flex 속성 2

00:31:35
19

디자인 참고 CSS 작성하기 1

00:50:31
20

디자인 참고 CSS 작성하기 2

00:58:33